This is a Take Home assessment for candidates applying for a Sr. frontend developer position at Tap company. It contains two sections: "Frontend", "Follow-up" which together include a series of tests involving HTML, CSS, JavaScript and reactJs.

Feel free to solve these questions however you see fit, using whatever coding style or third-party libraries (material-ui/ant-design/...) you think are appropriate.

To start the test, simply clone this repo and make your edits locally.

For the frontend portion of the test, use the /frontend folder. There are 6 features we'd like to add:

1. Create a main page includes two section:

• user balance which is mean the current balance of the user and to get the user balance you can call GET: http:localhost:8000/api/balance
• Button which is named Recharge/Add Balance and this button should fire modal/popup if the user click on it

2. The modal/popup that fired by the button should include payment card component like Card Name, Card number, Card expiry date, Card CVV and you finally a button named Charge 10$.

• Hint: You need to validate the credit card components and feel free to use any third-party libs.
• Hint: You need to name the button like this Charge 10$ cuz the amount should be fixed and the user can't add his amount.

3. Validate the card component and if the user enter a valid data enable the Charge 10$ button

• Hint: Show an error under the invalid card component field

4. You need to Submit using this api POST:http:localhost:8000/api/balance
   body:

   {
    amount:10
   }
   
   

• Hint: After getting a success response show a success message or success image and wait 20s and close the modal/popup.
• Hint: After closing modal/popup the user should see his new balance in the real-time without refreshing the page .

5. Use state management(Mobx/Redux) to handle the data in your app.
6. Use Typescript with webpack or use create-react-app.

NOTE: Please make the frontend app be served on port :3000.
NOTE: to run the backend you can run docker-compose up --build or go to the server folder add run npm i && npm run start.

Feel free to structure the code however you prefer and use third-party libraries at your discretion.

Do not spend too much time on making it beautiful. Basic aesthetics are welcome, but we are not grading your design skills here.

Answer the questions in the FOLLOW-UP.md file.

The test contains a basic docker-compose.yml file. It uses the latest official NodeJS Docker image and creates two containers - one for backend and one for frontend.

The respective folder is mounted in /app directory inside the container.

It isn't a requirement to use it, but may be convenient.

NOTE: We WILL run your code inside these containers.

Once you've completed the test, please compress your files (via zip or tar) and and upload it on your drive then share the link with us over the mail OR push it to your public repo and share the link with us.

Do not include node_modules or .git in your submission

Once we receive it, a member of our team will review and we'll get back to you as soon as possible.

Thanks!