🏁 Async Race

A dynamic single-page racing game built with TypeScript featuring car management and real-time race animations. Includes comprehensive Garage for creating, editing, and deleting cars with color customization, plus Winners page tracking race statistics. Features asynchronous racing with smooth animations, responsive design, and complete CRUD operations via RESTful API. Demonstrates modern web development practices with modular architecture and engaging user interactions. Uses mock API server hosted on Render.com's free tier which may experience cold starts.

✨ Features

🚗 Garage Management

• CRUD Operations: Create, read, update, and delete cars with custom names and colors
• Color Customization: RGB color picker with real-time car preview
• Bulk Generation: Generate 100 random cars instantly for testing
• Pagination: Navigate through your car collection (7 cars per page)
• Professional Loader: Elegant spinning gear loader with racing-themed messaging that handles cold starts gracefully

🏎️ Racing System

• Individual Control: Start and stop engines for each car independently
• Race Mode: Start races for all cars on the current page simultaneously
• Real-time Animations: Smooth car movements with adaptive speeds
• Winner Detection: Automatic winner announcement with race statistics

🏆 Winners Tracking

• Statistics Dashboard: View winning cars with their performance data
• Sorting Options: Sort by number of wins or best lap times
• Pagination: Navigate through winners efficiently
• Performance Metrics: Track wins count and best times for each car

📱 Technical Features

• Responsive Design: Works seamlessly on devices as small as 500px
• TypeScript: Fully typed codebase with strict type checking
• Modular Architecture: Clean separation of concerns and maintainable code
• API Integration: RESTful API communication with proper error handling
• UX Optimization: Custom loading states with spinning animations improve user experience during API calls

🚀 Getting Started

Live Demo

🌐 Play Async Race

Local Development

1. Clone the repository

   git clone https://github.com/ilonaGold/async-race.git
   cd async-race

2. Install dependencies

   npm install

3. Start development server

   npm start

4. Build for production

   npm run build

5. Deploy to GitHub Pages

   npm run deploy

🔧 API Server

This project uses a mock API server for demonstration purposes.

• API Repository: https://github.com/mikhama/async-race-api
• Hosted Server: https://async-race-api-fvw6.onrender.com
• Note: The server is hosted on Render.com's free tier and may experience cold starts

API Endpoints

• GET /garage - Get all cars with pagination
• POST /garage - Create a new car
• PUT /garage/:id - Update car details
• DELETE /garage/:id - Delete a car
• PATCH /engine - Control car engine (start/stop/drive)
• GET /winners - Get winners with sorting and pagination
• POST /winners - Create winner record
• PUT /winners/:id - Update winner statistics

🛠️ Tech Stack

• Frontend: TypeScript, HTML5, CSS3
• Build Tool: Webpack
• Styling: Custom CSS with CSS Variables
• API: RESTful API with JSON Server
• Hosting: GitHub Pages (Frontend), Render.com (API)
• Code Quality: ESLint, Prettier

🎮 How to Play

1. Create Cars: Use the form to add new cars with custom names and colors
2. Manage Fleet: Edit existing cars or delete unwanted ones
3. Start Engines: Click the start button to begin engine warm-up
4. Race: Use "Race All" to start a competition between all cars on the page
5. Track Winners: View race results and statistics in the Winners section

🏗️ Architecture

src/
├── api/           # API communication layer
├── components/    # Reusable UI components
├── styles/        # CSS styles and themes
├── types/         # TypeScript type definitions
├── views/         # Main application views
└── utils/         # Utility functions

🔄 Development Process

This project follows modern web development practices:

• Modular Design: Each component has a single responsibility
• Type Safety: Full TypeScript coverage with strict typing
• Error Handling: Comprehensive error handling for API calls
• Responsive Layout: Responsive design optimized for all screen sizes
• Clean Code: Functions limited to 40 lines, meaningful variable names

📋 Requirements Fulfilled

• ✅ Pure TypeScript implementation (no frameworks)
• ✅ Complete CRUD operations for cars
• ✅ Real-time race animations
• ✅ Winner tracking and statistics
• ✅ Responsive design (min-width: 500px)
• ✅ Pagination for both views
• ✅ Modular architecture
• ✅ ESLint configuration compliance

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Original server mock by mikhama
• Racing car SVG designs and animations
• Color picker inspiration from various web resources

---

🎯 Ready to race? Start your engines!