Application overview

In this course module, you will build a production-ready Angular application. It will consist of a list of products with pictures, descriptions, and prices. Each product will have a dedicated landing page. You will also develop the functionality of adding products to a list of favorites and displaying that list. You will build a back-end and API to feed your application with data. The data will be retrieved from MongoDB provisioned in your Heroku application.

What you will build#

In this course module, you will build a production-ready Angular application. It will consist of a list of products with pictures, descriptions, and prices. Each product will have a dedicated landing page. You will also develop the functionality of adding products to a list of favorites and displaying that list.

You will build a back-end and API to feed your application with data. The data will be retrieved from MongoDB provisioned in cloud.mongodb.com.

The application flow#

Services and components in your Angular application will need to be composed to communicate as shown in the diagram below (solid purple lines represents REST calls; dotted lines represents in-app navigation):

  1. When the user navigates to the application URL, their browser will be served by Heroku with HTML and JavaScript that make up the Angular application.

  2. From now on, communication will be performed via REST calls (purple arrows) - that's how Angular is going to feed the application with the data retrieved from MongoDB.

  3. Inside the application, the user will able to navigate within the following routes:

    1. / and /products (shown in the diagram): the list of products displayed by ProductsListComponent (blue rectangle) and ProductDetailsComponent (green rectangle).

    2. /product/:id: product landing page containing a long description of the product - displayed by ProductDetailsComponent (green rectangle).

    3. /favorites (shown in the diagram): the list of products that have been marked as favorite by the user, displayed with FavoritesComponent (orange rectangle) and ProductDetailsComponent (green rectangle). AuthGuard (red rounded rectangle) will protect this route from unauthorized access.

  4. Components will utilize two services which will retrieve data via REST calls:

    1. ProductsService (light-blue rounded rectangle) - responsible for getting data about all products, or about a specific product.

    2. UserService (yellow rounded rectangle) - responsible for user authentication, getting data about the user (i.e. the list of favorite products) and adding a given product to the favorites list.

What you will learn#

After finishing this module, you will know how to:

  • Set up an Angular project

  • Set up an ExpressJS back-end

  • Retrieve data from MongoDB using NodeJS

  • Set up and retrieve cookies

  • Encrypt and decrypt cookies

  • Deploy the application to Heroku

Start a new discussion. All notification go to the author.