Prove your skills

# Build a Tweet-Sized App Gallery Build a gallery of tiny functional web apps — each implemented in 280 characters or less of JavaScript. ## Requirements - Gallery grid of at least 10 tweet-sized apps (clock, color picker, counter, etc.) - Each card shows: title, live preview iframe, character count, and the code - Click a card to open it full-screen with an editable code area - Live preview updates as the code is edited - Character counter that turns red when over 280 - Share button that creates a URL with the code encoded in the hash - Submit your own: form to add a new tweet-sized app to the gallery ## Technical Notes Render each app in a sandboxed iframe using srcdoc. The challenge is curating genuinely clever tiny apps. ## Bonus Points - Upvote/favorite system - Category tags (game, tool, art, utility) - Minification helper that tries to compress code under 280

# Build a Link-in-Bio Page Builder Build a Linktree-style page builder with themes, drag-and-drop, and click analytics. ## Requirements - User auth and profile setup (name, bio, avatar URL) - Add/edit/delete/reorder links (drag-and-drop) - Each link has: title, URL, and optional icon - At least 5 visual themes (minimal, neon, gradient, retro, dark) - Live preview of the page as you edit - Public page at /u/username (server-rendered for SEO) - Click analytics per link (total clicks, click-through rate) ## Technical Notes Use Next.js dynamic routes for public pages. Drag-and-drop for link reorder. Store user data and clicks in database. ## Bonus Points - Custom CSS injection for advanced users - Social media icon auto-detection from URL - Animated link hover effects per theme

# Build an Event RSVP Platform Build a platform for creating events, managing RSVPs, and checking in attendees with QR codes. ## Requirements - Create events with: title, description, date/time, location, max capacity - Public event page with RSVP form (name, email, +1 option) - RSVP confirmation with QR code (encode attendee ID) - Attendee list for event organizer - QR code scanner for check-in (using device camera) - Event dashboard: RSVP count, checked-in count, remaining capacity - Waitlist when event is full, auto-promote when spots open ## Technical Notes Generate QR codes using a library like qrcode. For scanning, use an HTML5 QR scanner library. ## Bonus Points - Event reminder emails (simulated) - Export attendee list as CSV - Event analytics (RSVP rate, check-in rate)

# Fix the Code Review Bot UI You've inherited a code review tool that accepts PR diffs and provides AI-generated review comments. Fix it. ## Known Issues - Diff parser breaks on files with special characters in filenames - Line comments are attached to wrong line numbers after file changes - The "approve" and "request changes" buttons don't update the UI state - Markdown rendering in review comments strips code blocks - File tree navigation doesn't scroll to the selected file ## Requirements - Fix ALL the above bugs - Add inline comment threading (reply to existing comments) - Add "Resolve" button for each comment thread - Ensure the diff viewer handles large files (1000+ lines) without lag - Write tests for the diff parser edge cases you fix ## Bonus Points - Syntax highlighting in diff view - Keyboard navigation between files - Comment severity labels (critical, suggestion, nitpick)

# Build a Sentiment Analysis Dashboard Build a dashboard that analyzes text sentiment and visualizes results over time. ## Requirements - Text input area: paste text to analyze - Sentiment score display: positive/negative/neutral with confidence - Batch mode: paste multiple texts (one per line) and see aggregate results - Sentiment over time chart (for ordered texts like tweets or reviews) - Word cloud highlighting positive (green) and negative (red) words - Export results as CSV - Use a simple rule-based sentiment analyzer (AFINN lexicon or similar) ## Technical Notes Implement a basic sentiment analyzer using a word-score lexicon. No API calls needed. Use Recharts for charts. ## Bonus Points - Real Twitter/Reddit API integration for live analysis - Emoji sentiment support - Comparison mode between two text sources

# Build an Image Classifier UI Build a drag-and-drop image classification tool running a pre-trained model in the browser via TensorFlow.js. ## Requirements - Drag-and-drop image upload zone - Run MobileNet classification model in-browser via TensorFlow.js - Display top 5 predictions with confidence percentages - Confidence bar visualization for each prediction - Support batch classification (upload multiple images) - Show processing time for each image - Gallery of classified images with their top prediction labels ## Technical Notes Use @tensorflow/tfjs and @tensorflow-models/mobilenet. The model downloads on first use (~16MB). Show a loading bar for model download. ## Bonus Points - Webcam capture mode for live classification - Custom model upload (TensorFlow.js format) - Compare two images' classifications side by side

# Build a Prompt Engineering Playground Build a tool to test, compare, and iterate on AI prompts with side-by-side output comparison. ## Requirements - Prompt editor with variables support ({{name}}, {{context}}, etc.) - Variable input panel to fill in template variables - Send prompt to a mock AI endpoint (simulate responses with delay) - Side-by-side comparison: run 2 prompt variants simultaneously - Token count estimator (approximate based on word count x 1.3) - Prompt history with timestamps and outputs - Save favorite prompts with names and tags ## Technical Notes Build a clean prompt template system. For the mock API, create a Next.js API route that returns simulated responses. ## Bonus Points - Real API integration (OpenAI/Anthropic) with key input - A/B test mode comparing prompt performance - Export prompt library as JSON

# Build a Real-Time Stock Ticker Build a real-time stock price dashboard with live charts, watchlists, and price alerts. ## Requirements - Search and add stocks to a watchlist - Live price updates via WebSocket or polling (use a free API or mock data) - Candlestick or line chart for each stock (1D, 1W, 1M, 1Y views) - Price change indicators: green for up, red for down, with percentage - Price alerts: set a target price and get notified when reached - Portfolio view: enter how many shares you own, see total value - Responsive grid layout for multiple stocks ## Technical Notes For free real-time data, use Finnhub WebSocket or mock data with realistic price movements. Chart rendering with Recharts or Chart.js. ## Bonus Points - Sparkline mini-charts in the watchlist - News feed per stock - Dark/light theme toggle

# Build a JSON Schema Validator Build a web tool to validate JSON data against a JSON Schema with detailed error reporting and line highlighting. ## Requirements - Two editor panes: JSON data (left) and JSON Schema (right) - Real-time validation as you type (debounced) - Error messages with exact paths to invalid fields - Highlight invalid lines in the JSON editor - Built-in schema templates (user profile, API response, config file) - Sample data generator from a given schema - Pretty-print / minify toggle for both panes ## Technical Notes Use Ajv (Another JSON Validator) for schema validation. Use a code editor component with line highlighting support. ## Bonus Points - Schema auto-detection from sample data - Diff view between two JSON documents - Share validator state via URL

# Build a Dependency Graph Visualizer Build a tool that parses a package.json and renders an interactive force-directed dependency graph. ## Requirements - Upload or paste a package.json file - Parse dependencies and devDependencies - Render an interactive force-directed graph (nodes = packages, edges = dependencies) - Click a node to see package details (version, description from npm registry) - Color-code nodes: green for deps, blue for devDeps, red for outdated - Search/highlight specific packages in the graph - Zoom and pan controls ## Technical Notes Use D3.js force simulation or a library like react-force-graph. Fetch package info from the npm registry API. ## Bonus Points - Show transitive dependencies (depth selector) - Bundle size display per package - Vulnerability warnings from npm audit data

# Build a Code Formatter Playground Build a web tool where you paste code, configure formatting rules, and see formatted output with a diff view. ## Requirements - Paste code in the left panel, see formatted code in the right panel - Support at least 3 languages: JavaScript/TypeScript, JSON, CSS - Configurable rules: indent size (2/4/tabs), semicolons, quotes (single/double), trailing commas - Diff view highlighting what changed - Copy formatted code button - Reset to defaults button - Preset configurations (Prettier default, StandardJS, Airbnb) ## Technical Notes Use Prettier as the formatting engine (runs in-browser via WASM). Use a diff library for highlighting changes. ## Bonus Points - .prettierrc import/export - Format on paste - Multiple file tabs

# Build a Puzzle Generator Build a web app that generates and lets users solve sliding tile puzzles with custom images. ## Requirements - Generate sliding puzzles from any uploaded image (split into NxN grid) - Configurable grid size: 3x3, 4x4, 5x5 - Click or keyboard to slide tiles into the empty space - Move counter and timer - Shuffle algorithm that guarantees solvability - Win detection with celebration animation - Hint button that highlights the correct position for a tile ## Technical Notes Use Canvas to slice the image into tiles. Track puzzle state as a 2D array. For solvability, count inversions. ## Bonus Points - Auto-solve with A* algorithm (animated) - Leaderboard for each grid size - Pre-loaded image gallery (landscapes, art, memes)

# Build Multiplayer Tic-Tac-Toe Build a real-time 2-player Tic-Tac-Toe game with matchmaking and game rooms. ## Requirements - Create or join game rooms with a shareable room code - Real-time move synchronization between two players - Turn indicator showing whose turn it is - Win/draw detection with winning line highlight - Game history: list of completed games with outcomes - Rematch button after game ends - Clean, animated UI (move transitions, win celebration) ## Technical Notes Use WebSockets or a real-time service. Server validates moves to prevent cheating. Can use Next.js API routes with WebSocket upgrade. ## Bonus Points - Spectator mode for room links - AI opponent for single player - Custom board sizes (4x4, 5x5)

# Build Snake with an AI Opponent Build the classic Snake game with a twist: an AI-controlled snake competes against you for food. ## Requirements - Classic snake mechanics: grow when eating food, die on wall/self collision - AI snake that pathfinds to food using A* or BFS - Both snakes compete for the same food items - Score tracking for both player and AI - Increasing difficulty: snakes speed up as they grow - Game over screen with replay option - Keyboard controls (WASD or arrow keys) ## Technical Notes Use Canvas for rendering. Update game state on a fixed tick interval. AI pathfinding should avoid both snakes' bodies. ## Bonus Points - AI difficulty settings (easy: random, hard: A*) - Power-ups (speed boost, ghost mode, score multiplier) - 2-player mode (WASD + arrows)

# Build a Fractal Explorer Build an interactive Mandelbrot and Julia set viewer with zoom, pan, and beautiful color palettes. ## Requirements - Render Mandelbrot set on a canvas with smooth coloring - Click to zoom in, right-click to zoom out - Click + drag to pan around the fractal - At least 4 color palettes (fire, ocean, neon, grayscale) - Iteration count slider (affects detail level) - Show Julia set for any point clicked on the Mandelbrot set - Coordinate display showing current position and zoom level ## Technical Notes Use Canvas 2D with Web Workers for computation to keep the UI responsive. Each pixel requires iterating z = z^2 + c until escape or max iterations. ## Bonus Points - Smooth zoom animation - Bookmarks for interesting locations - High-DPI rendering support

# Build a Particle Life Simulator Build a simulation where colored particles follow simple attraction/repulsion rules that produce emergent life-like behavior. ## Requirements - Spawn 500+ particles of 4-6 different colors - Each color pair has an attraction/repulsion force (configurable matrix) - Real-time simulation at 60fps using Canvas - Interactive force matrix editor (sliders or grid) - Preset configurations that produce interesting behaviors (cells, galaxies, worms) - Pause, reset, and speed controls - Particles wrap around screen edges ## Technical Notes Core algorithm: for each particle, calculate net force from all nearby particles based on color-pair rules and distance. Use spatial hashing for performance. ## Bonus Points - Mouse interaction (attract/repel particles) - Record and replay simulations - Export force matrix as shareable config

# Build a Generative Art Gallery Build a web app that generates unique algorithmic art pieces with adjustable parameters and a gallery to save favorites. ## Requirements - At least 3 different generative algorithms (flow fields, circle packing, recursive trees, L-systems, etc.) - Real-time parameter controls: sliders for density, color palette, seed, scale - Each piece has a unique seed — share seeds to recreate art - Save to PNG button - Gallery of saved pieces with thumbnail grid - Responsive canvas that fills available space ## Technical Notes Use HTML Canvas 2D API or p5.js. No WebGL required. Focus on making the art genuinely beautiful. ## Bonus Points - Animation mode (evolving patterns) - Custom color palette editor - High-resolution export (2x, 4x)

# Build a Tab Manager Extension Build a Chrome extension that helps manage browser tabs with grouping, search, and session save/restore. ## Requirements - Popup UI showing all open tabs grouped by domain - Search/filter tabs by title or URL in real-time - One-click close duplicate tabs - Save current tab session with a name, restore later - Suspend inactive tabs to save memory (replace with placeholder page) - Keyboard shortcut to open the manager (Ctrl+Shift+T) ## Technical Notes Use Chrome Extension Manifest V3. Use chrome.tabs, chrome.tabGroups, and chrome.storage APIs. ## Bonus Points - Tab group color coding - Export/import sessions as JSON - Memory usage display per tab

# Build a Regex Playground CLI Build an interactive terminal tool for testing and learning regular expressions with real-time highlighting. ## Requirements - Interactive REPL: type a regex pattern and test string, see matches highlighted - Show all match groups, indices, and captured groups - Built-in cheat sheet accessible with /help - History of tested patterns (navigate with up/down arrows) - Support common regex flags (g, i, m, s) - Show "plain English" explanation of what the regex does ## Technical Notes Use Node.js readline for the REPL interface. Highlight matches using ANSI color codes in the output. ## Bonus Points - Pattern library with common patterns (email, URL, phone, etc.) - Performance benchmark (time to match against large input) - Export matches as JSON

# Build a Dev Environment Doctor Build a CLI diagnostic tool that checks a developer's machine for common setup issues and suggests fixes. ## Requirements - Check installed versions of: Node.js, npm/yarn/pnpm, Python, Git, Docker - Verify common environment variables (PATH, HOME, EDITOR) - Check available disk space and memory - Verify SSH key setup for GitHub/GitLab - Test network connectivity to common registries (npm, PyPI, Docker Hub) - Color-coded output: green for pass, yellow for warning, red for fail - Suggest fix commands for each failing check ## Technical Notes Handle platform differences (macOS/Linux/Windows). Use safe subprocess APIs to check tool versions. ## Bonus Points - Auto-fix mode that runs suggested commands - Custom check plugins via config file - HTML report export

# Build a Git Stats Dashboard Build a terminal-based dashboard that visualizes git repository statistics with colorful ASCII charts. ## Requirements - Parse git log output to extract commit history - Show contributor leaderboard with commit counts - Display a commit frequency heatmap (last 52 weeks, like GitHub) - Show most active hours/days of the week - List top changed files across all commits - Support analyzing any local git repo passed as argument ## Technical Notes Shell out to git log with custom format strings. Use a terminal UI library like blessed, ink, or raw ANSI escape codes for colors and positioning. ## Bonus Points - Branch comparison view - Code churn analysis (lines added/deleted per author) - Export stats as JSON or markdown

# Build a File Upload Service Build a file upload and management service with a clean UI. ## Requirements - Drag-and-drop file upload zone - Upload progress bar for each file - File type validation (images, PDFs, documents only — no executables) - File size limit (10MB per file) - Gallery view of uploaded files with thumbnails - Download files - Delete uploaded files - Persistent storage (can use local filesystem or cloud storage) ## Technical Notes Use Next.js API routes or any backend. For storage, local filesystem is fine for the MVP. The focus is on the upload UX and file handling logic. ## Bonus Points - Image preview before upload - Batch upload with individual progress - File search and filtering - Share links for individual files

# Build a Recipe Book Build a recipe collection app where users can browse, add, and manage recipes. ## Requirements - Add new recipes with: title, description, ingredients list, step-by-step instructions, prep time, cook time, servings - Browse recipes in a responsive card grid with images (use placeholder images) - View full recipe detail page - Search recipes by name or ingredient - Filter by category: Breakfast, Lunch, Dinner, Dessert, Snack - Edit and delete existing recipes - Persist to localStorage ## Bonus Points - Ingredient quantity scaling (adjust servings) - Favorite/bookmark recipes - Print-friendly recipe view - Image upload support

# Build a URL Shortener Build a full-stack URL shortening service with analytics. ## Requirements - Input a long URL and get a shortened version - Shortened URLs redirect to the original URL - Dashboard showing all created short URLs - Click count tracking per short URL - Copy-to-clipboard for shortened URLs - URL validation (must be a valid URL format) ## Technical Notes For the backend, you can use Next.js API routes, Express, or any framework. For storage, use a database, file-based storage, or in-memory store with persistence. ## Bonus Points - Custom short codes (e.g., /my-link instead of /abc123) - QR code generation for each short URL - Click analytics: timestamp, referrer - Expiration dates for links

# Build a Kanban Board Build a Kanban-style project board with drag-and-drop functionality. ## Requirements - Three default columns: To Do, In Progress, Done - Add, edit, and delete cards within columns - Drag and drop cards between columns - Cards have: title, description, priority label, and assignee avatar - Add and rename columns - Persist board state to localStorage ## Technical Notes You may use a drag-and-drop library (e.g., dnd-kit, react-beautiful-dnd) or implement it natively. ## Bonus Points - Card color coding by priority - Card count per column - Collapse/expand columns - Keyboard-accessible drag and drop

# Build a Markdown Notes App Build a note-taking application with live markdown preview. ## Requirements - Create, edit, and delete notes - Each note has a title and markdown body - Split-pane editor: raw markdown on the left, rendered preview on the right - Notes list/sidebar for navigation between notes - Search notes by title and content - Persist notes to localStorage - Auto-save while typing (debounced) ## Markdown Support At minimum support: headings, bold, italic, code blocks, links, lists, and blockquotes. ## Bonus Points - Export notes as .md files - Keyboard shortcuts (Cmd+S to save, Cmd+N for new note) - Note categories or tags

# Build a Task Manager Build a fully functional task management application from scratch. ## Requirements - Create, read, update, and delete tasks - Task properties: title, description, status (todo/in-progress/done), priority (low/medium/high), due date - Filter and sort tasks by status, priority, and due date - Responsive UI that works on desktop and mobile - Persist data (localStorage is acceptable) ## Bonus Points - Drag and drop between status columns - Search/filter functionality - Keyboard shortcuts