This device is not compatible.
PROJECT
Build an E-learning Website with the MERN Stack
In this project, we’ll build an e-learning course catalog website with search functionality. We’ll learn to develop the database, its schema, and the API. Finally, we’ll develop the frontend, and connect it to the backend.
You will learn to:
Use the functional components of React.
Use React-Bootstrap to design the layout.
Use MongoDB to store and retrieve data, using the Mongoose library.
Uplift the state to share the data between multiple functional components.
Use the Axios library to connect React components to the Node.js server.
Connect the Node.js server to store and retrieve data from MongoDB.
Skills
Web Frameworks
Web Development
Prerequisites
Basic understanding of React components and state
Basic understanding of React hooks
Basic understanding of JavaScript
Basic understanding of Node.js
Basic understanding of MongoDB
Technology
MERN
Project Description
In this MERN stack-based project, we’ll develop an e-learning course catalog website. You’ll display the list of all the courses on the website. The website will also allow users to search the available courses with a search bar.
Refer to the following figure to preview the final layout of the website:
We’ll use the Express framework on Node.js to develop the back-end API, which will interact with the MongoDB database where the data is fetched from and stored. After setting up the backend, we’ll implement the front-end components and add search functionality. The finalized product will fetch the data from MongoDB via the NodeJS server and display it in the React functional components.
Project Tasks
1
Backend with Node.js
Task 0: Initial Setup
Task 1: Define the Database Schema
Task 2: Set up Node.js Server and MongoDB Connection
Task 3: Create the Routes and Controllers
Task 4: Insert Data into the Database
Task 5: Connect the Backend to Different Routes
2
Frontend with React
Task 6: Develop the Frontend with React
Task 7: Develop a Component for Courses
Task 8: Develop Component for Search
Task 9: Integrate Components
Task 10: Test the Components
3
3. Connect Frontend and Backend
Task 11: Connect the Frontend with the Backend
Task 12: Update the BaseComponent
Congratulations!
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.