🧑‍💻

Building Fullstack Project Using MERN

Jun 28, 2024

Building Fullstack Project Using MERN

Course Overview

  • Develop full projects using MERN stack.
  • Includes frontend, backend, and database integration.
  • Three types of dashboards: User, Instructor, Admin.
  • Step-by-step process; no prerequisites needed besides basic React knowledge.

Key Features

  • User Dashboard: Purchase and enroll in courses.
  • Instructor Dashboard: Upload courses and earn money.
  • Admin Dashboard: Approve instructors/courses, manage the website.

Implementation

Frontend Overview

  • Hero sections with banner and toggle button for dark/light mode.
  • Homepage with gallery, popular classes, instructor details, stats, email section, and footer.
  • Instructor list and detailed views for classes.
  • User registration and login (manual & Google).
  • Course enrollment and dashboard features: my courses, payment history, applying for instructor.

Backend Setup

Basic Server Setup

  1. Initialize Express server with index.js as the entry point.
  2. Install required packages express and nodemon.
  3. Define POST and GET methods for managing course data.

MongoDB Integration

  1. Create MongoDB account and setup a new project.
  2. Define collections (UsersCollection, ClassesCollection, CardCollection, PaymentCollection, EnrolledCollection, AppliedCollection).
  3. Secure database connection using environment variables (dotenv package).

API Routes

  • Classes API: GET, POST, PUT and DELETE methods to manage courses.
  • User API: CRUD operations for user management.
  • Card API: Manage items added to the card.
  • Payment API: Stripe integration for payments and managing payment details.
  • Instructor and Enrollment API: Managing instructor applications and course enrollments.
  • Admin API: Get site statistics and manage users/classes.

JWT Authentication

  1. Setup JWT for authentication and authorization.
  2. Implement middleware for verifying JWT tokens and user roles (admin, instructor).

Full Example Code for Each Route and Middleware

  • Detailed code snippets for adding, updating, and deleting courses and users.
  • Stripe payment integration step-by-step.
  • Middleware for role-based access control.

Conclusion

  • Full MERN stack project setup from scratch to production level.
  • Emphasis on security and best practices.
  • Comprehensive coverage of frontend to backend integration.

Useful Commands

  • Starting Server: npm start
  • Database Connection: Set in .env file.
  • Testing API: Using Postman, test each API route for functionality.