🎓 IntelliCourse - Voice AI Learning Platform

Real-time voice AI conversations for education 🎙️ Built with VAPI SDK, Next.js 15, and WebRTC. Learn through natural speech with AI tutors, track progress via GitHub-style heatmaps, and maintain learning streaks.

🌐 Live Demo • 📖 VAPI Integration Guide • 🐛 Report Bug

🎯 Why IntelliCourse?

Traditional learning platforms rely on text and video. IntelliCourse enables conversational learning through real-time voice AI—just like talking to a tutor. Built for developers interested in voice AI integration, real-time audio streaming, and educational technology.

Technical Highlights

🎙️ VAPI SDK Integration - Real-time voice streaming with WebRTC, sub-200ms latency
🔄 Live Transcription - Speech-to-text conversion with conversation persistence
📊 Analytics Engine - GitHub-style activity heatmaps with streak gamification
⚡ Next.js 15 + React 19 - Server Components, Turbopack, concurrent rendering
🎨 Glassmorphism UI - Modern design system with Tailwind CSS 4.0 + Framer Motion

Best for: Developers learning voice AI implementation, building EdTech products, or exploring conversational interfaces.

🚀 Quick Start

# Clone and install
git clone https://github.com/chayan-1906/IntelliCourse-Next.js.git
cd IntelliCourse-Next.js
npm install

# Configure environment (see .env.example)
cp .env.example .env

# Run development server
npm run dev

Prerequisites: Node.js 18+, accounts for Supabase, Clerk, and VAPI

📖 Complete Setup Guide | 🔧 VAPI Integration Docs

✨ Core Features

🎙️ Real-Time Voice Sessions
Natural AI conversations with live transcription

📊 Activity Analytics
GitHub-style heatmaps & streak tracking

🎤 Voice AI Integration

VAPI SDK - Real-time audio streaming via WebRTC with automatic reconnection
Custom AI Tutors - Subject-specific companions (Math, Science, Coding, Languages, etc.)
Voice Customization - Male/Female voices with Formal/Casual teaching styles
Live Transcription - Full conversation capture with searchable history
Session Management - Auto-save with duration tracking and analytics

📖 Read the VAPI Integration Guide - Learn how voice streaming, state management, and WebRTC connections work under the hood.

📈 Learning Analytics & Gamification

Activity Heatmap - GitHub-style visualization (daily/weekly/monthly/yearly views)
Streak Counter - Track learning consistency and longest streaks
Progress Dashboard - Session history with export to CSV
Data Visualization - Bar charts, calendar grids, and interactive tooltips

🎨 Modern UI/UX

Glassmorphism Design - Frosted glass effects with backdrop blur
Subject Color Coding - Visual distinction (Math: Yellow, Science: Purple, etc.)
Smooth Animations - Framer Motion transitions + Lottie animations
Responsive Layout - Mobile-first design with adaptive breakpoints

🏗️ Tech Stack

Frontend

Technology	Version	Purpose
Next.js	`15.4.7`	React framework with App Router, Turbopack
React	`19.1.0`	UI with concurrent rendering
TypeScript	`5.x`	Type-safe development
Tailwind CSS	`4.0`	Utility-first styling with custom system
Framer Motion	`12.23.12`	Animation library for micro-interactions

Voice AI & Backend

Technology	Version	Purpose
VAPI SDK	`2.3.0`	Real-time voice conversations via WebRTC
Supabase	`2.56.0`	PostgreSQL + real-time APIs + authentication
Clerk	`6.31.4`	OAuth authentication & user management
Zod	`3.25.x`	Runtime validation for forms and APIs

Developer Tools

Sentry - Error tracking and performance monitoring
ESLint - Code quality with Next.js config
Shadcn UI - Accessible component system with Radix UI

📸 Screenshots

Dashboard Overview

📷 View More Screenshots

Companion Creation Form	Connecting Animation
Session Complete	My Journey Dashboard

🎓 Getting Started

Prerequisites

Node.js 18.0+ (Download)
npm package manager
Accounts: Supabase, Clerk, VAPI

Installation

Clone repository

git clone https://github.com/chayan-1906/IntelliCourse-Next.js.git
cd IntelliCourse-Next.js

Install dependencies
```
npm install
```

Configure environment variables

Create .env file:

cp .env.example .env

Add your credentials:

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxx
CLERK_SECRET_KEY=sk_test_xxxxx
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

# VAPI
NEXT_PUBLIC_VAPI_WEB_TOKEN=xxxxx-xxxxx-xxxxx-xxxxx

# Sentry (Optional)
SENTRY_AUTH_TOKEN=xxxxx

Set up Supabase database

Run in Supabase SQL Editor:

-- Create companions table
CREATE TABLE companions (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  name TEXT NOT NULL,
  subject TEXT NOT NULL,
  topic TEXT NOT NULL,
  voice TEXT NOT NULL,
  style TEXT NOT NULL,
  duration INTEGER NOT NULL,
  author TEXT NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Create session_history table
CREATE TABLE session_history (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  companion_id UUID REFERENCES companions(id) ON DELETE CASCADE,
  user_id TEXT NOT NULL,
  duration_minutes INTEGER DEFAULT 0,
  transcript TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  completed_at TIMESTAMPTZ
);

-- Create bookmarks table
CREATE TABLE bookmarks (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  companion_id UUID REFERENCES companions(id) ON DELETE CASCADE,
  user_id TEXT NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  UNIQUE(companion_id, user_id)
);

-- Enable Row Level Security
ALTER TABLE companions ENABLE ROW LEVEL SECURITY;
ALTER TABLE session_history ENABLE ROW LEVEL SECURITY;
ALTER TABLE bookmarks ENABLE ROW LEVEL SECURITY;

-- Create policies
CREATE POLICY "Enable read for all users" ON companions FOR SELECT USING (true);
CREATE POLICY "Enable insert for authenticated users" ON companions FOR INSERT WITH CHECK (true);

Configure VAPI

In your VAPI dashboard:
- Create a new assistant
- Set voice preferences (male/female)
- Configure system prompts for tutoring
- Enable transcription
- Copy Web Token to .env
Start development server
```
npm run dev
```
Open browser → http://localhost:3000

🔧 How It Works - Voice Session Flow

User Creates Companion
        ↓
Session Starts → VAPI SDK Initializes → WebRTC Connection
        ↓
Real-Time Audio Streaming ↔ Speech-to-Text Transcription
        ↓
Live Conversation State → Transcript Updates
        ↓
Session Ends → Save to Supabase → Update Analytics
        ↓
Heatmap + Streak Counter + History Updated

Want to learn more? Read the VAPI Integration Guide for implementation details, code examples, and architecture diagrams.

🏛️ Architecture Overview

┌─────────────────────────────────────────────────────────┐
│                     Client Layer                        │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐   │
│  │  Next.js 15  │  │  React 19    │  │ Tailwind CSS │   │
│  │  App Router  │  │  Components  │  │  Styling     │   │
│  └──────────────┘  └──────────────┘  └──────────────┘   │
└─────────────────────────────────────────────────────────┘
                            │
                            ▼
┌─────────────────────────────────────────────────────────┐
│                  Authentication Layer                   │
│                  ┌──────────────┐                       │
│                  │  Clerk Auth  │                       │
│                  │  OAuth 2.0   │                       │
│                  └──────────────┘                       │
└─────────────────────────────────────────────────────────┘
                            │
              ┌─────────────┴─────────────┐
              ▼                           ▼
┌──────────────────────────┐  ┌──────────────────────────┐
│    Voice AI Layer        │  │    Database Layer        │
│  ┌────────────────────┐  │  │  ┌────────────────────┐  │
│  │  VAPI SDK          │  │  │  │  Supabase          │  │
│  │  - Voice Recognition│  │  │  │  - PostgreSQL DB  │  │
│  │  - Text-to-Speech  │  │  │  │  - Real-time APIs  │  │
│  │  - Conversation AI │  │  │  │  - Storage Buckets │  │
│  └────────────────────┘  │  │  └────────────────────┘  │
└──────────────────────────┘  └──────────────────────────┘
              │                           │
              └─────────────┬─────────────┘
                            ▼
┌─────────────────────────────────────────────────────────┐
│                  Monitoring Layer                       │
│                  ┌──────────────┐                       │
│                  │    Sentry    │                       │
│                  │  Error/Perf  │                       │
│                  └──────────────┘                       │
└─────────────────────────────────────────────────────────┘

📁 Project Structure

IntelliCourse-Next.js/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── companions/         # Companion CRUD pages
│   │   ├── my-journey/         # Analytics dashboard
│   │   └── api/                # API routes
│   ├── components/             # React components
│   │   ├── ui/                 # Shadcn UI components
│   │   ├── CompanionComponent.tsx  # Voice session handler
│   │   ├── ActivityHeatmap.tsx     # Analytics visualization
│   │   └── ...
│   ├── lib/
│   │   ├── actions/            # Server actions
│   │   ├── supabase.ts         # Database client
│   │   └── vapi.sdk.ts         # VAPI integration
│   └── types/                  # TypeScript definitions
├── public/
│   ├── animations/             # Lottie JSON files
│   └── icons/                  # SVG assets
└── README.md

🎨 Design System

Subject Color Palette

Science:   #E5D0FF (Purple)
Maths:     #FFDA6E (Yellow)
Language:  #BDE7FF (Blue)
Coding:    #FFC8E4 (Pink)
History:   #FFECC8 (Beige)
Economics: #C8FFDF (Green)

Glassmorphism Theme

Backdrop Blur: backdrop-blur-lg
Border: border border-white/20
Background: bg-white/10
Shadow: Layered shadows for depth

🚀 Deployment (Vercel)

Push to GitHub
Import to Vercel
Add environment variables
Deploy!

Post-deployment:

Update Clerk redirect URLs with production domain
Configure Sentry DSN for monitoring

🤝 Contributing

Contributions welcome! Follow Conventional Commits:

git checkout -b feature/amazing-feature
git commit -m 'feat: Add voice pause/resume'
git push origin feature/amazing-feature

Open a Pull Request with:

Clear description of changes
Screenshots (if UI changes)
Test results

📊 Server Actions API

Key server actions in companion.actions.ts:

// Companion Management
createCompanion(formData: CreateCompanion): Promise<Companion>
getAllCompanions(options: GetAllCompanions): Promise<Companion[]>
getCompanion(id: string): Promise<Companion>

// Session Management
addToSessionHistory(companionId: string): Promise<string>
updateSessionDuration(companionId: string, duration: number): Promise<void>
saveSessionTranscript(sessionId: string, transcript: string): Promise<void>

// Analytics
getHeatmapData(userId: string): Promise<HeatmapValue[]>
getUserStreakData(userId: string): Promise<StreakData>

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

Summary: Free to use, modify, and distribute with attribution.

👨‍💻 Author

Padmanabha Das - Full-Stack Developer & AI Integration Specialist

🙏 Acknowledgments

Built with cutting-edge technologies:

Next.js - React framework
VAPI - Voice AI SDK
Supabase - Backend platform
Clerk - Authentication
Vercel - Hosting
Tailwind CSS - Styling
Framer Motion - Animations

⭐ Support This Project

If you found this helpful:

⭐ Star this repository
🐛 Report bugs via Issues
🤝 Contribute improvements
💬 Share with developers interested in voice AI

🎓 Built with ❤️ by Padmanabha Das

Exploring the future of voice-based education

Name		Name	Last commit message	Last commit date
Latest commit History 72 Commits
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
TECHNICAL.md		TECHNICAL.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package.json		package.json
postcss.config.mjs		postcss.config.mjs
sentry.edge.config.ts		sentry.edge.config.ts
sentry.server.config.ts		sentry.server.config.ts
tsconfig.json		tsconfig.json

License

chayan-1906/IntelliCourse-Next.js

Folders and files

Latest commit

History

Repository files navigation