Tamboon React is a code challenge for frontend developer.
Once upon a time.. nope!
So here, you have been temporarily hired by Omise and assigned to work on the charity donation project which the previously assigned front-end developer and designer got the urgent matters to solve, so they will not be able to finish the project on time..
Fortunately, the API server is already done. You will need to grab on the requirements and complete the project while ensuring the application to have great engineering and well-design โจ
Well, grap your guns, stock up your food and bring down your armor. We gonna need it for tonight!
Here are the tasks you must complete:
- Complete the application according to the design (image above).
- Complete these features that are not in the design (you have freedom to design and position to display).
- Display all donation amount.
- Display a message when paid.
- Make the donation feature works correctly.
- Amount in all donations should be displayed correctly despite users close and come back later.
- Database (db.json) should have the new valid data when paid.
- Refactor the code to be more readable and enhance reusability.
- Use styled-component, JSS or CSS, for styling part.
- Write a nice commit message and order it well.
- Display well in most modern browser (Google Chrome, Safari, Firefox).
- Supporting different screen sizes (responsive).
- Write helpers or components unit tests with jest.
Desire to win the war? Well, to make it a little more fun, please remember that
You cannot:
- Change existing behaviors.
- Change the API server.
- Change from JavaScript/TypeScript to other languages.
In the other hand, feel free to:
- Improve the design to have better UI and UX.
- Re-organize the codebase.
- Create new modules/methods/components.
- Modify existing code.
- Add new packages.
- Update
webpack
config. - Change language from JavaScript to TypeScript.
- Take reasonable time to complete the challenge, no need to rush.
- Edit
README.md
to add documentation. What have you done or how to run or test your app?
Note: You can see design inside folder resources
.
You can push the project to your Github then share the link with us, or you can zip the project and send it back to us as well. Your commit message must communicate clearly what has been done in each commit.
If you notice more bugs in the original implementation you can add fixes for those as well. You won't be penalized if you don't. However we ask you not to add more features than the one given in the mission list.
Let's rock! ๐ค
- Use react-query to manage server state
- Use style-components for styling
- Use axios for api call
- Use react-hot-toast for handling toast message
- Create Tamboon component as App layout
- Create Card component for show charity's details
- Add donation feature
- Show total donation from database