• Overview
• Features
• Tech Stack
• Project Structure
• Database Schema
• Getting Started
• Environment Variables
• API Routes
• Pages & Routes
• Contributing

CodeBox 2.0 is a modern, full-stack learning management system (LMS) built with Next.js 16 that empowers developers to learn coding through interactive courses, chapter-based exercises, and hands-on projects. The platform features a gamified experience with XP-based progression, real-time code playgrounds powered by Sandpack, and a beautiful UI built with the latest web technologies.

✨ Interactive Learning - Chapter-based courses with embedded code playgrounds
🎮 Gamification - XP points, progress tracking, and achievement system
🔐 Secure Authentication - Email-based authentication powered by Clerk
📊 Progress Dashboard - Track enrolled courses, completed exercises, and earned XP
🎨 Modern UI - Beautiful neobrutalism design with Tailwind CSS v4 and shadcn/ui
⚡ High Performance - Built with Next.js 16 App Router and React 19
💾 Scalable Database - Neon Postgres with Drizzle ORM for type-safe queries

• Curated Courses - Browse and enroll in structured programming courses
• Chapter-Based Learning - Progress through organized chapters with exercises
• Interactive Code Playground - Practice coding with Sandpack-powered editors
• Exercise Completion Tracking - Mark exercises as complete and earn XP
• Multi-Level Courses - Courses tagged by difficulty (Beginner, Intermediate, Advanced)
• Real-Time Progress - Visual progress indicators for each course

• User Dashboard - Personalized dashboard with enrolled courses and stats
• Profile Management - Track total XP, completed exercises, and achievements
• Course Enrollment - One-click enrollment in courses
• Subscription System - Upgrade to Pro for premium features
• Invite Friends - Share the platform with fellow learners

• Dark/Light Mode - Theme toggle with next-themes
• Responsive Design - Mobile-first, works on all devices
• Loading States - Skeleton loaders for smooth UX
• Toast Notifications - Real-time feedback with Sonner
• Animations - Smooth transitions with Motion (Framer Motion)
• Click Effects - Interactive click spark animations

• Type-Safe API - Full TypeScript support across the stack
• Form Validation - React Hook Form with Zod validation
• Code Splitting - Automatic route-based code splitting
• SEO Optimized - Dynamic meta tags and sitemap generation
• Admin Tools - Seeding routes for courses and exercises

• Framework: Next.js 16.1 (App Router)
• UI Library: React 19.2
• Language: TypeScript 5
• Styling: Tailwind CSS v4 with @tailwindcss/typography
• Components: shadcn/ui (Radix UI primitives)
• Icons: Lucide React
• Animations: Motion (Framer Motion v12)
• Theme: next-themes for dark mode
• Fonts: Geist Sans, Geist Mono, Jersey 10, Inter

• Authentication: Clerk (@clerk/nextjs)
• Database: Neon Postgres (@neondatabase/serverless)
• ORM: Drizzle ORM with drizzle-kit
• API: Next.js API Routes (Route Handlers)
• Runtime: Node.js

• Code Playground: Sandpack (@codesandbox/sandpack-react)
• Form Management: React Hook Form
• Validation: Zod v4
• HTTP Client: Axios
• Date Utilities: date-fns
• UI Components:
  • Accordion, Alert Dialog, Avatar, Badge, Button
  • Calendar, Card, Carousel, Chart, Checkbox
  • Dialog, Drawer, Dropdown, Form, Input
  • Popover, Progress, Radio Group, Select
  • Sidebar, Skeleton, Slider, Switch
  • Tabs, Table, Textarea, Tooltip, and more

codebox/
├── app/                          # Next.js App Router
│   ├── globals.css              # Global styles and Tailwind directives
│   ├── layout.tsx               # Root layout with Clerk and theme providers
│   ├── page.tsx                 # Home page with hero and course list
│   ├── provider.tsx             # Theme and context providers
│   ├── loading.tsx              # Root loading state
│   ├── not-found.tsx            # 404 page
│   ├── robots.ts                # Robots.txt configuration
│   ├── sitemap.ts               # Sitemap generation
│   │
│   ├── _components/             # Shared page components
│   │   ├── Header.tsx           # Navigation header
│   │   ├── Hero.tsx             # Landing page hero section
│   │   └── ModeToggle.tsx       # Dark/light mode toggle
│   │
│   ├── (auth)/                  # Authentication routes
│   │   ├── sign-in/
│   │   │   └── [[...sign-in]]/
│   │   │       └── page.tsx     # Clerk sign-in page
│   │   └── sign-up/
│   │       └── [[...sign-up]]/
│   │           └── page.tsx     # Clerk sign-up page
│   │
│   ├── (routes)/                # Main application routes
│   │   ├── contactUs/
│   │   │   ├── page.tsx         # Contact form
│   │   │   └── loading.tsx      # Loading state
│   │   │
│   │   ├── courses/
│   │   │   ├── page.tsx         # All courses listing
│   │   │   ├── loading.tsx
│   │   │   ├── _components/
│   │   │   │   └── CourseList.tsx
│   │   │   └── [courseId]/
│   │   │       ├── page.tsx     # Course details
│   │   │       ├── loading.tsx
│   │   │       └── [chapterId]/
│   │   │           └── [exerciseSlug]/
│   │   │               └── page.tsx  # Exercise with code playground
│   │   │
│   │   ├── dashboard/
│   │   │   ├── page.tsx         # User dashboard
│   │   │   ├── loading.tsx
│   │   │   └── _components/
│   │   │       ├── CourseProgressCard.tsx
│   │   │       ├── EnrolledCourses.tsx
│   │   │       ├── ExploreMore.tsx
│   │   │       ├── ExploreMoreCourse.tsx
│   │   │       ├── InviteFriend.tsx
│   │   │       ├── UpgradeToPro.tsx
│   │   │       ├── UserStatus.tsx
│   │   │       └── WelcomeBanner.tsx
│   │   │
│   │   ├── pricing/
│   │   │   ├── page.tsx         # Pricing plans
│   │   │   └── loading.tsx
│   │   │
│   │   └── projects/
│   │       ├── page.tsx         # Projects showcase
│   │       └── loading.tsx
│   │
│   └── api/                     # API Routes (Route Handlers)
│       ├── admin/
│       │   ├── save-chapters/
│       │   │   └── route.ts     # Seed course chapters (dev)
│       │   └── save-exercises/
│       │       └── route.ts     # Seed exercises (dev)
│       │
│       ├── course/
│       │   └── route.ts         # GET courses, POST new course
│       ├── enroll-course/
│       │   └── route.ts         # POST enroll in course
│       ├── exercise/
│       │   ├── route.ts         # GET exercise data
│       │   └── complete/
│       │       └── route.ts     # POST mark exercise complete + XP
│       └── user/
│           └── route.ts         # GET/POST user data sync with Clerk
│
├── components/                   # Reusable components
│   ├── BackButton.tsx           # Navigation back button
│   ├── ClickSpark.tsx           # Click animation effect
│   ├── CountUp.tsx              # Animated number counter
│   ├── cpyPst.tsx               # Copy-paste utility
│   └── ui/                      # shadcn/ui components (40+ components)
│       ├── accordion.tsx
│       ├── alert-dialog.tsx
│       ├── button.tsx
│       ├── card.tsx
│       ├── dialog.tsx
│       ├── form.tsx
│       ├── input.tsx
│       ├── progress.tsx
│       ├── skeleton.tsx
│       ├── tabs.tsx
│       └── ... (and many more)
│
├── config/                       # Configuration files
│   ├── db.ts                    # Drizzle database client setup
│   ├── schema.tsx               # Database schema definitions
│   └── site.ts                  # Site metadata and SEO config
│
├── context/                      # React Context
│   └── UserDetailContext.tsx    # User data context provider
│
├── data/                         # Static data
│   └── courseChapters.js        # Course content seed data
│
├── hooks/                        # Custom React hooks
│   └── use-mobile.ts            # Mobile device detection hook
│
├── lib/                          # Utility functions
│   └── utils.ts                 # cn() and other helpers
│
├── public/                       # Static assets
│   └── diagrams/                # Image assets
│
├── components.json               # shadcn/ui configuration
├── drizzle.config.ts            # Drizzle Kit configuration
├── next.config.ts               # Next.js configuration
├── next-env.d.ts                # Next.js TypeScript declarations
├── package.json                 # Dependencies and scripts
├── postcss.config.mjs           # PostCSS configuration
├── proxy.ts                     # Proxy configuration
├── tsconfig.json                # TypeScript configuration
└── README.md                    # This file

Tables defined in config/schema.tsx:

• users – id, name, email (unique), points, subscription
• courses – courseId (unique), title, desc, bannerImage, level, tags[], editorType
• courseChapters – chapterId, courseId, name, desc, exercises (JSON array)
• enrolledCourse – courseId, userId, enrolledDate, xpEarned
• completedExercises – courseId, chapterId, exerciseId, userId, completedDate
• exercise – courseId, chapterId, exerciseId, exerciseContent (JSON), exerciseName

Base path: /api

• GET /api/course – list all courses
• GET /api/course?courseId=<number> – course by id with chapters, enrollment, completed exercises
• GET /api/course?courseId=enrolled – courses the current user has enrolled in (stats: total vs completed exercises, xp)

• POST /api/enroll-course – body: { courseId: number }; enrolls current Clerk user

• POST /api/exercise – body: { courseId, chapterId, exerciseId }; returns chapter + exercise + editorType
• POST /api/exercise/complete – body: { courseId, chapterId, exerciseId, xpEarned }; records completion and increments XP for enrollment + users.points

• POST /api/user – creates the Clerk user in users table if missing and returns the user

• GET /api/admin/save-chapters and save-exercises contain seed scripts (HTML/CSS/React/Python datasets). Most are commented-out; enable locally if you need to seed dev data. Don’t use in production.

• Node.js 18+
• A Neon Postgres database (or any Postgres reachable via DATABASE_URL)
• Clerk account and app (for auth)

npm install

Create .env.local with at least:

DATABASE_URL=postgres://<user>:<password>@<host>/<db>?sslmode=require

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<your-publishable-key>
CLERK_SECRET_KEY=<your-secret-key>

Notes:

• config/db.ts and drizzle.config.ts read DATABASE_URL.
• Images are served from ik.imagekit.io (see next.config.ts) – adjust if using a different CDN.

Drizzle Kit is configured via drizzle.config.ts.

Optional (if you maintain migrations):

• Generate SQL from schema: npx drizzle-kit generate
• Push schema to DB: npx drizzle-kit push

Alternatively, use the admin seed routes (dev-only) to populate chapter/exercise data after your tables exist.

npm run dev

Build & start:

npm run build
npm run start

• /(routes)/courses – course catalog; /[courseId] detail page with chapters and progress
• /(routes)/dashboard – enrolled courses, XP, progress cards, recommendations
• /(routes)/projects – curated learning projects (UI only)
• /(routes)/pricing – subscription tiers (UI only)
• /(routes)/contactUs – contact form (UI only)
• /(auth)/sign-in, /(auth)/sign-up – Clerk auth flows

• Home (Hero)

  

• Courses Listing

  

• Dashboard (Empty enrolled state)

  

• Contact Us

  

Note: These images reference the assets already present in public/. Replace with real screenshots if desired.

• Uses the App Router and server actions/route handlers (next/server).
• Clerk user identity is the email (user.primaryEmailAddress.emailAddress).
• Course/exercise completion updates both enrollment XP and user points.
• UI components are sourced from shadcn/ui (see components.json aliases).

Defined in package.json:

• npm run dev – start dev server
• npm run build – production build
• npm run start – start production server

• Recommended: Vercel for Next.js
• Ensure environment variables are set in your hosting provider
• Neon Postgres can be used for serverless DB access

1. Fork and create a feature branch
2. Keep changes focused and documented
3. Open a PR with a clear description, screenshots if UI

This project is licensed under the MIT License. See LICENSE if present or add one as needed.

• Dev server fails to start: verify .env.local contains correct DATABASE_URL and Clerk keys.
• Database not updated: run Drizzle generation/push or inspect SQL on Neon.
• Auth issues: ensure Clerk keys and domain are configured; check Clerk app settings for allowed URLs.