← All projects
Web · API

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.

Explore the project
Selected contributions

Engineering
highlights.

Technologies

Next.jsReactTypeScriptFirebase (Auth, Firestore, Storage)OpenAIGoogle GeminiAnthropic ClaudexAI GrokTailwind CSSZustandRadix UIZod
01

One interface for multiple AI providers

Built a shared integration layer that adapts messages and available actions to OpenAI, Gemini, Claude and Grok, keeping provider differences behind a common interface.

02

Agents with persistent context

Connected custom system prompts and role-specific behaviour to stored conversation history, allowing learners to return to their configured agents.

03

Image generation inside the playground

Connected prompt-based image generation to Firebase Storage, keeping generated media available alongside the learning experience.

04

Audio responses from text

Integrated text-to-speech providers and voice choices into the playground, extending AI interactions beyond written responses.

05

Continuity between learning sessions

Connected AI interactions to courses, saved progress and conversation storage, so learners can resume their work across sessions.

06

Multi-day Learning Challenges

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

07

Multi-method Authentication

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

08

5 Interactive Step Types

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

09

Error Monitoring

Sentry integration for production-grade issue tracking.