This device is not compatible.
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.
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!
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.