Skip to content

Latest commit

 

History

History

async-race

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
functional-requirements.md
functional-requirements.md
 
 
non-functional-requirements.md
non-functional-requirements.md
 
 

README.md

Task "Async Race"

Your customer has an idea to spend his money. He has hired some engineers who installed radio-controlled equipment 📻 in real cars 🚗, to be precise, all of his collection of cars. He is eager to create a kind of drag-racing competition in order to discover which car is the fastest.

Each radio controller has an HTTP-compatible interface. It lets you start or stop the engine of the car and, of course, enable "driving" mode.

Your task is to create a SPA to manage the collection of cars, operate their engines, and show race statistics.

Previously, development of this application had been started by a Belarusian developer named Dzmitry (and was almost finished). However, his laptop 💻 was stolen by bad guys. Unfortunately, we don't have any sources of UI 😞. Fortunately, he had recorded some demo (RU) and demo (EN) beforehand. Additionally, he had stored the server mock in his repo.

We found in the latest news that a new company called "The Fast and the Furious" announced the release of a new product that will really blow people's minds. There isn't a lot of information about this product. All we know is that it's about "easier car management than you can imagine." It's exactly what our thieves 🦹 are up to. They're going to release their product in two weeks. But we can't allow them to do that. We must be first.

What are you waiting for? Let's start coding!

🎯 Objectives

  • Create a Single Page Application (SPA): Manage a collection of cars, operate their engines, and showcase race statistics in an engaging, interactive SPA.
  • Revive the Project: Drawing inspiration from a demo video and a server mock, reconstruct the UI and breathe life back into this ambitious project.
  • Outpace the Competition: Implement the project with speed and efficiency, ensuring we launch before our rivals, showcasing our innovative solution to car management and racing competitions.

🚗 Functional Requirements

Basic Structure

  • Two main views: "Garage" and "Winners", each with their name, page number, and a count of items in the database.
  • Persistent view state between switches, maintaining user input and pagination.

Garage View

  • CRUD operations for cars with "name" and "color" attributes.
  • Color selection from an RGB palette with a preview of the car in the chosen color.
  • Pagination to display cars (7 per page) and a feature to generate 100 random cars at once.

Car Animation

  • Start/stop engine buttons with corresponding animations and handling of engine states.
  • Adaptive animations that work on screens as small as 500px.

Race Animation

  • A button to start a race for all cars on the current page.
  • A reset button to return all cars to their starting positions.
  • Display the winner's name upon race completion.

Winners View

  • Display winning cars with their image, name, number of wins, and best time.
  • Pagination and sorting capabilities by wins and best times.

📜 Non-functional Requirements

  • No Libraries/Frameworks: Pure JavaScript only, optional use of Bootstrap for CSS.
  • TypeScript Mandatory: Strong typing throughout, with no use of "any".
  • Modular Architecture: Clear separation of concerns between API interaction, UI rendering, and state management.
  • SPA Implementation: Entire content generated via JavaScript, utilizing Webpack or similar for bundling.
  • Code Quality: Adherence to Airbnb's ESLint configuration, with functions limited to 40 lines and avoidance of magic numbers/strings.

🛠️ Technical Implementation

  • Implement CRUD operations for cars using the provided server mock.
  • Design UI elements for car management and race controls.
  • Utilize fetch for server communication, and handle promises for asynchronous tasks.
  • Create animations for car movements using JavaScript and CSS.
  • Ensure responsiveness and compatibility across different devices and browsers.

📚 Resources

🔄 Evaluation

  • Your work will be evaluated based on functional and non-functional requirements.
  • The UI must be deployed for review, with a server instance running for functionality tests.
  • Pay close attention to details in the implementation, as bugs and deviations from the requirements can impact your score.

Requirements to commits, PR and repo

Stage 2 requirements NB: for mentor's check - submit link to PR, for cross-check - submit link to deploy.

Cross-check:

  • Max score: 215.
  • UI should be deployed to gh-pages, netlify or some similar service and the link shared via RS App.
  • Reviewer should clone repo with a server and keep the server running
  • during functionality review.
  • Task should be scored in accordance with Functional requirements. You can find score
  • points near each requirement.
  • If some bugs were found then the next fees should be withdrawn:
    • (-30) Major bag (implemented functionality works, but after some manipulations it breaks down, and there are
    • some unexpected errors in the browsers' console).
    • (-10) Minor bag (implemented functionality works, but after some manipulations it behavior changes, like button
    • does not become enabled after changing some state, but there are not any errors in the browser's console).
  • Note: When you push the "start engine button" and then the "stop engine button" or the "start race button" and
  • "reset race button" and repeating this operation again and again as a mad man sometimes you can see an error with the
  • status codes "404" or "429". Officially it is not a bug.

Mentor's review

  • Max score: 190.
  • Task should be scored in accordance with Non-functional requirements. You can find
  • score points near each requirement.