What Are We Going to Build?

The e-commerce web application

We’ll build our e-commerce web application in an incremental manner. Our application will implement all the concepts that we’ll learn in the course. The application will consist of two parts: an admin section and a user section.

Admin section

The admin section of a web application is responsible for keeping a website running efficiently. The admin section manages website content, builds web pages, manages accounts, and much more. The admin section of our web application will provide functionalities to do the following:

• Add products.
• Delete products.
• Edit/update products.
• See all products.
• Search products.
• Sort products based on their price.

The illustration below shows the admin section of our application:

User section

A web application user is someone who visits a website or a web application for any purpose. For example, since we’re developing an e-commerce web application, anyone who visits or uses our web application to buy or view products is the user in this case. The user section of our web application will provide functionalities for the following purposes:

• See categories.
• Navigate product listings by category.
• Search products.
• Sort products based on their price.
• Add products to the shopping cart.
• View the shopping cart.

The illustration below shows the user section of our application:

The structure of our web application

Our web application will have a home page, an admin page, and a cart page. Furthermore, all these pages will be linked together with different routes. Before we list the requirements for these pages, let’s take a brief look at routes.

Routes

Routes are used to determine what happens when the user visits a certain page. Every route is linked with a handler, which performs the appropriate action as required in our web application. The illustration below shows the different routes in our application:

These routes can be used to visit our application’s three pages that we talked about just a little earlier. Let’s see what those pages are and what they can be used for.

Home page

Our home page will have the following UI components:

• Navbar: The navbar contains all the links to different pages or routes. In our case, it’ll contain the links to the home page, admin page, and cart page. Users can go to any of these pages through the navbar.

• Image or carousel: The image or carousel component is used to make things more presentable. We’ll add a carousel to our web application.

• Categories: Users can view products sorted by category by choosing a specific category.

Admin page

The admin page will contain the following routes:

• Product route: The product route will contain all the products present in our database.

• Add route: The add route will be responsible for adding products to our database.

• Edit and delete product route: Edit and delete route will be responsible for updating or deleting the products in our database.

Cart page

The cart page will display all the items added to the cart.

By building this web application ourselves, we’ll cover every concept that we need to get started with Ember.