Multi-day Learning Challenges
3 structured courses (AI fundamentals, freelancing with AI, kids AI education) with progress tracking, quizzes, practice sessions and certificates.
Project 04Web App
Gamified AI Learning.
Project overview
A web app combining guided AI courses with a playground for chat, custom agents, image generation and speech. A shared model layer connects multiple AI providers, with Next.js API routes handling generation and uploads. Firebase manages authentication, conversation history and progress syncing so learners can resume courses across sessions.
My role
I designed and built the shared AI integration layer, adapting messages and available actions to OpenAI, Gemini, Claude and Grok capabilities and connecting AI interactions to courses, saved progress and media storage.
A closer look
Choose a screen to exploreUnder the hoodWhat makes
What makes
it work.
The stack
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.