Discover your next Milestone.

AI Webhook Processor

Receive webhook payloads, run them through an AI summarizer pipeline, and store structured results. Your first event-driven AI data pipeline.

• Build and expose a webhook receiver that handles inbound HTTP POST payloads
• Expose a local server to the internet using ngrok for testing
• Build an event-driven AI pipeline: receive data → process with LLM → store result
• Extract structured JSON output from LLM responses reliably

AI Document Comparison UI

Upload two documents, stream a structured diff-style comparison with independent section streams. Build parallel streaming state — where 4 sections stream simultaneously.

• Parse and extract text from PDF uploads on a Next.js API route
• Design and implement parallel streaming — multiple SSE streams running simultaneously
• Manage four independent streaming state machines in React
• Build diff-style, color-coded UI for comparing structured document content

Real-time AI Agent Dashboard

Visualize a multi-step AI agent's reasoning as it happens — each tool call, intermediate result, and decision rendered live via SSE. The ultimate AI-era frontend project.

• Design a real-time event schema for AI agent state update
• Connect a frontend to an SSE stream using the EventSource API
• Build interactive node-graph visualizations using React Flow
• Dynamically add and connect nodes based on live streaming events

Voice-to-AI Interface

Record voice, transcribe it in real time with Whisper, stream the AI response back as text and audio. Build the full voice-in, voice-out interaction loop.

• Access and control the browser microphone using the Web Audio API
• Record audio, collect MediaRecorder chunks, and combine into a Blob
• Transcribe audio using OpenAI Whisper via a Next.js API route
• Convert text to speech using OpenAI TTS and play it via an audio element

Multi-turn Chatbot with Tool Call Visualizer

Build a chatbot that calls tools (search, calculator) and renders each tool call and its result as a visual card — teaching real agent UX patterns.

• Maintain multi-turn conversation history across LLM API calls
• Define and register tools (function calling) in the Vercel AI SDK
• Build an agent-aware chat UI that visually distinguishes tool calls from messages
• Understand how tool calling enables LLMs to take real-world actions

AI Code Reviewer

Paste code and get streaming, structured feedback — summary, issues, and suggestions rendered as distinct UI sections. Build complex multi-part streaming state machines.

• Design a multi-section UI that renders structured AI output
• Use Vercel AI SDK's streamObject to stream typed JSON responses
• Manage independent loading states for multiple streaming sections simultaneously
• Implement syntax-highlighted code rendering in React

Image Caption Generator

Drag-and-drop an image, get an AI-generated caption and description instantly. Your first multimodal interface — learn file uploads, loading states, and vision API responses.

• Build a drag-and-drop file upload interface using react-dropzone
• Convert uploaded files to base64 for API transmission
• Integrate OpenAI's multimodal Vision API for image understanding
• Design loading skeletons and smooth loading state transitions

AI Writing Assistant with Autocomplete

Build a text editor that suggests AI completions as you type. Learn debouncing API calls, handling streamed partial text, and blending AI output into live editing.

• Debounce user input to avoid excessive API calls
• Render streaming AI text incrementally in a live editor UI
• Build a ghost-text autocomplete UX pattern from scratch
• Control AI behavior by modifying the system prompt dynamically

Task Manager App

A full-featured to-do app with create, edit, delete, filter by status, and local state persistence. Learn React fundamentals through a real CRUD interface

• Manage complex UI state using React useState and controlled components
• Implement CRUD operations entirely on the frontend
• Filter and sort lists based on dynamic user input

Personal Portfolio Website

Build a multi-page personal site with a hero section, projects gallery, skills list, and a working contact form. Your first deployable web project.

• Structure a multi-page website using semantic HTML5 elements
• Apply CSS Flexbox and Grid for real-world page layouts
• Write responsive CSS using media queries for mobile and desktop
• Add interactivity with vanilla JavaScript (event listeners, DOM manipulation)

Build Your Own ChatGPT UI

Create a streaming chat interface where AI responses appear word-by-word in real time. Learn SSE handling, stream rendering, and AI-aware React state.