AI Learning Tracker

A modern, gamified Next.js dashboard that turns your 4 AI mastery markdown files into an interactive progress tracker.

This project is fully populated out of the box with roadmap phases, track tasks, tools, courses, achievements, and model rankings, so users can start immediately without building content from scratch.

Why this project

• Learn AI with a structured roadmap instead of random tutorials.
• Track progress with XP, levels, streaks, and weekly focus.
• Stay local-first with no required login.

What you'll find inside

• Complete learning system: Setup checklist, 40-week main roadmap, and 12-week Image/Video/Audio specialization tracks.
• Built-in resources: Curated tools inventory, course library, gamification engine (XP/levels/badges), and optional Supabase sync.
• Live rankings module: AI model rankings with category/source controls and refresh support.
• Beginner-friendly setup: Run locally in minutes, then deploy to Vercel with minimal configuration.

Project structure at a glance

• app/ — Pages and routes (dashboard, setup, roadmap, tracks, rankings, settings, API endpoints)
• components/ — UI building blocks (topbar, cards, tabs, navigation, interactive widgets)
• lib/data/ — Core learning content (phases, tasks, tools, courses, badges)
• lib/store.ts and lib/xp-engine.ts — Progress state, XP logic, and gamification behavior
• README.md + CONTRIBUTING.md + SECURITY.md — Usage, contribution, and security guidance

Public demo

• 

Screenshots

Dashboard — click to view full size

More screenshots (click to expand)

Features

• Pre-Flight Setup — Interactive checklist for browser workspace/profile, dedicated email, accounts, and software installs
• Main Roadmap — All 40 weeks of AI_Mastery_Roadmap.md as expandable phases
• Image / Video / Audio Tracks — 12-week parallel specialization tracks with JSON prompting tips
• Tools Inventory — Filterable catalog of 70+ tools with install status
• Courses Library — All courses filtered by track, phase, cost
• Achievements — 26 badges across 4 rarities + 10-level XP progression
• Gamification — XP per task, level-up with custom titles ("Curious Beginner" → "Elite AI Operator"), daily streak fire, weekly capstone bonuses
• Local-first — Works instantly via localStorage. Export/import JSON anytime
• Cloud sync (optional) — Plug in Supabase env vars for cross-device sync via auth

No-login by default

• Users can start immediately without accounts.
• Progress is saved per-browser using localStorage.
• Export/import is available for backups.

Quick start (local)

npm install
npm run dev

Open http://localhost:3000. Progress auto-saves to your browser's localStorage.

Easy commands (Windows + Linux)

npm run setup
npm run dev

Or use one command to install + run locally:

npm run local

If you ever get a stale Next.js chunk error like Cannot find module './276.js', run:

npm run dev:clean

For a pre-publish check:

npm run check

Enable Supabase cross-device sync (optional but recommended)

1. Create a free Supabase project

• Go to https://supabase.com → New Project (free tier: 500 MB DB, unlimited auth)
• Copy your Project URL and anon public key from Project Settings → API

2. Set up the database

In the Supabase SQL editor, run:

create table if not exists public.user_progress (
  user_id uuid primary key references auth.users on delete cascade,
  data jsonb not null,
  updated_at timestamptz not null default now()
);

alter table public.user_progress enable row level security;

create policy "Users read own progress"
  on public.user_progress for select
  using (auth.uid() = user_id);

create policy "Users upsert own progress"
  on public.user_progress for insert
  with check (auth.uid() = user_id);

create policy "Users update own progress"
  on public.user_progress for update
  using (auth.uid() = user_id);

3. Configure env vars

Copy .env.local.example to .env.local and fill in:

NEXT_PUBLIC_SUPABASE_URL=https://YOUR-PROJECT.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGc...
NEXT_PUBLIC_GITHUB_REPO_URL=https://github.com/YOUR_USERNAME/ai-learning-tracker

Restart npm run dev.

Tech Stack

• Next.js 16 (App Router, Turbopack) + TypeScript
• React 19
• TailwindCSS + shadcn/ui patterns + Lucide icons
• Framer Motion for animations
• Zustand + localStorage persistence
• Supabase (optional) for auth + sync
• Sonner for toasts

File structure

project-root/
├── app/
│   ├── layout.tsx           # Root with sidebar, topbar, providers
│   ├── page.tsx             # Dashboard
│   ├── setup/page.tsx       # Pre-flight checklist
│   ├── roadmap/page.tsx     # Main 40-week roadmap
│   ├── image/page.tsx       # Image track
│   ├── video/page.tsx       # Video track
│   ├── audio/page.tsx       # Audio track
│   ├── tools/page.tsx       # Tools inventory
│   ├── courses/page.tsx     # Courses library
│   ├── achievements/page.tsx # Badges + levels
│   ├── settings/page.tsx    # Export/import/reset
│   └── track-page.tsx       # Shared track template
├── components/
│   ├── ui/                  # Button, Card, Badge, Progress, Tabs, Dialog, etc.
│   ├── sidebar.tsx
│   ├── topbar.tsx
│   ├── mobile-nav.tsx
│   ├── task-item.tsx        # Task with status/notes/XP
│   ├── xp-ring.tsx          # Animated circular XP progress
│   ├── theme-provider.tsx
│   └── hydration-guard.tsx
└── lib/
    ├── store.ts             # Zustand store with persist
    ├── xp-engine.ts         # Levels + XP values
    ├── supabase.ts          # Supabase client (optional)
    ├── utils.ts
    └── data/
        ├── types.ts
        ├── phases.ts        # 7 phases
        ├── plan.ts          # 40 weeks + 12 weeks * 3 tracks
        ├── setup.ts         # Pre-flight items
        ├── tools.ts         # 70+ tools
        ├── courses.ts       # ~30 courses
        └── badges.ts        # 26 badges

Adding more content

All content lives in lib/data/*.ts as plain TypeScript arrays. Add tasks, tools, or courses by editing those files. No CMS needed.

Backup

Go to Settings → Export JSON. Save the file. Re-import anytime.

Contributing

Please read CONTRIBUTING.md before opening a PR.

Security

Please read SECURITY.md for vulnerability reporting.

License

MIT — see LICENSE.