A comprehensive online learning platform built with React, TypeScript, Node.js, and MongoDB. Coursell provides a modern, scalable solution for course creation, management, and learning.
- Browse Courses: Discover courses across multiple categories
- Course Details: View comprehensive course information with ratings and reviews
- Purchase System: Secure course enrollment with payment processing
- Learning Dashboard: Track progress and access purchased courses
- User Profiles: Manage personal information and learning preferences
- Responsive Design: Seamless experience across all devices
- Course Management: Create, edit, and delete courses with rich content
- Video Management: Add, organize, and manage course videos
- Admin Dashboard: Comprehensive analytics and course overview
- User Management: Monitor student enrollments and progress
- Content Publishing: Control course visibility and publication status
- Modern UI/UX: Built with Chakra UI for consistent, beautiful design
- TypeScript: Full type safety across the entire application
- Responsive Design: Mobile-first approach with excellent cross-device compatibility
- Authentication: Secure JWT-based authentication for users and admins
- API Security: Rate limiting, input validation, and security headers
- Database: MongoDB with Mongoose for flexible data modeling
- Real-time Updates: Toast notifications and loading states
- React 18 - Modern React with hooks and functional components
- TypeScript - Type-safe development
- Chakra UI - Component library for consistent design
- React Router - Client-side routing
- Axios - HTTP client for API communication
- React Hot Toast - Toast notifications
- React Icons - Icon library
- Vite - Fast build tool and development server
- Node.js - JavaScript runtime
- Express.js - Web framework
- MongoDB - NoSQL database
- Mongoose - MongoDB object modeling
- JWT - JSON Web Tokens for authentication
- bcrypt - Password hashing
- Helmet - Security headers
- Morgan - HTTP request logger
- Winston - Logging
- Express Rate Limit - Rate limiting
- CORS - Cross-origin resource sharing
coursell/
├── coursell-be/ # Backend API
│ ├── models/ # Database models
│ ├── routes/ # API routes
│ ├── middleware/ # Custom middleware
│ ├── validators/ # Input validation
│ ├── index.js # Server entry point
│ └── package.json
├── coursell-fe/ # Frontend application
│ └── course-frontend/
│ ├── src/
│ │ ├── components/ # Reusable components
│ │ ├── pages/ # Page components
│ │ ├── context/ # React context
│ │ ├── services/ # API services
│ │ ├── styles/ # Global styles
│ │ ├── theme.ts # Chakra UI theme
│ │ └── App.tsx # Main app component
│ ├── public/ # Static assets
│ └── package.json
└── README.md
- Node.js (v16 or higher)
- MongoDB (v4.4 or higher)
- npm or yarn
-
Clone the repository
git clone <repository-url> cd coursell
-
Install backend dependencies
cd coursell-be npm install -
Install frontend dependencies
cd ../coursell-fe/course-frontend npm install -
Environment Setup
Create a
.envfile in thecoursell-bedirectory:MONGO_URL=mongodb://localhost:27017/coursell JWT_SECRET=your-super-secret-jwt-key PORT=3000 FRONTEND_URL=http://localhost:5173 NODE_ENV=development
-
Start MongoDB
# Make sure MongoDB is running on your system mongod -
Start the backend server
cd coursell-be npm run dev -
Start the frontend development server
cd coursell-fe/course-frontend npm run dev -
Access the application
- Frontend: http://localhost:5173
- Backend API: http://localhost:3000
POST /api/user/signup- User registrationPOST /api/user/signin- User loginPOST /api/admin/signin- Admin login
GET /api/courses/preview- Get published coursesGET /api/courses/:id- Get course detailsPOST /api/courses/purchase- Purchase a courseGET /api/courses/:id/purchase- Check purchase status
GET /api/admin/courses- Get all courses (admin)POST /api/admin/course- Create coursePUT /api/admin/course- Update courseDELETE /api/admin/course/:id- Delete course
GET /api/user/purchases- Get user's purchased coursesPUT /api/user/profile- Update user profile
The application uses a comprehensive design system built with Chakra UI:
- Primary: Purple (#6366f1)
- Accent: Yellow (#f59e0b)
- Success: Green (#22c55e)
- Error: Red (#ef4444)
- Font Family: Inter
- Headings: Bold with tight letter spacing
- Body: Regular weight with good line height
- Buttons: Multiple variants (solid, outline, ghost, accent)
- Cards: Rounded corners with hover effects
- Forms: Consistent styling with validation states
- Badges: Color-coded for different purposes
- JWT Authentication: Secure token-based authentication
- Password Hashing: bcrypt for password security
- Input Validation: Comprehensive validation on all inputs
- Rate Limiting: Protection against brute force attacks
- CORS Configuration: Secure cross-origin requests
- Security Headers: Helmet.js for additional security
- Environment Variables: Sensitive data protection
cd coursell-be
npm testcd coursell-fe/course-frontend
npm test- Set up environment variables for production
- Build the application:
npm run build - Start the server:
npm start
- Build the application:
npm run build - Deploy the
distfolder to your hosting service
- Fork the repository
- Create a feature branch:
git checkout -b feature-name - Commit your changes:
git commit -am 'Add feature' - Push to the branch:
git push origin feature-name - Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
For support and questions:
- Email: hello@coursell.com
- Documentation: docs.coursell.com
- Issues: GitHub Issues
- Chakra UI for the excellent component library
- React team for the amazing framework
- MongoDB for the flexible database solution
- All contributors who helped build this platform
Made with ❤️ by the Coursell team