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

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

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.