mirror of https://github.com/codecrafters-io/build-your-own-x synced 2026-07-02 16:59:25 +00:00

Cursor Agent 4bec468eb1 feat: Add interactive web app for tutorials

This commit introduces a fully interactive web application for exploring the "Build Your Own X" tutorials. It includes features like search, filtering, random selection, and a modern UI.

Co-authored-by: sahiixofficial <sahiixofficial@gmail.com>

2025-10-02 16:25:09 +00:00

3.7 KiB

Raw Blame History

🛠️ Build Your Own X - Interactive Explorer

An interactive web application to explore 350+ tutorials for building your favorite technologies from scratch!

✨ Features

🎨 Beautiful Modern UI - Gradient design with smooth animations
🔍 Powerful Search - Search by technology, language, or tutorial name
🎲 Surprise Me - Get a random tutorial recommendation
📊 Live Statistics - See tutorial counts and filtered results in real-time
⌨️ Keyboard Shortcuts - Navigate efficiently with hotkeys
📱 Responsive Design - Works great on desktop and mobile
💾 All Data Integrated - 359 tutorials across 27 categories, all embedded in the app

🚀 Quick Start

Option 1: Python Server (Recommended)

python3 server.py

Then open your browser to: http://localhost:8000

Option 2: Any HTTP Server

# Using Python's built-in server
python3 -m http.server 8000

# Using Node.js http-server
npx http-server

# Using PHP
php -S localhost:8000

⌨️ Keyboard Shortcuts

Ctrl+K (or Cmd+K on Mac) - Focus search bar
Ctrl+R (or Cmd+R on Mac) - Random tutorial (Surprise Me!)
Escape - Close modal

📚 Categories Included

The app includes tutorials for building:

🎨 3D Renderer
🥽 Augmented Reality
📡 BitTorrent Client
⛓️ Blockchain / Cryptocurrency
🤖 Bot
⌨️ Command-Line Tool
💾 Database
🐳 Docker
🛒 E-commerce / Marketplace
💻 Emulator / Virtual Machine
⚛️ Front-end Framework / Library
🎮 Game
📚 Git
🌐 Network Stack
🧠 Neural Network
🖥️ Operating System
⚡ Physics Engine
📝 Programming Language
🔍 Regex Engine
🔎 Search Engine
🐚 Shell
📄 Template Engine
✏️ Text Editor
👁️ Visual Recognition System
🧊 Voxel Engine
🌍 Web Browser
🖧 Web Server
...and more!

🎯 How to Use

Browse - Scroll through categories to see all available tutorials
Search - Use the search bar to find tutorials by keyword
Click - Click any tutorial card to see detailed information
Learn - Click "Open Tutorial" to start learning!
Explore - Use "Surprise Me!" to discover something new

📊 Statistics

359 Tutorials across 27 Categories
40+ Programming Languages and technologies
Includes both written tutorials and video courses

🛠️ Tech Stack

Pure HTML, CSS, and JavaScript (no frameworks!)
Responsive CSS Grid and Flexbox layouts
JSON data store
Python HTTP server

🎨 Design Features

Gradient backgrounds
Smooth animations and transitions
Interactive cards with hover effects
Modal dialogs for detailed views
Color-coded categories
Collapsible sections
Real-time filtering

📝 Files

index.html - Main HTML structure
style.css - All styling and animations
app.js - Application logic and interactivity
tutorials_data.json - Complete tutorial database (auto-generated)
parse_readme.py - Script to extract data from README.md
server.py - Simple HTTP server

💡 Tips

Use the search to filter by programming language (e.g., "Python", "JavaScript", "Rust")
Use the search to find specific technologies (e.g., "blockchain", "game", "database")
Click category headers to collapse/expand them
Try "Surprise Me!" when you're not sure what to learn next!

🌟 About

This interactive explorer was built to make it easier to navigate the amazing "Build Your Own X" collection of tutorials. All credit for the original content goes to the CodeCrafters team and contributors.

"What I cannot create, I do not understand" — Richard Feynman

Happy building! 🚀

3.7 KiB Raw Blame History