ai-learning-app-bfwai

Comprehensive Prompt: Build "30 Days of AI" Learning Platform in Next.js 15

Project Overview

Create a fully-featured interactive AI learning platform called "30 Days of AI" using Next.js 15 with gamification, progress tracking, streaks, and interactive visualizations. This is a client-side only application with all data stored locally.

Tech Stack Requirements

Core Technologies

Framework: Next.js 15 (App Router)
Data Storage: JSON files for lesson content + localStorage for user progress
Styling: Tailwind CSS
UI Components: shadcn/ui
Animations: Framer Motion
State Management: Zustand or React Context
Visualization Libraries:
- D3.js for data visualizations
- React Three Fiber for 3D visualizations
- Recharts for charts and graphs
- Canvas API for custom interactive demos
Deployment: Vercel

Project Structure

/app
  /page.tsx                    # Home/Dashboard with calendar view
  /lesson/[day]/page.tsx       # Individual lesson page
  /achievements/page.tsx       # Achievements page
  /profile/page.tsx            # User profile and stats
  /layout.tsx                  # Root layout with header
  
/components
  /calendar/
    CalendarGrid.tsx           # Calendar view of all 30 days
    DayCard.tsx                # Individual day card
  /lesson/
    LessonHeader.tsx           # Lesson title and progress
    InteractiveDemo.tsx        # Container for interactive visualizations
    QuizSection.tsx            # Quiz component for each lesson
    LessonNavigation.tsx       # Previous/Next lesson navigation
  /visualizations/
    TokenizationDemo.tsx       # Day 1: Tokenization visualization
    VectorEmbeddingDemo.tsx    # Day 2: Vector space visualization
    NeuralNetworkDemo.tsx      # Day 3: Neural network visualization
    [... one component per topic with interactive demo]
  /gamification/
    StreakDisplay.tsx          # Streak counter with fire animation
    XPBar.tsx                  # Experience points progress bar
    AchievementBadge.tsx       # Achievement unlock notification
    LevelUpModal.tsx           # Level up celebration modal
  /ui/
    ProgressBar.tsx
    Badge.tsx
    Tooltip.tsx
    [shadcn/ui components]

/data
  /lessons/
    lessons.json               # All 30 lessons metadata
    /content/
      day-1.json               # Detailed lesson content for day 1
      day-2.json               # Detailed lesson content for day 2
      [... through day-30.json]
  /achievements.json           # All achievements definitions
  /challenges.json             # Daily challenges

/lib
  /stores/
    progressStore.ts           # Zustand store for user progress
    achievementStore.ts        # Zustand store for achievements
  /utils/
    localStorage.ts            # LocalStorage helper functions
    streakCalculator.ts        # Calculate and update streaks
    xpCalculator.ts            # Calculate XP and levels
    achievementChecker.ts      # Check if user unlocked achievements
  /hooks/
    useProgress.ts             # Custom hook for progress management
    useStreak.ts               # Custom hook for streak tracking
    useLessonTimer.ts          # Track time spent on lessons

/types
  lesson.ts                    # TypeScript types for lessons
  progress.ts                  # TypeScript types for user progress
  achievement.ts               # TypeScript types for achievements

Data Structure (JSON Files)

lessons.json Structure

{
  "lessons": [
    {
      "id": 1,
      "title": "Tokenization",
      "description": "Learn how AI breaks text into tokens",
      "category": "fundamentals",
      "icon": "🎯",
      "estimatedTime": 15,
      "xpReward": 100,
      "difficulty": "beginner",
      "prerequisites": [],
      "visualizationType": "tokenization",
      "hasQuiz": true,
      "hasChallenge": true
    }
    // ... 29 more lessons
  ]
}

Individual day-X.json Structure

{
  "dayNumber": 1,
  "title": "Tokenization",
  "sections": [
    {
      "type": "introduction",
      "content": "Markdown content explaining the concept..."
    },
    {
      "type": "interactive-demo",
      "component": "TokenizationDemo",
      "config": { /* demo-specific config */ }
    },
    {
      "type": "key-insights",
      "points": ["insight 1", "insight 2"]
    },
    {
      "type": "quiz",
      "questions": [
        {
          "question": "What is a token?",
          "options": ["A", "B", "C", "D"],
          "correctAnswer": 0,
          "explanation": "..."
        }
      ]
    }
  ],
  "resources": [
    {"title": "Resource 1", "url": "..."}
  ]
}

LocalStorage Schema

interface UserProgress {
  currentDay: number;
  completedDays: number[];
  currentStreak: number;
  longestStreak: number;
  lastCompletedDate: string; // ISO date string
  xpPoints: number;
  level: number;
  completionData: {
    [dayNumber: string]: {
      completedAt: string;
      timeSpent: number; // seconds
      quizScore: number; // percentage
      attempts: number;
    }
  };
  achievements: string[]; // achievement IDs
  bookmarks: number[]; // day numbers
  notes: {
    [dayNumber: string]: string;
  };
  streakFreezes: number; // Number of streak freezes available
  lastStreakFreezeUsed: string; // ISO date string
}

Key Features to Implement

1. Calendar/Dashboard Page

Grid view of all 30 days with color-coded status (locked, in-progress, completed)
Filter tabs by category (Fundamentals, LLMs, Applications, Advanced, Ethics, Practical)
Progress overview with stats: days completed, current streak, XP, level
Streak display with fire emoji animation that grows with streak length
Weekly sections with collapsible headers
Search functionality to find specific topics
Motivational quotes that change based on progress percentage
Quick stats cards: Total XP, Level, Achievements unlocked, Time spent learning

2. Individual Lesson Page

Header section: Title, category badge, estimated time, XP reward, difficulty indicator
Progress indicator: Shows section completion within the lesson (e.g., "3/5 sections completed")
Interactive demo section: Unique visualization for each topic (the main feature)
Theory content: Well-formatted markdown with code syntax highlighting and images
Key insights callout: Highlighted important takeaways in colored boxes
Quiz section: 3-5 multiple choice questions with instant feedback and explanations
Daily challenge: Optional coding/conceptual challenge for bonus XP
Navigation: Previous/Next lesson buttons with keyboard shortcuts
Bookmark button: Save lesson for later review
Notes section: Personal notes that persist in localStorage with rich text editor
Time tracker: Track how long user spends on each lesson, show in stats
Share button: Generate shareable achievement card

3. Gamification System

Streak Tracking

Calculate streak based on consecutive days of completion (1 lesson per day counts)
Streak freeze: User gets 1 freeze per week to maintain streak if they miss a day
Streak milestones: Celebrate at 3 days, 7 days, 14 days, 21 days, 30 days
Animated fire emoji 🔥 that grows bigger with longer streaks
Streak recovery: If broken, show motivation message and start fresh
Streak notifications: Warn user if they haven't completed today's lesson
Calendar heatmap: GitHub-style contribution graph showing completion history

XP and Leveling

XP sources:
- Completing a lesson: 100 XP base
- Perfect quiz score (100%): +50 XP bonus
- Completing daily challenge: +75 XP
- Maintaining streak milestones: +200 XP for each milestone
- First completion of the day: +25 XP bonus
Level progression: Every 500 XP = 1 level up
Level-up animation: Celebration modal with confetti effect and level badge reveal
XP bar: Smooth animated progress bar showing XP progress to next level
Level benefits: Show what unlocks at each level (cosmetic rewards, special badges)

Achievements System

Achievement types:
- Streak-based: "Week Warrior" (7-day), "Marathon Runner" (30-day)
- Completion-based: "First Steps" (day 1), "Halfway Hero" (15 days), "AI Graduate" (all 30)
- Quiz-based: "Perfect Score" (100% on any quiz), "Quiz Master" (100% on 10 quizzes)
- Speed-based: "Speed Learner" (complete lesson under 10 mins), "Lightning Fast" (under 5 mins)
- Category-based: "Fundamentals Expert", "LLM Master", "Ethics Champion"
- Special: "Night Owl" (complete lesson after 10pm), "Early Bird" (before 7am)
Achievement notifications: Toast notification with badge animation when unlocked
Achievement page: Grid view of all achievements showing locked/unlocked status
Rarity tiers: Common (gray), Rare (blue), Epic (purple), Legendary (gold) with different effects
Achievement progress: Show progress toward unlocking (e.g., "7/10 perfect quizzes")
Share achievements: Generate image card to share on social media

4. Interactive Visualizations

Each of the 30 lessons needs a unique, engaging interactive demo. Key principles:

Hands-on: User must interact, not just watch
Real-time feedback: Changes happen as user adjusts controls
Educational: Visualization should make concept "click" instantly
Beautiful: Smooth animations and polished design
Accessible: Keyboard navigation and screen reader support

Example visualization ideas for key topics:

Tokenization: Live text input that splits into color-coded tokens as you type
Vector Embeddings: 3D scatter plot where users add words and see semantic clustering
Neural Networks: Animated network with nodes lighting up during forward propagation
Attention Mechanism: Heatmap overlay showing attention weights between words
RAG System: Step-by-step animated flow showing query → retrieval → generation
Temperature Sampling: Interactive slider showing how temperature affects output randomness

5. Progress Tracking & Analytics

Stats dashboard:
- Total days completed (30 max)
- Current streak / Longest streak ever
- Total XP and current level
- Average quiz score across all lessons
- Total time spent learning (hours:minutes)
- Favorite category (based on time spent)
- Completion rate percentage
Weekly summary: Auto-generated at end of each week showing progress
Personal bests: Fastest lesson completion, highest weekly XP earned
Progress charts: Line graph showing XP earned over time
Completion calendar: Heatmap showing which days completed
Category breakdown: Pie chart or bar chart showing lessons completed per category

6. Additional Features

Dark/Light mode toggle with smooth transition and system preference detection
Export progress: Download JSON file with all progress data for backup
Import progress: Upload JSON to restore progress on new device or browser
Share achievements: Generate beautiful image cards for social media with gradient backgrounds
Lesson bookmarks: Mark important lessons for quick access from dashboard
Search and filter: Find lessons by keyword or category with instant results
Responsive design: Perfect experience on mobile (320px+), tablet, desktop
Keyboard shortcuts:
- Arrow keys for navigation between sections
- Space for next section
- B for bookmark
- N for notes
- ESC to close modals
Accessibility:
- ARIA labels on all interactive elements
- Keyboard navigation for all features
- Screen reader announcements for dynamic content
- Focus indicators
- Color contrast meeting WCAG AA standards
Print stylesheet: Allow printing lessons for offline study
PWA features: Add to home screen, basic offline functionality

UI/UX Guidelines

Design System

Color palette:
- Primary: Purple gradient (#667eea to #764ba2)
- Success: Green (#10b981)
- Warning: Yellow (#fbbf24)
- Error: Red (#ef4444)
- Neutral: Gray scale (#f9fafb to #111827)
Typography:
- Font family: Inter (headings and body)
- Code: Fira Code or JetBrains Mono
- Font sizes: 12px, 14px, 16px, 18px, 24px, 32px, 48px
Spacing: Consistent 4px/8px grid system (4, 8, 12, 16, 24, 32, 48, 64px)
Border radius:
- Small: 6px (buttons, badges)
- Medium: 12px (cards)
- Large: 16px (modals)
Shadows:
- sm: 0 1px 2px rgba(0,0,0,0.05)
- md: 0 4px 6px rgba(0,0,0,0.07)
- lg: 0 10px 15px rgba(0,0,0,0.1)
- xl: 0 20px 25px rgba(0,0,0,0.1)
Animations:
- Framer Motion for page transitions (duration: 0.3s)
- CSS transitions for micro-interactions (duration: 0.2s ease)
- Confetti library for celebrations
- Shimmer effect for loading states
- Lottie animations for achievements (optional)

Responsive Breakpoints

Mobile: < 640px (1 column)
Tablet: 640px - 1024px (2 columns)
Desktop: > 1024px (3-4 columns)

Animation Principles

Smooth transitions: All state changes should feel fluid
Loading states: Skeleton loaders (not spinners) for content
Micro-interactions:
- Button scale on click
- Card lift on hover (translateY -4px)
- Tooltip fade in/out
- Badge pop-in animation
Celebration moments:
- Confetti on level up (3 seconds)
- Badge animation on achievement unlock (scale + fade)
- Streak milestone celebration (fire animation)
Progress feedback:
- XP bar animates smoothly when points added
- Streak counter increments with animation
- Completion checkmarks with delay

Implementation Strategy

Phase 1: Foundation & Setup

Initialize Next.js 15 project with TypeScript and App Router
Configure Tailwind CSS and install shadcn/ui components
Set up folder structure as defined above
Create types for lessons, progress, achievements
Build localStorage utility functions with error handling
Create Zustand stores for progress and achievements
Set up Framer Motion and other animation libraries

Phase 2: Calendar & Dashboard

Create JSON structure for all 30 lessons (metadata only)
Build calendar grid component with day cards
Implement filtering by category with smooth transitions
Create progress overview section with animated stats
Build streak display with fire animation
Add search functionality with debouncing
Implement responsive grid layout

Phase 3: Lesson Page Foundation

Create dynamic lesson route [day]
Build lesson page layout and header
Implement markdown renderer for lesson content
Create section navigation within lesson
Add time tracking functionality
Build quiz component with instant feedback
Create notes section with localStorage persistence
Add bookmark functionality

Phase 4: Gamification Core

Implement streak calculation with freeze logic
Build XP calculation and leveling system
Create achievement detection system with checks
Design and implement achievement badge components
Build level-up modal with confetti animation
Create XP progress bar with smooth transitions
Build achievement unlocking toast notifications

Phase 5: Interactive Visualizations

Focus on quality over quantity - start with 5-7 core demos:

Tokenization demo (text splitting)
Vector embeddings (2D/3D scatter plot)
Neural network (animated propagation)
Attention mechanism (heatmap)
Transformer architecture (interactive diagram)
RAG system (flow animation)
Temperature sampling (interactive slider)

Then expand to remaining topics iteratively.

Phase 6: Stats & Analytics

Build profile page with comprehensive stats
Create progress calendar heatmap
Add charts for XP over time
Build category breakdown visualization
Implement weekly summary generation
Add personal bests tracking

Phase 7: Polish & Features

Implement dark/light mode with toggle
Add export/import progress functionality
Create shareable achievement card generator
Add keyboard shortcuts
Implement accessibility features (ARIA, focus management)
Add PWA manifest and service worker
Optimize bundle size and performance
Add error boundaries and fallback UIs

Phase 8: Testing & Deployment

Write unit tests for utility functions
Component testing for key components
E2E tests for critical flows
Accessibility testing with axe-core
Performance testing with Lighthouse
Deploy to Vercel
Set up analytics (optional)

Technical Considerations

Performance Optimization

Code splitting: Lazy load visualization components per lesson
Image optimization: Use Next.js Image component for all images
localStorage optimization: Batch writes, debounce frequent updates
Memoization: Use React.memo for expensive components (charts, visualizations)
Debouncing: For search, filter, and note-taking operations
Bundle size: Monitor with next/bundle-analyzer
Virtual scrolling: If achievement list grows very large

Error Handling

localStorage quota: Detect and handle when quota exceeded (clear old data)
Corrupt data recovery: Validate localStorage data on read, provide reset option
Fallback states: Graceful degradation when features unavailable
Error boundaries: Catch React errors and show friendly message
Network errors: Handle JSON fetch failures gracefully
Browser compatibility: Test on Safari, Chrome, Firefox, Edge

Data Persistence Strategy

Save frequency: Save progress after each action (completion, quiz, note)
Data validation: Always validate before saving and after reading
Migration strategy: Version localStorage schema to handle updates
Backup reminder: Prompt users to export progress regularly
Clear data option: Provide UI to reset all progress

Success Metrics (Optional Analytics)

User Engagement

Completion rate per day (% of users who complete each day)
Average time spent per lesson
Streak retention rate (% maintaining 7+ day streak)
Return visitor rate (daily, weekly)
Average quiz scores

Feature Usage

Most popular lessons (by time spent)
Most interacted visualizations
Achievement unlock rate
Bookmark usage frequency
Note-taking frequency
Export feature usage

30 Days Curriculum Overview

Organize into 4 themed weeks with 7-8 days each:

Week 1: AI Fundamentals

Focus on foundational concepts like tokenization, embeddings, neural networks, training, LLMs, transformers, attention

Week 2: Practical Applications

Cover prompt engineering, RAG, vector databases, AI agents, multimodal AI, fine-tuning, context windows

Week 3: Advanced Concepts

Deep dive into temperature/sampling, chain-of-thought, small language models, quantization, LoRA, function calling, conversational AI

Week 4: Ethics, Safety & Future

Explore AI bias, deepfakes, security, regulation, image generation, voice AI, AGI, building apps, career paths

Each day should follow this structure in JSON:

Introduction section (theory)
Interactive demo section (unique visualization)
Key insights section (3-5 takeaways)
Quiz section (3-5 questions)
Optional challenge section
Resources section (links for further learning)

Deliverables

Fully functional Next.js 15 application with all features working
30 JSON lesson files with complete educational content
30+ interactive visualizations (minimum one per day, some days may have multiple)
Comprehensive README.md with:
- Setup instructions
- Project structure explanation
- Feature documentation
- Development guide
- Deployment instructions
Responsive design tested on mobile (375px), tablet (768px), desktop (1440px)
Complete gamification system with working streak, XP, levels, achievements
Production deployment on Vercel with custom domain (optional)
Code quality: TypeScript strict mode, ESLint, Prettier configured

Code Quality Standards

TypeScript:
- Strict mode enabled
- No any types (use unknown if needed)
- Proper type definitions for all data structures
Code style:
- ESLint with recommended rules
- Prettier for auto-formatting
- Consistent naming conventions (camelCase, PascalCase)
Component structure:
- One component per file
- Clear prop interfaces
- Proper file organization
Documentation:
- JSDoc comments for complex functions
- README for each major feature
- Inline comments for tricky logic
Git practices:
- Conventional commits
- Feature branches
- Pre-commit hooks for linting
Accessibility:
- WCAG 2.1 AA compliance
- Semantic HTML
- Keyboard navigation
- Screen reader support
Performance:
- Lighthouse score > 90 (Performance, Accessibility, Best Practices, SEO)
- Core Web Vitals passing
- Bundle size under 500KB initial load

Future Enhancement Ideas

Post-launch features to consider:

Social sharing of progress and achievements
Certificate generation upon completing all 30 days
Spaced repetition review system
Custom learning paths (reorder lessons)
AI-powered hints using LLM API
Community features (discussions, Q&A)
Mobile app (React Native)
Offline mode (full PWA)
Voice narration of lessons
Multilingual support
API integrations for live demos
Video explanations for complex topics
Coding challenges with real-time validation
Leaderboards (anonymous)

Final Notes

Focus on creating an exceptional learning experience. This app should feel premium with smooth animations, beautiful design, and genuinely helpful interactive demos. The gamification should motivate without feeling manipulative.

The interactive visualizations are the heart of this application. Each one should make a complex AI concept instantly understandable. Think Duolingo meets Brilliant.org - engaging, beautiful, and educational.

Users should feel accomplished after each lesson, not overwhelmed. Keep lessons concise (10-15 minutes each) but substantial. The 30-day format creates momentum and habit formation.

Make it shareable. Users who complete days should want to share their progress. Make achievement cards beautiful and celebration moments memorable.

Accessibility matters. This should be usable by everyone, regardless of device or ability. Test with keyboard only, screen readers, and on various devices.

Good luck building this! The combination of quality content, beautiful design, and smart gamification will create an addictive learning experience that helps people truly understand AI.

FilesExpand file tree

README.original.md

Latest commit

History