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 Retro OS Simulator Build a nostalgic desktop environment with windowed applications, a file manager, and a terminal. ## Requirements - Desktop with wallpaper, taskbar at bottom, clock in system tray - Window management: open, close, minimize, maximize, drag to move, resize - File manager app: navigate folders, create/rename/delete files (virtual filesystem) - Notepad app: simple text editor with save/open from virtual filesystem - Terminal app: basic commands (ls, cd, cat, mkdir, echo, clear, help) - Start menu with application list - Multiple windows can be open simultaneously with proper z-ordering - Window focus management (click to bring to front) ## Technical Notes All in-browser, no backend needed. Virtual filesystem stored in state. Window management is the core challenge. ## Bonus Points - Calculator app - Paint app (simple drawing canvas) - Boot sequence animation on load - System sounds (click, open, close, error)

# Build an ASCII Art Generator Build a web tool that converts images to ASCII art with adjustable character density and color support. ## Requirements - Upload an image or paste an image URL - Convert image to ASCII art in real-time - Character density slider: from sparse (. :) to dense (@ # $) - Width control: number of characters per line - Two modes: monochrome (classic ASCII) and colored (ANSI-style with colored characters) - Copy to clipboard button - Live preview that updates as you adjust settings - Invert mode (dark-on-light vs light-on-dark) ## Technical Notes Load image to Canvas, read pixel data, map brightness values to ASCII characters. For colored mode, wrap each character in a span with the pixel's color. ## Bonus Points - Webcam live feed to ASCII art in real-time - Custom character set input - Export as HTML or text file

# Build a Feature Flag Service Build a feature flag management service with percentage rollouts, targeting, and a JavaScript SDK. ## Requirements - Create flags with: key, description, default value (on/off) - Percentage rollout: flag is on for X% of users (consistent per user ID) - User targeting rules: enable for specific user IDs, emails, or attributes - Environment support: dev, staging, production - Audit log: who changed what flag and when - Dashboard: list all flags, toggle, edit rules, view usage - JavaScript SDK for easy flag evaluation ## Technical Notes Use consistent hashing for percentage rollouts (hash userId + flagKey for deterministic bucket). Store flags in database with caching. ## Bonus Points - A/B testing mode (multiple variants, not just on/off) - Flag dependencies (flag B only on if flag A is on) - SDK with real-time updates via SSE

# Build a Pub/Sub Message Broker Build a publish/subscribe message broker with topics, subscriptions, and delivery guarantees. ## Requirements - Topics: create, list, delete - Subscriptions: subscribe to topics, unsubscribe - Publish messages to topics, deliver to all subscribers - At-least-once delivery: messages persist until acknowledged - Message acknowledgment: subscriber confirms receipt - Dead letter topic: unacknowledged messages after 3 retries - Dashboard: topic list, message rates, subscriber counts, pending messages - HTTP API for all operations ## Technical Notes Store messages in a database. Messages have a visibility timeout. Delivery via push to endpoints or pull via API. ## Bonus Points - Message filtering (attribute-based routing) - Fan-out patterns (one message to many subscribers) - Message ordering guarantees per topic

# Build a Job Queue with Dashboard Build a job queue system with worker processes, retry logic, and real-time monitoring. ## Requirements - Enqueue jobs with: type, payload, priority (low/normal/high/critical) - Worker that picks up and processes jobs (simulated with configurable delay) - Retry logic: failed jobs retry up to 3 times with exponential backoff - Job states: PENDING, RUNNING, COMPLETED, FAILED, RETRY, DEAD - Real-time dashboard: queue depth, processing rate, success/failure counts - Job detail view: state history, attempt logs, timing - Batch operations: pause queue, resume, purge dead jobs ## Technical Notes Use a database table as the queue. Workers poll for jobs. Dashboard updates via polling or WebSocket. ## Bonus Points - Concurrent worker pool (configurable parallelism) - Job scheduling (run at specific time) - Dead letter queue with manual retry

# Build a Rate Limiter Service Build a rate limiting service with multiple algorithms, a dashboard, and a JavaScript SDK. ## Requirements - Implement two algorithms: Token Bucket and Sliding Window - HTTP API: POST /check with {key, limit, window} returning {allowed, remaining, resetAt} - Dashboard showing: active keys, request counts, blocked requests - Real-time chart of requests per second - Configurable rate limits per key via dashboard - In-memory storage with optional Redis (abstract storage layer) - JavaScript SDK for easy integration ## Technical Notes Use Next.js API routes. Token bucket: refill tokens at fixed rate. Sliding window: count requests in rolling time window. ## Bonus Points - Distributed rate limiting with Redis - Rate limit headers in responses (X-RateLimit-*) - Burst allowance configuration

# 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)

# Build a Booking System Build a scheduling and booking system with calendar availability, time slots, and confirmations. ## Requirements - Provider: set available hours for each day of the week - Provider: block specific dates (vacations, holidays) - Client: view available time slots for a selected date - Client: book a slot with name, email, and optional notes - Booking confirmation page with details and calendar download (.ics) - Provider dashboard: upcoming bookings, cancel/reschedule - Email notification simulation (log to console, show in UI) - Timezone-aware: display times in the viewer's timezone ## Technical Notes Use Next.js with database for persistence. Date handling: use date-fns or dayjs. Generate .ics calendar files. ## Bonus Points - Recurring availability templates - Buffer time between bookings - Booking page with custom branding

# Build a Social Feed with Reactions Build a social media-style feed with posts, reactions, comments, and infinite scroll. ## Requirements - Create posts with text and optional image - Infinite scroll feed (newest first, load more on scroll) - Reaction system: like, love, laugh, wow, sad (emoji reactions) - Reaction count display with breakdown on hover - Comment system: add comments on posts, see comment count - User avatars and display names - Relative timestamps ("2 hours ago", "yesterday") - Optimistic UI updates for reactions ## Technical Notes Use Next.js API routes with database. Infinite scroll using IntersectionObserver. Optimistic updates: show reaction immediately, revert on error. ## Bonus Points - Image upload to cloud storage - Real-time updates (new posts appear without refresh) - Share/repost functionality

# Build a Micro-Marketplace Build a mini marketplace where users can list items for sale, add to cart, and complete checkout. ## Requirements - User auth (signup/login) - Seller: create listings with title, description, price, images - Buyer: browse listings in a grid, search by name, filter by category and price range - Product detail page with image gallery - Shopping cart with quantity adjustment - Checkout flow: shipping info form, order summary, confirm (no real payment) - Seller dashboard showing their listings and orders - Order status tracking (pending, shipped, delivered) ## Technical Notes Use Next.js with database (Prisma + SQLite for simplicity). Auth via NextAuth or session-based. ## Bonus Points - Review/rating system - Saved items / wishlist - Stripe test mode integration

# Build a Real-Time Collaborative Editor Build a Google Docs-style collaborative text editor where multiple users edit simultaneously. ## Requirements - Rich text editor with bold, italic, headings, lists, and code blocks - Real-time collaboration: multiple cursors visible, changes sync instantly - Conflict resolution: concurrent edits don't corrupt the document - User presence indicators (colored cursors with names) - Document list with create/rename/delete - Share document via unique link - Offline support: edits queue and sync when reconnected ## Technical Notes Use CRDTs (Yjs or Automerge) or OT (ShareDB) for conflict resolution. WebSocket for real-time sync. Rich text editor: Tiptap, Slate, or Lexical. ## Bonus Points - Version history with ability to restore - Comments and suggestions mode - Export as Markdown/HTML/PDF

# 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

# Fix the AI Writing Assistant You've inherited an AI writing assistant with inline suggestions, but it's full of bugs. Debug and improve it. ## Known Issues - Suggestions appear in the wrong position (offset from cursor) - Tone adjustment feature changes text but doesn't preserve formatting - Grammar check API calls fire on every keystroke (should be debounced) - Undo doesn't work after accepting a suggestion - The suggestion popup doesn't dismiss when clicking outside - Dark mode styles are broken (white text on white background) ## Requirements - Fix ALL the above bugs - Add proper debouncing (500ms) for grammar check API calls - Implement undo/redo stack that works with AI suggestions - Add loading indicator while waiting for AI response - Write tests for the suggestion positioning logic ## Bonus Points - Keyboard shortcuts (Tab to accept, Esc to dismiss) - Suggestion animation (fade in/out) - Multiple suggestion types with different icons

# 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 RAG Chat Interface Build a Retrieval-Augmented Generation chat where users upload documents and ask questions with context. ## Requirements - Document upload: accept PDF, TXT, and MD files - Text extraction and chunking (split into ~500 token chunks with overlap) - Simple vector search: embed chunks using a basic similarity metric - Chat interface with message history - Each AI response cites which document chunks were used - Highlight relevant chunks in a side panel - Clear conversation and re-upload documents ## Technical Notes For embeddings, you can use simple TF-IDF or word overlap similarity. For the AI response, use a mock or real API. Store chunks in memory. ## Bonus Points - Real embedding API integration (OpenAI embeddings) - Chunk preview with relevance scores - Multi-document support with source attribution

# 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 Query Builder UI Build a visual SQL-like query builder with drag-drop conditions, grouping, and live query preview. ## Requirements - Visual condition builder: field + operator + value rows - Support operators: equals, not equals, contains, greater than, less than, between, in - AND/OR grouping with nested condition groups (up to 3 levels deep) - Drag-and-drop to reorder conditions - Live SQL preview that updates as you build the query - Apply query to a sample dataset and show filtered results - Save and load named queries ## Technical Notes Model the query as a recursive tree. The sample dataset can be hardcoded JSON. ## Bonus Points - Query validation (incompatible types, missing values) - Export query as JSON filter object - Shareable query URL

# Build a Heatmap Calendar Build a GitHub-style contribution heatmap that can visualize any time-series data. ## Requirements - Render a full-year heatmap grid (7 rows x 52 columns) like GitHub's contribution graph - Accept data as JSON: array of {date, value} objects - Color intensity based on value (5 levels: none, low, medium, high, max) - Hover tooltip showing date and exact value - Customizable color themes (green, blue, purple, red) - Month labels along the top, day labels on the left - Responsive: scrollable on mobile ## Technical Notes Render using SVG or CSS Grid. Each cell is a small square. Calculate color intensity using quantile-based thresholds. ## Bonus Points - Click a day to see details - Year selector for multi-year data - Animated fill-in on load

# Build a Personal Analytics Dashboard Build a personal habit and goal tracking dashboard with charts, streaks, and weekly insights. ## Requirements - Create custom trackable items (habits, metrics, goals) - Daily check-in: mark habits complete, enter metric values - Streak tracking with current and longest streak display - Charts: line chart for metrics over time, bar chart for weekly completion rates - Weekly summary showing trends (better/worse than last week) - Goal progress bars with target values - Data persisted in localStorage ## Technical Notes Use Recharts for charts. Design a clean data schema for flexible tracking (booleans for habits, numbers for metrics). ## Bonus Points - CSV import/export of tracking data - Dark mode calendar heatmap view - Push notification reminders via Service Worker

# Build a CSV Transformer Build a web tool for uploading, previewing, transforming, and exporting CSV data. ## Requirements - Drag-and-drop CSV file upload with instant preview table - Column operations: rename, delete, reorder columns - Row filtering: filter rows by column value (equals, contains, greater than, etc.) - Sort by any column (ascending/descending) - Aggregate functions: count, sum, average, min, max per group - Export transformed data as CSV or JSON - Handle files up to 100K rows without freezing ## Technical Notes Parse CSV using PapaParse or custom parser. Use virtual scrolling for large datasets. Process data transformations in a pipeline. ## Bonus Points - Formula column (create new column from expression) - Chart generation from selected columns - Undo/redo for all transformations

# 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 Color Palette Generator Build a tool that generates harmonious color palettes with contrast checking and multiple export formats. ## Requirements - Generate 5-color palettes using color theory: complementary, analogous, triadic, split-complementary - Lock individual colors and regenerate the rest - WCAG contrast checker: show pass/fail for text on each color combination - Copy colors in multiple formats: HEX, RGB, HSL, Tailwind class names - Palette history (last 10 generated) - Click any color to open a full color picker - Spacebar to generate new random palette ## Technical Notes Implement color space conversions (HEX, RGB, HSL). WCAG contrast ratio formula uses relative luminance. ## Bonus Points - Extract palette from uploaded image - Export as CSS variables, Tailwind config, or Figma-ready JSON - Colorblind simulation preview

# 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

# Fix the Broken Log Analyzer You've inherited a log analyzer dashboard that's riddled with bugs. The core features are there but nothing works correctly. Fix it. ## Known Issues - Log file parser crashes on multiline stack traces - Error rate chart shows incorrect percentages (off by 10x) - Time-based filtering returns results outside the selected range - The "Export CSV" button generates malformed CSV with missing columns - Search by log level filter doesn't work for WARN level - Memory leak: parsing large files causes the browser tab to crash ## Requirements - Fix ALL the above bugs without rewriting from scratch - Add proper error boundaries so the app doesn't white-screen on errors - Add loading states for file parsing (currently freezes the UI) - Write at least 3 unit tests for the parser functions you fix ## Bonus Points - Performance: parse a 50MB log file without crashing - Add a "last 24 hours" quick filter - Improve the chart tooltip formatting

# Build an API Mock Server Build a configurable API mock server with a web UI for defining endpoints and their responses. ## Requirements - Web UI to define mock endpoints: method, path, response body, status code, headers - Support GET, POST, PUT, PATCH, DELETE methods - Dynamic path parameters (e.g., /users/:id) - Response delay simulation (configurable latency) - Request logging: show all incoming requests with timestamp, body, headers - Import/export endpoint configurations as JSON - Actual HTTP server that responds to real requests ## Technical Notes Use Next.js API routes with catch-all route [...path]. Store mock definitions in server state or file. ## Bonus Points - Fake data generation using Faker.js - Response templates with variables - Proxy mode (forward to real API, record responses)

# 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 Typing Speed Racer Build a typing speed test with racing visuals, WPM tracking, and difficulty modes. ## Requirements - Display a passage of text, highlight the current character to type - Real-time WPM (words per minute) and accuracy calculation - Visual "race car" that moves across the screen as you type - Three difficulty modes: Easy (common words), Medium (sentences), Hard (code snippets) - Results screen: WPM, accuracy, time, errors breakdown - Personal best tracking (stored in localStorage) - Countdown (3-2-1-Go!) before starting ## Technical Notes Calculate WPM as: (characters typed / 5) / minutes elapsed. Track each keystroke for accuracy. ## Bonus Points - Ghost racer (race against your personal best) - Daily challenge with a fixed passage - Typing heatmap showing slow keys

# 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 a Procedural Dungeon Crawler Build a roguelike dungeon crawler with procedurally generated levels, inventory, and turn-based combat. ## Requirements - Procedural dungeon generation using BSP trees or random walk - Player character with HP, attack, defense stats - Turn-based movement on a tile grid - At least 3 enemy types with different behaviors - Item pickups: health potions, weapons, armor - Inventory system with equip/use actions - Fog of war (only reveal tiles the player has visited) - New dungeon generated each floor ## Technical Notes Render on Canvas or as a tile grid using divs. Each "turn" the player moves, then all enemies move. Classic roguelike style. ## Bonus Points - Minimap - Boss enemy on every 5th floor - Save/load game state

# 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 CSS Art Generator Build a tool that generates random CSS-only illustrations with adjustable parameters and live code preview. ## Requirements - Generate random CSS illustrations using only div elements and CSS properties - Slider controls for: shape count, color palette, complexity, border radius, rotation - Live preview that updates in real-time as sliders change - Show the generated CSS code alongside the visual - Copy CSS button - Gallery of 10+ hand-crafted presets (animals, landscapes, abstract shapes) - Randomize button for instant new art ## Technical Notes Use CSS properties creatively: gradients, box-shadow (multiple), border-radius, clip-path, transforms. Each "art piece" is a single div or minimal DOM. ## Bonus Points - Export as SVG - Animation toggle (CSS keyframes) - Share via URL with encoded parameters

# 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 Shader Playground Build a live GLSL shader editor with real-time preview, uniforms, and preset management. ## Requirements - Split-pane: code editor on the left, WebGL preview on the right - Live recompilation as you type (debounced, ~300ms) - Built-in uniforms: u_time, u_resolution, u_mouse - Shader error display with line numbers - At least 5 preset shaders (plasma, raymarching, fractal, water, fire) - Fullscreen preview mode - Copy shareable URL with encoded shader ## Technical Notes Use WebGL2 with a fullscreen quad. The editor can use CodeMirror, Monaco, or a simple textarea with syntax highlighting. ## Bonus Points - Custom uniform inputs (color pickers, sliders) - Screenshot/GIF export - Vertex shader editing alongside fragment shader

# 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 Music Visualizer Build an audio-reactive visual experience using the Web Audio API and Canvas/WebGL. ## Requirements - Accept audio input: microphone or audio file upload - Real-time frequency spectrum analysis using Web Audio API's AnalyserNode - At least 3 visualization modes: waveform, frequency bars, circular spectrum - Visualizations respond to bass, mid, and treble frequencies differently - Color themes (neon, pastel, monochrome, custom) - Fullscreen mode - Smooth 60fps rendering ## Technical Notes Use Web Audio API for analysis and Canvas 2D or WebGL for rendering. Audio file playback via audio element connected to AnalyserNode. ## Bonus Points - Particle systems that react to beats - Beat detection algorithm - Record visualization as video (MediaRecorder API)

# 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 Reading Time Estimator Build a Chrome extension that shows estimated reading time and a progress bar on any article or blog post. ## Requirements - Auto-detect article content on any webpage (look for article, main, or longest text block) - Display a floating badge with estimated reading time (based on ~238 WPM average) - Show a scroll progress bar at the top of the page - Track reading speed over time and adjust estimate to the user's actual pace - "Reader mode" button that strips page to just the article text - Works on major sites: Medium, Dev.to, blogs, news sites ## Technical Notes Use content scripts. For article detection, try multiple selectors and pick the element with the most text content. ## Bonus Points - Text-to-speech button for the article - Bookmark articles for later - Reading history with time spent

# Build a Distraction Blocker Extension Build a Chrome extension that blocks distracting websites on a schedule and tracks your browsing habits. ## Requirements - Blocklist of websites (add/remove sites) - Schedule-based blocking (e.g., block social media 9am-5pm weekdays) - When a blocked site is visited, redirect to a motivational page - Daily usage stats: time spent on each domain - Streak counter for distraction-free days - Quick "focus mode" toggle that blocks all listed sites immediately ## Technical Notes Use chrome.declarativeNetRequest for blocking and chrome.webNavigation for tracking. The motivational page should be bundled with the extension. ## Bonus Points - Pomodoro integration (auto-block during work sessions) - Password protection to prevent disabling - Weekly email-style summary

# Build a Page Annotator Extension Build a Chrome extension that lets users highlight text, add sticky notes, and annotate any webpage. ## Requirements - Text highlight mode: select text on any page and highlight it in yellow, green, or pink - Sticky note mode: click anywhere to place a draggable note - Annotations persist across page visits (stored per URL) - Sidebar panel listing all annotations for the current page - Delete individual annotations or clear all for a page - Export annotations as markdown ## Technical Notes Use content scripts to inject the annotation UI into web pages. Store data in chrome.storage.local keyed by URL. ## Bonus Points - Screenshot annotation (draw on page screenshot) - Share annotations via URL with encoded data - Annotation search across all pages

# 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 Terminal Pomodoro with Music Build a beautiful terminal Pomodoro timer with ASCII art animations and ambient sound triggers. ## Requirements - 25/5/15 minute Pomodoro cycle (work/short break/long break after 4) - Large ASCII art countdown display that updates every second - Color transitions: green during work, blue during break, red in final minute - Play a notification sound when timer completes (use system bell or audio file) - Track session history (today's completed pomodoros) - Keyboard controls: space to pause, r to reset, q to quit ## Technical Notes Use ANSI escape codes for terminal control. For sound, you can use play-sound npm package or system commands. ## Bonus Points - Ambient background sound URL trigger (lo-fi playlist link) - Minimal mode (single-line display) - Stats persistence across sessions

# 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 Organizer CLI Build a command-line tool that automatically sorts files into categorized folders based on file type, date, or custom rules. ## Requirements - Accept a target directory as an argument - Sort files into folders by extension category (Images, Documents, Videos, Audio, Code, Archives, Other) - Support a `--by-date` flag that organizes by year/month instead - Dry-run mode (`--dry-run`) that shows what would happen without moving files - Generate a summary report of what was moved - Handle duplicate filenames gracefully (append number) ## Technical Notes Use Node.js with the `fs` and `path` modules. No external dependencies required for core functionality. ## Bonus Points - Custom rule config file (.organizer.json) - Undo last operation - Watch mode that auto-organizes new files

# 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 Blog Platform Build a full-stack blogging platform with authentication and a rich editor. ## Requirements - User registration and login - Create, edit, publish, and delete blog posts - Rich text or markdown editor for writing posts - Public blog feed showing published posts (newest first) - Individual post pages with clean typography - Author profile pages showing their posts - Like/bookmark posts ## Technical Notes Use Next.js with any auth solution (NextAuth, Clerk, or simple JWT). Database can be SQLite, PostgreSQL, or even file-based for the MVP. ## Bonus Points - Draft/published post states - Tag system with tag-based filtering - Comment system - Reading time estimate - SEO-friendly URLs (slugs)

# Build a Chat Application Build a real-time chat application with multiple rooms. ## Requirements - User can enter a display name to join - Create and join chat rooms - Real-time message sending and receiving - Show who's currently online in each room - Message timestamps - Auto-scroll to newest messages - Responsive layout (works on mobile) ## Technical Notes Use WebSockets, Server-Sent Events, or a real-time service (e.g., Supabase Realtime, Firebase). For a simpler approach, polling with short intervals is acceptable but note the trade-off. ## Bonus Points - Typing indicators ("User is typing...") - Message reactions (emoji) - Direct messages between users - Message history persistence

# 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 GitHub Profile Viewer Build an app that fetches and displays GitHub user profiles and their repositories. ## Requirements - Search for GitHub users by username - Display user profile: avatar, name, bio, followers, following, public repos count - List the user's public repositories sorted by stars - Each repo shows: name, description, language, star count, fork count - Click a repo to open it on GitHub - Handle loading states and errors gracefully (user not found, API rate limit) ## API Use the public GitHub REST API (no auth required for basic endpoints): - `https://api.github.com/users/{username}` - `https://api.github.com/users/{username}/repos` ## Bonus Points - Repo language breakdown chart - Recent activity/contribution display - Compare two users side by side

# Build a Pomodoro Timer Build a Pomodoro productivity timer with task tracking. ## Requirements - 25-minute work timer with 5-minute short breaks - Every 4 pomodoros, a 15-minute long break - Visual countdown display (circular progress or similar) - Start, pause, and reset controls - Audio notification when a timer completes - Track completed pomodoros per day - Associate pomodoros with tasks (optional task name) ## Bonus Points - Customizable timer durations - Daily/weekly stats view - Browser notification support - Ambient background sounds

# 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 an Expense Tracker Build a personal expense tracking application with visualizations. ## Requirements - Add expenses with: amount, category, date, and description - Predefined categories: Food, Transport, Entertainment, Bills, Shopping, Other - View expenses in a sortable, filterable table - Monthly summary showing total spent per category - Simple chart or graph showing spending breakdown (pie chart or bar chart) - Persistent storage (localStorage is acceptable) ## Bonus Points - Budget limits per category with warnings - Date range filtering - Export data as CSV - Income tracking alongside expenses

# 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 Weather Dashboard Build a weather dashboard that displays current conditions and forecasts for any city. ## Requirements - Search for any city by name - Display current temperature, humidity, wind speed, and conditions - Show a 5-day forecast with daily highs and lows - Display weather icons that match current conditions - Save favorite cities for quick access - Responsive design for mobile and desktop ## API Use any free weather API (OpenWeatherMap, WeatherAPI, etc.). You can use a free API key or mock the data. ## Bonus Points - Geolocation to detect user's current city - Animated weather backgrounds - Temperature unit toggle (Celsius/Fahrenheit)

# 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

# Build an AI Code Review Tool Build a tool that uses AI to review pull requests and provide actionable code feedback. ## Requirements - GitHub-style diff viewer - AI-powered review comments on specific lines - Severity levels: info, suggestion, warning, critical - Summary view of all findings - Accept/dismiss individual comments - Export review as markdown

# Build a Real-Time Notification System Build a full-stack notification system with WebSocket delivery, notification preferences, and a slick notification center UI. ## Requirements - WebSocket-based real-time delivery - Notification types: info, warning, success, error - Mark as read/unread - Notification preferences per user - Toast notifications + notification center - Notification history with pagination