This is my code test work for Patient Zero.

This project is a cheese seller page, so the customer can buy the cheese and put it into a cart then checkout.

React, Redux, Redux-saga, Typescript, Material-UI, Styled Component, Cypress

1. Add a dialog for each cheese card, so the user can see the details of each cheese.
2. Add a checkout button in the cart slider, so user can send the order to the backend after they click the button
3. Add a purchase history dialog if the user click the recent purchase button
4. Build UI Test when for #2, the test will automatically add cheeses to the cart and click the checkout button. It will also check the button is disabled if the cart is empty.

1. The UI is simple and need to be improved makes it looks better.
2. The backend don't have a real database, curretly the orders will be saved in memory.
3. The purchase record only save the ID of each cheese, so the user can only see the ID number of the cheese they have purchased before This can be solved if we have a real database, so the cheeses details can be populated by the ID in the database layer.
4. The application working fine in Google Chrome but not looks good in other browser.
5. The application don't have responsive design.

In the project directory, you can run:

Installs package dependencies (node v14.15.0)

Builds and runs the app in the development mode.
The browser will be automatically launched under http://localhost:9000. The server backend will start listening on http://localhost:3000

I have 2 test for the purchase button:

1. Send order to the backend server successful Check the order is send to the order successfully
2. does not allow users to send empty order Check the order cannot be send if it is empty

npm install
npm test

React Material UI