LIVE URL ----- https://async-race-fast-furios.vercel.app/
Implement two primary views: "Garage" and "Winners".
The "Garage" view must display its name, the current page number, and the total number of cars in the database (how many car user has in his garage).
The "Winners" view should similarly display its name, the current page number, and the total count of records in the database (how many records the winners table contains).
Ensure the view state remains consistent when navigating between views. This includes preserving page numbers and input states. For example, page number shouldn't be reset, input controls should contain that they contained before switching, etc.
Enable users to create, update, and delete cars, and display the list of cars. A car has two attributes: "name" and "color". For "delete"-operation car should be deleted from "garage" table as well as from "winners".
Allow color selection from an RGB palette (like here), displaying the selected color on the car's image along with its name.
Provide buttons near each car's image for updating its attributes or deleting it.
Implement pagination for the "Garage" view, displaying 7 cars per page.
There should be a button to create random cars (100 cars per click). Name should be assembled from two random parts, for example "Tesla" + "Model S", or "Ford" + "Mustang" (At least 10 different names for each part). Color should be also generated randomly.
Place start/stop engine buttons near each car's image.
User clicks the engine start button -> UI awaits car's velocity response -> animate the car and sends another request to drive. If the API returns a 500 error, the car animation should stop.
User clicks the engine stop button -> UI awaits response to stop the engine -> the car returns to its initial position.
The start engine button should be disabled if the car is already in driving mode, and the stop engine button should be disabled when the car is in its initial position.
Ensure car animations are fluid and responsive on screens as small as 500px.
Implement a button to start the race for all cars on the current page.
Create a button to reset the race, returning all cars to their starting positions.
After some car finishes first, the user should see a message containing the car's name that shows which one has won.
After some car wins, it should be displayed in the "Winners view" table.
Implement pagination for the "Winners" view, with 10 winners per page.
The table should include columns for the car's №, image, name, number of wins, and best time in seconds. If the same car wins more than once, the number of wins should be incremented while the best time should be saved only if it's better than the stored one.
Allow users to sort the table by the number of wins and best time, in ascending or descending order.
The application should be clearly divided into logical modules or layers, such as API interaction, UI rendering, and state management. Consultation with a mentor on the architecture before implementation is advised.
All HTML content must be dynamically generated using JavaScript, with the tag containing only a single <script> tag.
The application must be a Single Page Application (SPA) using either React v18+ or Angular v17+. All content must be generated using TypeScript with strict and noImplicitAny settings enabled in tsconfig.json, ensuring a seamless user experience without page reloads during navigation.
Implement Webpack or another bundling tool to compile the project into a minimal set of files, ideally one HTML file, one JS file, and one CSS file. Ensure that the configuration enforces TypeScript strict type checking.
Code must adhere to the Airbnb ESLint configuration to maintain code quality, as outlined in the Airbnb style guide. Specific rules may be adjusted only with mentor approval, and there should be no ESLint errors or warnings.
Code should be organized into small, clearly named functions with specific purposes. Each function should not exceed 40 lines, reflecting strong typing and avoiding the use of magic numbers or strings.
Minimize code duplication and maintain readability by avoiding the use of magic numbers or strings throughout the codebase.
Prettier is correctly set up with two scripts in package.json: format for auto-formatting and ci:format for checking issues.
ESLint is configured with the Airbnb style guide. A lint script in package.json runs ESLint checks. Configuration files should reflect strict TypeScript settings as per tsconfig.json.