Transform your study sessions with AI-generated study plans, gamified learning, XP rewards, and progress tracking.
🏆 Built as a hackathon project
StudyBuddy takes your syllabus or lecture notes and generates a personalized, gamified study plan in seconds:
- AI Breaks Down Your Content → Units, tasks, and quizzes are auto-generated from your input
- Earn XP & Level Up → Every task completed awards XP; accumulate enough to level up
- Build Streaks → Study daily to maintain streaks and earn bonus XP
- Take Quizzes → Pass unit quizzes to unlock the next topic
- Track Progress → Live sidebar shows your level, streak, time studied, and course completion
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS v4 |
| UI | shadcn/ui (Radix UI primitives) |
| Icons | Lucide React |
| Fonts | Geist (via next/font) |
| Deployment | Vercel |
StudyBuddy/
├── app/
│ ├── globals.css # Design tokens (colours, animations)
│ ├── layout.tsx # Root layout + fonts + metadata
│ └── page.tsx # Landing page
│
├── components/
│ ├── study-arena/
│ │ ├── header.tsx # Sticky nav with level + streak
│ │ ├── input-form.tsx # Syllabus input + file upload
│ │ ├── study-dashboard.tsx # Main study screen (state lives here)
│ │ ├── unit-card.tsx # Collapsible unit with tasks
│ │ ├── task-item.tsx # Individual study task row
│ │ ├── sidebar-stats.tsx # XP, streak, progress sidebar
│ │ └── quiz-modal.tsx # Multiple-choice quiz dialog
│ └── ui/ # Base UI components (shadcn/ui)
│
└── lib/
├── utils.ts # cn() class merging helper
├── study-types.ts # TypeScript types for all data structures
└── sample-data.ts # Demo study plan + XP level calculations
- Node.js v18 or higher
- npm (comes with Node.js)
# 1. Clone the repo
git clone https://github.com/Sarim78/studybuddy.git
cd studybuddy
# 2. Install dependencies
npm install
# 3. Start the development server
npm run dev
# 4. Open in your browser
http://localhost:3000npm run build
npm startAll dependencies are installed automatically via npm install. Key packages:
| Package | Purpose |
|---|---|
next |
React framework (App Router) |
tailwindcss + @tailwindcss/postcss |
Styling |
lucide-react |
Icons |
@radix-ui/* |
Accessible UI primitives |
class-variance-authority |
Component variants |
clsx + tailwind-merge |
Class name utilities |
- Landing page — paste in a topic or click Generate with sample content
- Loading screen — watch the AI "analyze" steps tick by
- Study dashboard — check off tasks, see XP animate in the header
- Take a quiz — click any quiz task to open the modal
- Pass the quiz — watch the next unit unlock and the level-up overlay fire
- Real AI integration (Claude API) for dynamic study plan generation
- Persistent user accounts + progress storage
- Mobile app (React Native)
- Multiplayer study rooms / leaderboards
- Spaced repetition scheduling
| Name | Role |
|---|---|
| Sarim Siddiqui | Developer |
| Anas Jamal | Developer |
Built for the hackathon: StudyBuddy team 🚀