StudyByte (Edtech Project Using Mern Stack Technology)

📖StudyByte is a fully functional ed-tech platform that enables users to create, consume, and rate educational content.

• A seamless and 🚀interactive learning experience for students, making education more accessible and engaging.
• A platform for instructors to showcase their expertise and connect with learners across the globe.

---

🟢 Live

StudyByte Live URL - https://studybyte.vercel.app/

⚡ check email spam 📂 folder if you not received any OTP for signup.

🔥Installation

1. Clone Repository: https://github.com/Sameerkhan9412/StudyByte.git
2. Navigate to the project directory: cd
3. Install dependencies for frontend : npm install
4. navigate to server and install dependencies:npm install

Configuration

1. For only frontend replace the example.env file in root with .env and

   npm run start
   

2. Replace an example.env files with your enviroment virables for
3. Start the development server

   npm run dev
   

Contributing

Contributions are welcome! If you have any suggestions or find any issues, please feel free to open an issue or a pull request.

Project Description

The objective of the EdTech project utilizing the MERN (MongoDB, Express.js, React, Node.js) stack is to create a comprehensive and user-centric online educational platform that revolutionizes the way students learn and educators teach.

---

Objective

The objective of the EdTech project utilizing the MERN (MongoDB, Express.js, React, Node.js) stack is to create a comprehensive and user-centric online educational platform that revolutionizes the way students learn and educators teach.

---

👩‍💻What Technology Used To Create:

• React JS : Utilized React.js for project development due to its efficient component-based architecture, declarative syntax, and virtual DOM, enhancing code maintainability,scalability, and overall development speed."

• Node Js : Utilized Node.js for efficient server-side JavaScript, enabling scalable and high-performance backend operations in my project.

• MongoDB : Utilized MongoDB for flexible schema, scalability, and seamless integration with Node.js in my project for efficient data management.

• Express Js :Utilized Express in project for efficient server-side handling, routing, and middleware, streamlining development and enhancing scalability.

• Tailwind CSS : Utilized Tailwind CSS for streamlined, utility-first styling in my project, enhancing development speed and maintaining a clean, efficient codebase.

• Nodemailer : Nodemailer used for email functionality, streamlining communication and notifications in my project, enhancing user experience and engagement.

• Integrated Razorpay : Integrated Razorpay for secure, seamless payments, enhancing user experience and ensuring efficient transaction processing in my project.

• Other Tools: Like vscode ( for code ), postman( for testing API) and much more.

---

Project Scope

The scope of the project is to conceive, design, and implement an advanced EdTech platform leveraging the MERN (MongoDB, Express.js, React, Node.js) stack. The project aims to revolutionize the educational landscape by creating a dynamic and user-centric online learning environment that caters to the needs of students, educators, and administrators. The project's scope encompasses a comprehensive range of features, functionalities, and considerations:

1. User Segmentation:

   ✅Students: Providing a user-friendly interface for learners to explore, enroll in, and engage with diverse courses.

   ✅Educators: Offering tools for educators to create, manage, and deliver courses effectively.

   ✅Administrators: Enabling administrative users to oversee the platform's functionality, manage user data, and ensure security.

2. Course Management and Content Delivery:

   ✅Course Creation: Educators can create and customize courses, adding multimedia content, resources.

   ✅Content Organization: Structuring content into modules, lessons, and sections for easy navigation and comprehension.

   ✅Content Delivery: Providing a seamless experience for students to access course materials, progress through lessons.

3. User Authentication and Security::

   ✅User Registration and Authentication: Implementing secure user registration, login, and password reset functionalities.

   ✅Role-Based Access: Segregating user roles to provide appropriate access levels and permissions, ensuring data security and privacy.

4. Personalization and Progress Tracking:

   ✅Personalized Learning Paths: Utilizing React to create personalized learning experiences by recommending courses based on user interests and past interactions.

   ✅Progress Tracking: SImplementing real-time progress tracking, allowing students to monitor their advancement and educators to provide timely guidance.

5. Payment Integration:

   ✅Razorpay Integration: Facilitating secure online payments for course enrollment through various payment methods.

   ✅Subscription Models: Implementing subscription-based access to courses, enabling continuous learning experiences.

6. Communication and Engagement:

   ✅Nodemailer Integration:: Using Nodemailer to send automated emails for account verification, OTP generation, payment confirmations, and course updates.

   ✅Notifications: Sending timely notifications to users regarding course updates, assignments, deadlines, and discussions through mail.

7. Responsive Design and User Experience:

   ✅Responsive UI: Designing a responsive and visually appealing user interface using React and Tailwind CSS to ensure optimal usability across devices.

8. Analytics and Reporting:

   ✅Data Collection: Utilizing MongoDB to gather user interaction data for analysis and improvements.

   ✅Performance Metrics: Generating reports on user engagement, course popularity, completion rates, and overall platform usage.

9. Scalability and Maintenance::

   ✅Scalable Architecture: Designing a scalable backend architecture using Express.js and Node.js to accommodate growing user bases.

   ✅Maintenance and Updates: Establishing a plan for regular maintenance, bug fixes, and platform updates.

CONCLUTION:In conclusion, the project's scope is ambitious and comprehensive, aiming to develop an innovative EdTech platform that transforms education through technology. By leveraging the MERN stack and integrating various features, the platform aims to enhance the learning experience, foster engagement, and streamline the educational process for students, educators, and administrators alike.

---

Project Screenshot

Authentication Related Pages

Signup

OTP

Reset Password

Login

---

Long Pages

---

Navbar

---

Catalog

Courses List

Course Details

Cart Page

Payment Gateway

---

User

As Student

Profile

Enrolled Courses

Cart Page

Rating By Student

Instructor Pages

Instructor Profile

Instructor Dashboard

Setting Profile

Rating By Student

System Architecture

The StudyByte platform consists of three main components: the front end, the back end, and the database. The platform follows a client-server architecture, with the front end serving as the client and the back end and database serving as the server.

Front-end:

The front end of the platform is built using ReactJS, ReactJS allows for the creation of dynamic and responsive user interfaces, which are critical for providing an engaging learning experience to the students. The front end communicates with the back end using RESTful API calls.

Back-end:

The back end of the platform is built using NodeJS and ExpressJS,. The back end provides APIs for the front end to consume, which include functionalities such as user authentication, course creation, and course consumption. The back end also handles the logic for processing and storing the course content and user data.

Database:

The database for the platform is built using MongoDB, which is a NoSQL database that provides a flexible and scalable data storage solution. MongoDB allows for the storage of unstructured and semi-structured data. The database stores the course content, user data, and other relevant information related to the platform.

Architecture Diagram:

Here is a high-level diagram that illustrates the architecture of the StudyByte ed-tech platform:

Frontend End:

The front end of StudyByte has all the necessary pages that an ed-tech platform should have. Some of these pages are:

For Students:

• Homepage: This page will have a brief introduction to the platform, as well as links to the course list and user details.
• Course List: This page will have a list of all the courses available on the platform, along with their descriptions and ratings.
• Wishlist: This page will display all the courses that a student has added to their wishlist.
• Cart Checkout: This page will allow the user to complete the course purchase.
• Course Content: This page will have the course content for a particular course, including videos, and other related material.
• User Details: This page will have details about the student's account, including their name, email, and other relevant information.
• User Edit Details: This page will allow the student to edit their account details.

For Instructors:

• Dashboard: This page will have an overview of the instructor's courses, as well as the ratings and feedback for each course.
• Insights: This page will have detailed insights into the instructor's courses, including the number of views, clicks, and other relevant metrics. -Course Management Pages: These pages will allow the instructor to create, update, and delete courses, as well as manage the course content and pricing.
• View and Edit Profile Details: These pages will allow the instructor to view and edit their account details. PAGE 3 For Admin (this is for future scope):
• Dashboard: This page will have an overview of the platform's courses, instructors, and students.
• Insights: This page will have detailed insights into the platform's metrics, including the number of registered users, courses, and revenue.
• Instructor Management: This page will allow the admin to manage the platform's instructors, including their account details, courses, and ratings.
• Other Relevant Pages: The admin will also have access to other relevant pages, such as user management and course management pages.

To build the front end, we use frameworks and libraries such as ReactJS, We also use CSS and Tailwind, which are styling frameworks that help make the user interface look good and responsive. To manage the state of the application, we use Redux, which is a popular state management library for React.

Backend:

Description of the Back-end Architecture: StudyByte uses a monolithic architecture, with the backend built using Node.js and Express.js, and MongoDB as the primary database.

Features and Functionalities of the Back-end: The back end of StudyByte provides a range of features and functionalities, including:

1. User authentication and authorization: Students and instructors can sign up and log in to the platform using their email addresses and password. The platform also supports OTP (One-Time Password) verification and forgot password functionality for added security.

2. Course management: Instructors can create, read, update, and delete courses, as well as manage course content and media. Students can view and rate courses.

3. Payment Integration: Students will purchase and enrol on courses by completing the checkout flow that is followed by Razorpay integration for payment handling.

4. Cloud-based media management: StudyByte uses Cloudinary, a cloud-based media management service, to store and manage all media content, including images, videos, and documents.

5. Markdown formatting: Course content in document format is stored in Markdown format, which allows for easier display and rendering on the front end.

Frameworks, Libraries, and Tools used: The back end of StudyByte uses a range of frameworks, libraries, and tools to ensure its functionality and performance, including:

1. Node.js: Node.js is used as the primary framework for the back end.

2. MongoDB: MongoDB is used as the primary database, providing a flexible and scalable data storage solution.

3. Express.js: Express.js is used as a web application framework, providing a range of features and tools for building web applications.

4. JWT: JWT (JSON Web Tokens) are used for authentication and authorization, providing a secure and reliable way to manage user credentials.

5. Bcrypt: Bcrypt is used for password hashing, adding an extra layer of security to user data.

6. Mongoose: Mongoose is used as an Object Data Modeling (ODM) library, providing a way to interact with MongoDB using JavaScript

Data Models and Database Schema:

The back end of StudyByte uses a range of data models and database schemas to manage data, including:

1. Student schema: Includes fields such as name, email, password, and course details for each student.
2. Instructor schema: Includes fields such as name, email, password, and course details for each instructor.
3. Course schema: Includes fields such as course name, description, instructor details, and media content.

Overall, the back-end of StudyByte is designed to provide a robust and scalable solution for an ed-tech platform, with a focus on security, reliability, and ease of use. By using the right frameworks, libraries, and tools, we can ensure that the platform functions smoothly and provides an optimal user experience for all its users.

API Design:

The StudyByte platform's API is designed following the REST architectural style. The API is implemented using Node.js and Express.js. It uses JSON for data exchange and follows standard HTTP request methods such as GET, POST, PUT, and DELETE. Sample list of API endpoints and their functionalities:

1. /api/auth/signup (POST) - Create a new user (student or instructor) account.

2. /api/auth/login (POST) – Log in using existing credentials and generate a JWT token.

3. /api/auth/verify-otp (POST) - Verify the OTP sent to the user's registered email.

4. /api/auth/forgot-password (POST) - Send an email with a password reset link to the registered email.

5. /api/courses (GET) - Get a list of all available courses.

6. /api/courses/:id (GET) - Get details of a specific course by ID.

7. /api/courses (POST) - Create a new course.

8. /api/courses/:id (PUT) - Update an existing course by ID.

9. /api/courses/:id (DELETE) - Delete a course by ID.

10. /api/courses/:id/rate (POST) - Add a rating (out of 5) to a course. Sample API requests and responses:

11. GET /api/courses: Get all courses

    • Response: A list of all courses in the database

12. GET /api/courses/🆔 Get a single course by ID

    • Response: The course with the specified ID

13. POST /api/courses: Create a new course

    • Request: The course details in the request body
    • Response: The newly created course

14. PUT /api/courses/🆔 Update an existing course by ID

    • Request: The updated course details in the request body
    • Response: The updated course

15. DELETE /api/courses/🆔 Delete a course by ID

    • Response: A success message indicating that the course has been deleted.

In conclusion, the REST API design for the StudyByte ed-tech platform is a crucial part of the project. The API endpoints and their functionalities are designed to ensure seamless communication between the front-end and back-end of the application. By following RESTful principles, the API will be scalable, maintainable, and reliable. The sample API requests and responses provided above illustrate how each endpoint will function and what kind of data it will accept or return. With this API design, StudyByte will be able to provide a smooth user experience while ensuring security and stability.