Description

Tamboon React is a code challenge for frontend developer.

Project Setup

# install dependencies
npm install

How to run it

# serve at localhost:3000
npm run client

# start json-server at localhost:3001
npm run server

Tests

npm run test

Summary

Tamboon React is a donations website made using React JS, styled-components and json-server. By using Tamboon React users can make donations to different organizations.

This website features:

• Responsive design for multiples devices.
• Save the total of amount of donations made for the user to the server.
• User friendly interface to indicate the user when a donation is successful or not.

Coding Features:

• Create reusable styled components.
• Comment important parts of code.
• Access this through arrow functions.
• Write helpers to assign/update properties to the charities list.
• Handle errors when making requests to the server.

Challenge Scenario

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 ✨

Mission

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).

Bonus

• Supporting different screen sizes (responsive).
• Write helpers or components unit tests with jest.