mirror of
https://github.com/codecrafters-io/build-your-own-x
synced 2026-07-03 01:09:25 +00:00
4bec468eb1
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>
130 lines
3.7 KiB
Markdown
130 lines
3.7 KiB
Markdown
# 🛠️ 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! 🚀
|