This device is not compatible.

Build an E-learning Website with MEAN Stack

PROJECT


Build an E-learning Website with MEAN Stack

In this MEAN stack-based project, we'll build an e-learning course catalog website that includes search functionality. We'll develop the front-end with Angular, and we’ll use Node.js and MongoDB to develop the back-end API and database, respectively.

Build an E-learning Website with MEAN Stack

You will learn to:

Use Angular directives to display JSON data.

Style the data using CSS, Bootstrap, and jQuery.

Use Angular’s custom pipes to implement search functionality.

Use Angular to create a service that sends calls to an API.

Use Node.js and Express to create a back-end API.

Use MongoDB to store and retrieve data.

Skills

HTTP Protocol and Web API

HTML elements

MongoDB

REST API

Prerequisites

A basic understanding of HTML and CSS

A basic understanding of TypeScript fundamentals

Familiarity with Angular framework

Technology

MEAN

Project Description

In this MEAN stack-based project, we’ll develop an e-learning course catalog website that includes search functionality. We’ll build the frontend with Angular and use Bootstrap to style the component. Using the Express framework on Node.js, we’ll develop the back-end API. This will interact with the MongoDB database where we’ll store and retrieve data. We’ll also implement the search function on the displayed data using Angular’s filter pipes. The data flow from the back-end to the front-end Angular component will occur through Angular service calls. The template project structure is provided for us.

Project Tasks

1

Create a Rest API Using Node.js

Task 0: Complete the Initial Setup

Task 1: Determine the Database Schema

Task 2: Establish the Node.js Server and MongoDB Connection

Task 3: Define the Routes

Task 4: Create the Controllers

Task 5: Insert Data into the Database

Task 6: Connect the Backend to the Endpoint

2

Design and Implement the Frontend

Task 7: Import Data from a JSON File

Task 8: Display Data Using Angular Directives

Task 9: Implement the Logic of the Read More Button

Task 10: Add the Read More Button

Task 11: Style the Application Using Bootstrap

Task 12: Implement the Search Logic

Task 13: Develop the Search Bar

Task 14: Import Pipes and Directives

3

Connect the Backend with the Frontend

Task 15: Add Educative's Live URL

Task 16: Create the Courses Service

Task 17: Utilize the Service

Task 18: Inject the Service

Congratulations!