Discover your next Milestone.

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.