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

```bash
python3 server.py
```

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

### Option 2: Any HTTP Server

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

1. **Browse** - Scroll through categories to see all available tutorials
2. **Search** - Use the search bar to find tutorials by keyword
3. **Click** - Click any tutorial card to see detailed information
4. **Learn** - Click "Open Tutorial" to start learning!
5. **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](https://github.com/codecrafters-io/build-your-own-x) team and contributors.

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

Happy building! 🚀