By means of this application you can manage bicycle accounting for your bicycle booking services.

You can test deployed application by the next link.

• bicycle name;
• bicycle type;
• color of the bicycle;
• bicycle price (by default in UAH);
• bicycle unique id;
• short description of the bicycle.

• all aforementioned fields are required;
• minimum string length for name, type, color and description inputs is 5 characters;
• bicycle id should be unique and don’t coincide with already added bicycles to the list;
• if the price value has more than two symbols after the comma - it will be automatically truncated for a proper price representation.

All bicycles you have added will be displayed at the main application panel at the left side of its window with provided data.

• change bicycle status (available, busy, unavailable);
• remove bicycle from the list (be careful with it, you can’t retrieve deleted data).

• total amount of bikes;
• available and booked bikes respectively;
• average bike cost.

This project was bootstrapped with Create React App.

You can learn more in the Create React App documentation.

For the form validation have been chosen react-final-form state management which is considered one of the better solutions in this field. To modify or add validators check /src/components/Fields/validators directory.

You can add composed validators directly to each Field component in the /src/components/BicycleAdd/BicycleAdd.jsx file in validate attribute.

To modify header name simply provide a new “headerText” prop attribute for the Header component in the App.js.

To modify author name do almost the same: provide a new “developerName” prop attribute for the Footer component in the App.js.

By default the application stores data locally by means of the localForage library. It can be accessible after browser restart or OS reload. But this storage is bound to the origin (domain/protocol/port triplet). That is, different protocols or subdomains infer different storage objects, they can’t access data from each other.

To embed a proper backed solution just modify API methods in the /src/API/localForage.js file.