03ai-learning.tsxWeb App

Gamified AI Learning

An educational product combining structured AI learning challenges with an interactive AI playground — learning AI through gamified courses and hands-on experimentation with multiple models.

Next.jsReactTypeScriptFirebase (Auth, Firestore, Storage)Tailwind CSSZustandRadix UIZod

drop screenshot
Web App · 01

drop screenshot
Web App · 02

// key_features

▸

Multi-day Learning Challenges

3 structured courses (AI fundamentals, freelancing with AI, kids AI education) with progress tracking, quizzes, practice sessions and certificates.

▸

Multi-provider Playground

Chat interface supporting OpenAI GPT-4o, Google Gemini, Anthropic Claude and xAI Grok through a model-factory abstraction.

▸

Custom AI Agent System

Create and manage personalized agents with role-specific behavior, custom system prompts and persistent conversation history.

▸

AI Image Generation

Prompt-based image creation with DALL·E 3 and Google Imagen plus Firebase Storage integration.

▸

AI Text-to-Speech

Audio response generation via OpenAI TTS and Google Gemini with multiple voice options.

▸

Multi-method Authentication

Email/password and Google OAuth login with protected routes and session persistence.

▸

Real-time Progress Tracking

Firebase-powered progress sync with resume-from-where-you-left-off functionality.

▸

5 Interactive Step Types

Intro slides, rich content, multiple-choice quizzes, AI-powered practice sessions and achievement screens.

▸

13 Serverless API Routes

Next.js API handlers for chat, image generation, file uploads, text-to-speech and proxy requests.

▸

Error Monitoring

Sentry integration for production-grade issue tracking.

← all projects next_project →