This is a Next.js project bootstrapped with create-next-app.
For testing Testing Library and JEST was used.
-
Prerequisites: Node.js and npm.
-
Clone the repository to your local machine.
-
Run the command below to install node modules:
npm install- Build the solution with the following command:
npm run build- Run unit test with:
npm run test- Then, run the development server:
npm run dev-
Open http://localhost:3000 with your browser to see the result.
-
You can interact with the solution.
The data is not registered instantly with the POST API calls.
You must wait (approximately a half day, maybe more) to appear in the database and after that can be the data pulled with the ".../spendings/" call.
Also the data can be accessed instantly via specifing the id like ".../spendings/398/"
I hope I did not make mistake in the REST calls, causing this issue.
I double checked on the web framework, also there the newest data is not present.
The error handling is done by the default input system of the input HTML elements.
If the form is not suitable (well it is ugly), in that case it can be upgraded by React in a few steps:
- Add state variables to the component which needs better errors.
- Overwrite default error handling in the specific elements, with own functions.
- Connect the state with the new error handling.
- Add cinditional rendering to the error lables / elements.
Because this task was "smaller" one, I did not set up a React Redux store.
I used callbacks instead.
The data flows down in the DOM (from root to leaves), but even in this task there were cases where the data should flow upwards also in the tree (to notify other components).
In this case to setup Redux Store would make sense to reduce data passing through properties.
If the task was a little bit bigger and more complex, I would definitely set up a Redux store for it.
I did not used any other library like Material UI or its descendants.
After the project, I feel I should have used them to spare some time in development.
Next time I will definitely use some UI library for faster prototyping, even use the framework redefinitions for existing HTML elements from React (like Button, etc.).
I would like to add more animations, but the scope got a little bit bigger, than I could manage.
Also if there would be animations I would leave out Tailwind from the project.
It is good for prototyping, but in my opinion bigger projects does not scale well (in readability and complexity adds more layers).
I intend to use CSS Modules if there should be more animations, because it can be a better modular solution.
I hope you will like my solution!
Have a great day!
Kornél