Frontend assignment. It serves as a user interface which collects project/donation data from an external API and allows user to allocate donations and complete projects once they meet their individual funding target. The implementation process was relatively straightforward as doing the assignment through the text order seemed to automatically cover a hefty amount of edge cases and traps related to this project. The data had some limitations though: In order to allow 1 donor to have 1 sum multiple times, use of uuid library was necessary. Additionally, a notification component was added to tell the user whether the attempt to complete / allocate funds to a project was successful or not.
As the scope of the project is relatively small, there are some architecture - related things to be updated if additional requirements are required to be implemented. State management is currently done with built-in combination of useState and useContext hooks which should be replaced either by something like redux, or alternatively a library such as react-query if state management is mostly handling data from external sources.
Additional improvement suggestions include, but are not limited to the following list:
- Introducing Typescript
- Unit/integration tests
- Ref - objects instead of setTimeout - function for more consistent notification visibility
The very next thing that should be implemented is probably a form for adding additional funds as the total amount is completely reliant on the API.
You need node to run this project.
Use the package manager npm to install dependencies.
npm install
The following command will run the application
npm start
Run eslint for static analysis with the command below
npm run lint
Anton Moroz