DevLearn — Developer Learning Platform

A full-stack AI-powered coding education platform where students learn through structured lessons, build real projects, and get instant AI code evaluation with detailed feedback.

🚀 Live Demo

Frontend: https://dev-learn-nine.vercel.app (Vercel)
Backend: https://devlearn-production.up.railway.app (Railway)
GitHub: https://github.com/ManojThamke/DevLearn

📸 Screenshots

Landing Page	Course Detail	Lesson Page
Dark hero with animations	Module accordion with progress	Dark mode with sidebar

Dashboard	Profile Page	Submit Project
Progress rings and stats	Avatar upload, edit profile	GitHub URL and ZIP upload

✨ Features

📚 Courses & Content

5 Complete Courses: React, JavaScript Advanced, Node.js, TypeScript, Next.js
23 Modules with structured learning paths
88 Detailed Lessons with code examples and best practices
28 Real-World Projects for hands-on practice
Markdown lesson content with syntax highlighted code blocks

🎓 Learning

Structured courses with modules and lessons
Reading progress bar as you scroll
Mark lessons as complete and track progress
Dark mode lesson viewer
Previous / Next lesson navigation
Mobile responsive sidebar

🚀 Projects

Submit projects via GitHub URL
Submit projects via ZIP file upload (up to 100MB)
AI evaluation of submitted code (Gemini powered)
Track all submissions with attempt history

🏆 Achievements

Badge System - Earn badges for completing courses and milestones
Certificates - Generate certificates upon course completion
XP Points - Gain experience points for completed lessons and projects

🤖 AI

AI assistant powered by Google Gemini API
Ask questions about React, JavaScript, Node.js, TypeScript, Next.js
Get code reviews and interview prep help
Quick prompt suggestions for common questions

👤 User

Register and login with JWT authentication
Edit profile name and email
Choose from 8 default emoji avatars
Upload custom avatar image
Set avatar via image URL
Change password with strength meter
View learning stats and XP points

📊 Dashboard

Enrolled courses with progress bars
Lessons completed counter
Animated progress rings per course
Quick action buttons
Achievement badges and certificates

🛠️ Tech Stack

Frontend

Technology	Purpose
React.js + Vite	UI framework
TailwindCSS	Styling
Framer Motion	Animations
React Router v6	Navigation
Axios	HTTP requests

Backend

Technology	Purpose
Node.js + Express	Server framework
MongoDB Atlas	Database
Mongoose	ODM
JWT	Authentication
bcryptjs	Password hashing
Multer	File uploads
Bull	Job queue
Redis	Caching & queue

AI & External Services

Technology	Purpose
Google Gemini API	AI assistant + code evaluation
Docker	Container support for code evaluation
GitHub API	Repository access for submissions
MongoDB Atlas	Cloud database

Development Tools

Technology	Purpose
dotenv	Environment variables
CORS	Cross-origin requests
Morgan	Request logging

📁 Project Structure

DevLearn/
├── client/                    # React frontend
│   └── src/
│       ├── components/
│       │   ├── common/
│       │   │   ├── AIAssistant.jsx
│       │   │   └── Spinner.jsx
│       │   └── layout/
│       │       ├── Navbar.jsx
│       │       └── Footer.jsx
│       ├── context/
│       │   └── AuthContext.jsx
│       ├── pages/
│       │   ├── LandingPage.jsx
│       │   ├── LoginPage.jsx
│       │   ├── RegisterPage.jsx
│       │   ├── CourseCatalog.jsx
│       │   ├── CourseDetail.jsx
│       │   ├── LessonPage.jsx
│       │   ├── Dashboard.jsx
│       │   ├── ProfilePage.jsx
│       │   ├── ProjectSubmitPage.jsx
│       │   └── NotFound.jsx
│       └── services/
│           └── api.js
│
└── server/                    # Node.js backend
    ├── controllers/
    │   ├── auth.controller.js
    │   ├── course.controller.js
    │   ├── lesson.controller.js
    │   ├── progress.controller.js
    │   ├── profile.controller.js
    │   ├── submission.controller.js
    │   ├── project.controller.js
    │   ├── badge.controller.js
    │   ├── certificate.controller.js
    │   └── ai.controller.js
    ├── models/
    │   ├── User.model.js
    │   ├── Course.model.js
    │   ├── Module.model.js
    │   ├── Lesson.model.js
    │   ├── Project.model.js
    │   ├── Submission.model.js
    │   ├── Score.model.js
    │   ├── Progress.model.js
    │   ├── Enrollment.model.js
    │   ├── Badge.model.js
    │   ├── UserBadge.model.js
    │   └── Certificate.model.js
    ├── routes/
    │   ├── auth.routes.js
    │   ├── course.routes.js
    │   ├── lesson.routes.js
    │   ├── progress.routes.js
    │   ├── profile.routes.js
    │   ├── submission.routes.js
    │   ├── project.routes.js
    │   ├── badge.routes.js
    │   ├── certificate.routes.js
    │   └── ai.routes.js
    ├── middleware/
    │   ├── auth.middleware.js
    │   └── upload.middleware.js
    ├── services/
    │   ├── ai.service.js
    │   ├── evaluation.service.js
    │   ├── github.service.js
    │   └── docker.service.js
    ├── data/
    │   ├── module1-8.lessons.js (React course)
    │   ├── nodejs-module1-3.lessons.js
    │   ├── js-adv-module1-4.lessons.js
    │   ├── ts-modules.lessons.js
    │   ├── nextjs-modules.lessons.js
    │   └── badgeDefinitions.js
    ├── seed.js
    ├── seed-*.js (individual course seeders)
    └── index.js

⚙️ Setup & Installation

Prerequisites

Node.js v18+
MongoDB Atlas account
Google Gemini API key (free at aistudio.google.com)

1. Clone the repository

git clone https://github.com/ManojThamke/DevLearn.git
cd DevLearn

2. Setup Backend

cd server
npm install

Create server/.env:

PORT=5000
MONGO_URI=your_mongodb_atlas_connection_string
JWT_SECRET=your_jwt_secret_key
JWT_REFRESH_SECRET=your_jwt_refresh_secret
CLIENT_URL=http://localhost:5173
GEMINI_API_KEY=your_gemini_api_key
NODE_ENV=development

Seed the database:

node seed.js

Start the server:

node --watch index.js

3. Setup Frontend

cd client
npm install
npm run dev

4. Open in browser

http://localhost:5173

🌐 Production Deployment

DevLearn is deployed using free-tier services:

Frontend: Vercel (https://dev-learn-nine.vercel.app)
Backend: Railway (https://devlearn-production.up.railway.app)
Database: MongoDB Atlas Free Tier (5GB shared cluster)
Cache: Railway Redis Add-on

Deployment Setup Files

vercel.json - Vercel build configuration
server/Procfile - Railway start command
server/.env.example - Environment variables template

Production Environment Variables

MongoDB Atlas:

Create free cluster on https://www.mongodb.com/cloud/atlas
Get connection string: MONGO_URI=mongodb+srv://user:password@cluster.mongodb.net/devlearn

Railway:

Create account at https://railway.app
Connect GitHub repository
Set CLIENT_URL=https://dev-learn-nine.vercel.app (your Vercel URL)
Redis automatically added as add-on

Vercel:

Create account at https://vercel.com
Connect GitHub repository
Set VITE_API_URL=https://devlearn-production.up.railway.app/api

🗺️ API Routes

Auth

POST   /api/auth/register
POST   /api/auth/login
POST   /api/auth/logout
GET    /api/auth/me

Courses

GET    /api/courses
GET    /api/courses/:slug
GET    /api/courses/id/:id
POST   /api/courses/:id/enroll

Lessons

GET    /api/lessons/:id
POST   /api/lessons/:id/complete

Progress

GET    /api/progress
GET    /api/progress/:courseId

Profile

GET    /api/profile
PUT    /api/profile/update
PUT    /api/profile/change-password
PUT    /api/profile/avatar

Submissions

POST   /api/submissions
POST   /api/submissions/upload-zip
GET    /api/submissions/my
GET    /api/submissions/project/:projectId
GET    /api/submissions/:id

Projects

GET    /api/projects/:id
GET    /api/projects/module/:moduleId

Badges

GET    /api/badges
GET    /api/user/badges
POST   /api/badges/:id/award

Certificates

GET    /api/certificates
GET    /api/certificates/:id
POST   /api/certificates/generate/:courseId

AI

POST   /api/ai/chat
POST   /api/ai/evaluate

📊 Current Database Content

Metric	Count
Courses	5
Modules	23
Lessons	88
Projects	28
Badges	8+
Total Learning Hours	100+

Courses Available

React Developer Complete Course - 8 modules, 32 lessons, 10 projects
JavaScript Advanced Concepts - 4 modules, 16 lessons, 4 projects
Node.js Backend Developer Complete Course - 3 modules, 12 lessons, 3 projects
TypeScript Mastery - 3 modules, 12 lessons, 3 projects
Next.js Full Stack Development - 3 modules, 16 lessons, 8 projects

👨‍💻 Author

Manoj Thamke

GitHub: @ManojThamke

📄 License

MIT License — feel free to use this project for learning and personal projects.

Name		Name	Last commit message	Last commit date
Latest commit History 17 Commits
ScreenShots		ScreenShots
client		client
server		server
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
plan		plan
vercel.json		vercel.json

Folders and files

Latest commit

History

Repository files navigation

DevLearn — Developer Learning Platform

🚀 Live Demo

📸 Screenshots

✨ Features

📚 Courses & Content

🎓 Learning

🚀 Projects

🏆 Achievements

🤖 AI

👤 User

📊 Dashboard

🛠️ Tech Stack

Frontend

Backend

AI & External Services

Development Tools

📁 Project Structure

⚙️ Setup & Installation

Prerequisites

1. Clone the repository

2. Setup Backend

3. Setup Frontend

4. Open in browser

🌐 Production Deployment

Deployment Setup Files

Production Environment Variables

🗺️ API Routes

Auth

Courses

Lessons

Progress

Profile

Submissions

Projects

Badges

Certificates

AI

📊 Current Database Content

Courses Available

👨‍💻 Author

📄 License

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages