🚀 Levelify - Learn Better, Grow Smarter.

Note

🚀 Looking for your first open-source contribution?

▶️ Check the Issues tab for good first issue labels and start contributing today!

🚀 Levelify - Learn Better, Grow Smarter.

🔷 AI-Powered Learning & Career Growth Platform 🔷

A modern productivity & learning ecosystem built to help students and developers track progress, master DSA, organize resources, improve consistency, and grow with AI-powered guidance.

🌐 Live Demo

🚀 Live Demo
💻 GitHub Repository

✨ About Levelify

Levelify is an AI-powered smart learning and career growth platform designed to help students and developers stay consistent, organized, and placement-ready.

Instead of managing learning across multiple platforms, Levelify combines:

📚 Learning Roadmaps
💻 DSA Tracking
🔥 Coding Streaks
📝 Smart Notes
🔗 Resource Management
📈 Analytics
🏆 Certification Tracking
🤖 AI Learning Assistant

all in one seamless and beautiful experience.

The platform is built with a modern SaaS-inspired UI, smooth interactions, glassmorphism design, and scalable frontend architecture.

🎯 Why Levelify?

Students often switch between multiple platforms for notes, coding practice, roadmaps, certifications, and learning resources. This makes learning fragmented and difficult to manage.

Levelify brings everything together into a single AI-powered platform that helps learners stay organized, consistent, and placement-ready.

📱 Features (10 Modules)

Module	Description
🏠 Dashboard	Stats overview, DSA breakdown, weekly progress chart, quick access
🗺️ Roadmap Planner	5 roadmaps (Frontend, Backend, DSA, System Design, Interview Prep) with progress tracking
💻 DSA Tracker	Log solved problems, filter by difficulty/topic, mark for revision
🔥 Streak Tracker	GitHub-style heatmap, current & longest streak
🏆 Certifications	Track certifications, progress bars, deadline management
⏱️ Study Timer	Pomodoro, Deep Work, Break modes with session history
📈 Analytics	Recharts-powered charts — DSA topics, difficulty, weekly sessions
📝 Smart Notes	Glassmorphism note cards, pin, favorite, tags, color-coded categories
🔗 Resource Manager	Save & organize learning links by category, bookmark, mark visited
🤖 AI Assistant	Chat-based learning guidance with smart mock responses

🖼️ Screenshots

🔐 Login Page

📝 Register Page

🏠 Dashboard

🗺️ Roadmap Planner

💻 DSA Tracker

📈 Analytics Dashboard

📝 Smart Notes

🔗 Resource Manager

🤖 AI Assistant

🚀 Quick Start

# 1. Install dependencies
npm install

# 2. Start development server
npm run dev

# 3. Open http://localhost:5173

# Demo credentials
Email:    demo@levelify.app
Password: demo123

📦 Build & Deploy

# Build for production
npm run build

# Preview production build locally
npm run preview

# Deploy to Vercel
npx vercel --prod

📁 Project Structure

Levelify/
│── dist/
│── node_modules/
│── public/
│
│── screenshots/
│
│── src/
│   ├── assets/
│   │
│   ├── components/
│   │   ├── layout/
│   │   └── ui/
│   │
│   ├── pages/
│   │   ├── LoginPage.jsx
│   │   ├── RegisterPage.jsx
│   │   ├── DashboardPage.jsx
│   │   ├── RoadmapPage.jsx
│   │   ├── DSATrackerPage.jsx
│   │   ├── AnalyticsPage.jsx
│   │   ├── NotesPage.jsx
│   │   ├── ResourcesPage.jsx
│   │   └── AIAssistantPage.jsx
│   │
│   ├── services/
│   ├── hooks/
│   ├── store/
│   ├── routes/
│   ├── constants/
│   ├── data/
│   ├── utils/
│   │
│   ├── App.jsx
│   └── main.jsx
│
│── README.md
│── package.json
│── vite.config.js
│── vercel.json

🎨 Design System

Font: Plus Jakarta Sans (headings/body) + JetBrains Mono (code)
Colors: Primary indigo/violet scale + semantic colors
Dark mode: Tailwind dark: prefix, toggled via class on <html>
Glass cards: bg-white/70 dark:bg-white/5 backdrop-blur-md
Animations: Framer Motion — page transitions, stagger, hover lifts

⚡ Performance

All pages lazy-loaded with React.lazy()
Zustand selector subscriptions (no wasted renders)
useDebounce(400ms) on all search inputs
useMemo on filtered/sorted lists
Tailwind CSS purging — only used classes in bundle
Target bundle: < 200KB initial JS (gzipped)
Manual chunk splitting: react-vendor | motion | charts | store

🏗️ Architecture

User
   │
   ▼
React UI
   │
   ▼
React Router
   │
   ▼
Zustand Store
   │
   ▼
Services Layer
   │
   ▼
Future Backend API
   │
   ▼
Database

🔌 Backend Integration Checklist

When handing off to backend developer, implement these endpoints:

Service	Endpoints
Auth	`POST /auth/login` `POST /auth/register` `GET /auth/me` `POST /auth/logout`
DSA	`GET/POST/PUT/DELETE /dsa/problems`
Roadmap	`GET /roadmaps` `PUT /roadmaps/:id/node/:nodeId`
Notes	`GET/POST/PUT/DELETE /notes`
Resources	`GET/POST/PUT/DELETE /resources`
Certs	`GET/POST/PUT/DELETE /certifications`
Streak	`GET /streak` `POST /streak/log`
Timer	`POST /sessions` `GET /sessions/analytics`
AI	`POST /ai/chat` `GET /ai/suggestions`

🚢 Vercel Deployment

Push to GitHub
Import project in Vercel
Framework preset: Vite
Build command: npm run build
Output directory: dist

The vercel.json in the root handles SPA routing automatically.

🛠️ Tech Stack

Package	Version	Purpose
react	18.x	UI framework
vite	5.x	Build tool
tailwindcss	3.x	Styling
framer-motion	11.x	Animations
zustand	4.x	State management
react-router-dom	6.x	Routing
recharts	2.x	Charts
lucide-react	0.344	Icons
date-fns	3.x	Date utilities
sonner	1.x	Toast notifications
react-hook-form	7.x	Form handling

🔮 Future Improvements

Future Feature	Description
🎙️ Voice Learning Assistant	Audio guidance for study & productivity
📰 Tech & Placement News	Latest placement, hiring & technology news
🤝 Collaboration Features	Study groups & peer learning
🧠 Smarter AI Assistant	Personalized roadmap recommendations
📅 Smart Scheduling	AI-powered study planning
📊 Advanced Analytics	Better productivity & learning insights

🤝 Contributing

Contributions, suggestions, and ideas are welcome.

If you'd like to contribute:

1. Fork repository

2. Create branch

git checkout -b feature-name

3. Commit changes

git commit -m "Added new feature"

4. Push branch

git push origin feature-name

5. Open Pull Request 🚀

👩‍💻 Author

Manvi Raj

Passionate about building smart, scalable, and impactful digital experiences through modern frontend development.

🌐 Let's Connect

💼 LinkedIn
✍️ Medium
💻 GitHub
🚀 Live Demo

💡 Open to collaboration, frontend opportunities, and impactful projects.

⭐ Feedback & Support

If you found Levelify useful:

⭐ Star the repository
📝 Share feedback or suggestions
🐛 Report bugs or improvements via issues

Your support helps improve the project.

Made with ❤️ by Manvi Raj

Name		Name	Last commit message	Last commit date
.github		.github
public		public
screenshots		screenshots
src		src
.env.example		.env.example
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
vercel.json		vercel.json
vite.config.js		vite.config.js

Latest commit

History

Folders and files

Repository files navigation

🚀 Looking for your first open-source contribution?

🚀 Levelify - Learn Better, Grow Smarter.

🔷 AI-Powered Learning & Career Growth Platform 🔷

🌐 Live Demo

✨ About Levelify

🎯 Why Levelify?

📱 Features (10 Modules)

🖼️ Screenshots

🔐 Login Page

📝 Register Page

🏠 Dashboard

🗺️ Roadmap Planner

💻 DSA Tracker

📈 Analytics Dashboard

📝 Smart Notes

🔗 Resource Manager

🤖 AI Assistant

🚀 Quick Start

📦 Build & Deploy

📁 Project Structure

🎨 Design System

⚡ Performance

🏗️ Architecture

🔌 Backend Integration Checklist

🚢 Vercel Deployment

🛠️ Tech Stack

🔮 Future Improvements

🤝 Contributing

1. Fork repository

2. Create branch

3. Commit changes

4. Push branch

5. Open Pull Request 🚀

👩‍💻 Author

Manvi Raj

🌐 Let's Connect

⭐ Feedback & Support

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages