Prove your skills

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

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

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