Skip to content

πŸš€ A full-stack MERN application that serves as a learning platform where users can explore, manage, and access educational content with a seamless experience. Built with React, Redux, TailwindCSS, Shadcn/UI, Node.js, Express, and MongoDB, it integrates Stripe for payments and Cloudinary for media management.

Notifications You must be signed in to change notification settings

Sarasmishra/Learning_Hub

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

15 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸŽ“ Learning Hub

Learning Hub is a full-stack online learning platform built with the MERN stack.
It provides a seamless way for users to explore, purchase, and learn courses, while enabling admins/instructors to create, manage, and sell courses.


πŸš€ Features

  • πŸ” Authentication & Authorization – Secure signup/login using JWT & bcrypt.
  • πŸ‘€ User Profiles – Update personal info & track course progress.
  • πŸŽ₯ Course Management – Admins can add, edit, publish/unpublish courses.
  • πŸ“‚ Video Uploads – Cloudinary integration for secure video & image hosting.
  • πŸ›’ Payments – Integrated Stripe for secure checkout & course purchases.
  • πŸ“Š Dashboard – Manage purchased courses & admin statistics.
  • πŸ” Search & Filters – Find courses easily with advanced filters.
  • πŸŒ™ Light/Dark Mode – Built with shadcn/ui for modern UI/UX.
  • ⚑ Redux Toolkit (RTK Query) – State management & API integration.

πŸ› οΈ Tech Stack

Frontend:

  • React
  • Redux
  • TailwindCSS
  • Shadcn/UI

Backend:

  • Node.js
  • Express.js

Database:

  • MongoDB

Other Integrations:

  • Stripe
  • Cloudinary

πŸ“¦ Installation & Setup

1. Clone the Repository

git clone https://github.com/Sarasmishra/Learning_Hub.git
cd Learning_Hub

2. Install Dependencies

# Install frontend dependencies
cd client
npm install

# Install backend dependencies
cd ../server
npm install

3. Setup Environment Variables

Create a .env file inside the server folder and add:

MONGO_URI=your_mongodb_uri
PORT=3005
SALT_ROUND=10
SECRET_KEY=your_secret_key

# Cloudinary setup
CLOUD_API_KEY=your_api_key
CLOUD_API_SECRET=your_api_secret
CLOUD_NAME=your_cloud_name

# Stripe setup
STRIPE_SECRET_KEY=your_secret_key
STRIPE_PUBLISHABLE_KEY=your_publishable_key
WEBHOOK_ENDPOINT_SECRET=your_webhook_secret

4. Run the Project

# Start backend
cd server
npm run dev

# Start frontend (in another terminal)
cd client
npm start

🎯 Screenshots

1.Sign In /Create Account

Screenshot 2025-12-09 100617

2.Home

Screenshot 2025-12-09 100538

3. Course Detail Page

Screenshot 2025-08-26 125531

4. Dashboard(Instructor)

Screenshot 2025-08-26 125744

5. All courses(Dashboard)

Screenshot 2025-08-26 125859

6. Course Creation

Screenshot 2025-08-26 130017

7. Assignment Page

Screenshot 2025-08-26 130452

8. Payment Gateway

Screenshot 2025-08-26 130304

9. About

Screenshot 2025-12-09 100559

πŸ§ͺ API Endpoints (Sample)

Method Endpoint Description
POST /api/auth/register Register a new user
POST /api/auth/login Login user & get token
GET /api/courses Fetch all published courses
POST /api/courses Add a new course (Admin)
POST /api/payment/create-checkout-session Create Stripe checkout session

πŸ“Š Project Status

  • βœ… Backend Completed
  • βœ… Frontend Completed
  • ⚑ Currently adding new features and improving UI

🌍 Deployment Links

πŸ™ Thank You

Thank you for your time ✨ If you liked this project, don’t forget to ⭐ the repo!

About

πŸš€ A full-stack MERN application that serves as a learning platform where users can explore, manage, and access educational content with a seamless experience. Built with React, Redux, TailwindCSS, Shadcn/UI, Node.js, Express, and MongoDB, it integrates Stripe for payments and Cloudinary for media management.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages