Learning Management Platform

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Technologies Used
2. Getting Started
   • Prerequisites
   • Installation
3. License

About The Project

Edusea- a state-of-the-art Learning Management System designed to provide an interactive and comprehensive online learning experience. Built with Next.js and Express.js, this platform is equipped with advanced features for course management, student engagement, and secure, seamless user experiences.

Key Features

01. Dynamic Course Creation & Management: Easily create and manage course content, including images and attachments

(view screenshot)

02. Robust Authentication: Secure user authentication using Clerk

(view screenshot)

03. Interactive Video Playback & Upload: Integrated with Mux for a smooth video experience

(view screenshot)

04. Secure Payments: Stripe integration for handling course payments and subscriptions

(view screenshot)

05. User-Friendly Interface: Modern, responsive design with Tailwind CSS

(view screenshot)

06. Document and Image Uploads: Utilizing UploadThing for hassle-free file management.

(view screenshot)

(back to top)

Technologies Used

Frontend

Technologies Used

Key Libraries:

• @clerk/nextjs 4.29.6: For secure user authentication.
• @mux/mux-node 8.0.0 and @mux/mux-player-react 2.3.3 : For video playback and uploads.
• @uploadthing/react 6.2.2: For handling document and image uploads.
• react-hot-toast 2.4.1: For elegant notifications.
• prisma 5.9.1: For effiecient and type-safe database access.
• zod 4.5.1: Schema declaration and validation.
• zustand 4.5.1: State management.

UI/UX Enhancements:

• Tailwind Merge 2.2.1: For optimizing Tailwind CSS classes.
• cmdk 0.2.1: Command menu interface.
• @hello-pangea/dnd 16.5.0: Drag and drop file uploads.
• @tanstack/react-table 8.12.0: For building and managing tables.
• @radix-ui/react-dialog, @radix-ui/react-dropdown-menu, etc., for advanced UI components.

Features:

• Interactive and user-friendly interface.
• Seamless integration with video streaming and file upload services.
• Comprehensive course creation and management tools.
• Responsive design ensuring compatibility across various devices.

Development Tools:

• eslint 8: For code linting.
• postcss 8 and autoprefixer 10.0.1: For CSS processing.
• typescript 5: For type-checking.

Backend

Technology Used:

Main technologies:

• Next.js 10.3.0: The backbone of the server, handling routing and middleware.
• Node.js: The runtime environment for executing JavaScript on the server side.

Key Libraries:

• Stripe: Payment processing platform For online transactions.
• Uploadthing: Image and video upload library for seamless multimedia integration.
• Mux: Video streaming and processing platform for high-quality multimedia content.

Database:

• MongoDB: NoSQL database used for storing application data.

Features:

• Robust REST API endpoints for data retrieval and manipulation.
• Secure connection to the database with efficient query handling.
• Scalable architecture suitable for expanding features and user base.

Development Tools:

• Various NPM packages for enhancing functionality and efficiency.
• Postman for testing and validating API endpoints.

Integration:

• Stripe for payment processing: Integrated with Stripe's webhooks for handling transactions.

• Other third-party services as required by the application.

  (back to top)

Getting Started

To get started with the Edusea project, follow these steps:

Prerequisites

Node version 18.x.x

Installation

1. Clone the repository

   git clone https://github.com/wali39/edusea.git

2. Install dependencies

   npm install
   or
   yarn install

3. Setup Environment variable .env

   NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
   NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
   NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
   NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
   MDB_DATABASE_URL = "Your mongodb database URL";
   
   UPLOADTHING_SECRET = "Your Uploadthing secret";
   UPLOADTHING_APP_ID = "Your uploadthing app id";
   
   MUX_TOKEN_ID = "";
   MUX_TOKEN_SECRET = "";
   STRIPE_API_KEY = "";
   
   NEXT_PUBLIC_APP_URL = "";
   
   STRIPE_WEBHOOK_SECRET = "";

4. Set up prisma to sync with your db (MongodDB)

   npx prisma generate
   npx prisma db push

5. Run development server

   npm run dev
   or
   yarn run dev

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)