Coffee Shop Website

Turbo 360

In this 6-part series we use beginner-to-intermediate Node JS and Express concepts to help us make a coffee shop website. To begin we connect our local code to the Turbo hosting environment, as well as by importing our static assets and HTML. We will primarily make changes to the website by modifying the global and home.json files as well as through partials and some jQuery.

Setting Up

Beginning Setup - 0:15
In the beginning of the series, we go over what to expect as well as discussing the prerequisite material needed for the project. After this, we begin to work by setting up Node and Express through the terminal.

Running Locally - 7:24
Using the “npm run serve” command to run the Turbo dev server, we can get the server to run on localhost:3000. We can use this localhost in the browser and if everything is working, we should have the basic scaffolded website.

Connecting our Local Code to the Hosting Environment - 9:12
We can use the login from earlier in the video to create space on the Turbo360 hosting environment. Once we have created space, we will connect our local code to the remote environment. If done properly, we should have the same scaffolded website that was on the localhost except now it has a url.

Importing Assets Into the Directory - 13:09
After we import the static assets into the public directory, we will do the same with the HTML. Once we import the HTML into the directory, we should have the kitchen theme from Kusina on our live website. After we run a quick test to make sure the local server matches up with the staging server, we can begin to work with the Kusina template.

Partials - 25:40
Before we use them in our project, we go over why partials are important for code organization as well as for saving time. Partials are files that we can insert on a page that represent groups of HTML code. We create partials for the navigation bar and then continue for the footer, head tag and JavaScript.

Global Configuration - 37:30
We will create a global.json file to help clean up some of the repeat code. Instead of having to type all the code out, we can get the context object which will grab the global.json object we just created. With a global.json file, we can make changes to our website much more easily.

Home Page Configuration

Homepage Design - 0:24
In this video we will continue to customize the website, but specifically for the home page rather than the entire site. Similarly to last video, we will use a .json file to add either a header or subtext to the home page.

About Section - 12:49
We are going to add an “about” section to the home.json file where you will be able to call either a header, subtext, image or an image with a caption. After we implement this into our code, we want to update the home context on the remote server.

Global vs Home Configuration - 23:30
After we go over when to use the global vs home json files, we will modify the global.json to change the time and dates on the footer. Once we make these changes we want to update the remote server one more time. We will begin to modify the menu through the home.json to match something you would see in a coffee shop.

CMS Integration

Setting up the CMS - 2:00
Using the Turbo “extend” command, we create a couple new directories in the root level of the project to set up the Content Management System. The final step in setting up the CMS is going into the app.js and telling the config that we are going to be using the database.

Creating an Item - 5:10
Using the Turbo “resource item” command, we create a menu item with a model and controller. In the model.js for the menu item, we can modify the schema to what we want it to show. For now, we want the schema to display a name, image, price and description of the item.

Accessing the CMS - 8:47
If you go onto Turbo 360, you can go to your project and see the CMS for your project. We will see how to add items to the CMS and then how to call them in the local project. After we see how to add items to the CMS, we will repeat this process for the pastries and tea.

Ordering Coffee

Order Form - 0:54
In this video we will work on creating a place for customers to place an order of coffee. We will begin to work on the form by modifying the columns and their texts. Once we set up the form, we will also link the form data to a post handler.

Creating the Order in the CMS - 9:25
Using the post and controllers, we will be able to create the order in the Content Management System. In addition to getting the order in the CMS, there should be a new category in the CMS called “orders,” which will keep track of all the orders.

Final Touches - 14:16
We will begin to change the form to be more cosmetically appealing to the customer. Using jQuery, we can create a function to get the name, email and order of the customer which we can use to modify the HTML to reflect the order they just placed.

Content Delivery Network

Content Delivery Network in Turbo - 0:24
In this video we will optimize the website. We are going to connect the CSS, JS and image assets to the content delivery network that comes with every Turbo project. The Content Delivery Network is the best tool in keeping track of all your static assets.

Adding the Content Delivery Network - 4:32
If we go into our head tag and just add the CDN to the tag, then the CDN will be linked to the static asset imports.

Local vs Live - 5:42
These changes won’t be reflected on the localhost:3000 because it has no CDN but if we deploy it to the server, then we can see these changes.

CDN For JavaScript and Images - 7:25
We can add the CDN to the JS and images similarly to how we added it to the head.

Final Touches

Wrapping Up - 0:08
In this video we will be adding the final touches to our coffee shop website.

Meet the Team - 1:40
For the first modification, we will change the testimony page to a meet the team page. Using the home json, we will add a “team” section that can be used to call a header, subtext or a group of a text, image and quote.

Sync and Deploy - 10:57
After adding two people to the “meet the team” section on our website, we sync what we have locally with the remote server and if everything matches up we will deploy.

Order Placement Form - 12:34
We will begin to change the order placement form by creating a section on the home.json. In the order section we will be able to call a header, subheader and an image background.

Join Free

Join for free today and deploy your site in seconds

Already have an account? Sign in HERE