Prove your skills

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