hassanbadru / homecook-dev-challenge

HomeCook - Frontend Dev Challenge (React)

Thank you for your interest in HomeCook! For this task, please use ReactJS to create a page that displays a list of kitchens and performs basic CRUD operations using the provided API endpoints. Your work should demonstrate component reusability, context management & API handling.

Please add your code to Github (or similar) and send the repo link via email to [email protected]

Specification

Your frontend solution must be able to achieve the following:

• When a user clicks on the Info icon, it should display more information about that kitchen
• When a user clicks on the Edit icon, it should allow update to information about that kitchen
• When a user clicks on the Add New Kitchen button, it should allow user to add a new kitchen to the list
• When a user types in a kitchen id in the search box, the list only shows the kitchen whose id is typed in
• When a user clicks on the Delete icon, it should display a deletion warning and remove kitchen

Additional Requirements (Bonus)

• Sort kitchens by name, id and/or status
• Allow select all to delete all kitchens at once
• Use react router to navigate to a different view
• Make web app mobile-responsive
• Describe any future possible improvements you would implement

Getting Started

To install and run:

1. Clone the repo

git clone https://github.com/hassanbadru/homecook-dev-challenge.git

2. Go to homecook-dev-challenge folder

cd homecook-dev-challenge

3. In the project root directory (i.e. /homecook-dev-challenge) of the repo, install NPM packages

npm install

4. Then, you can run:

npm start

5. Open http://localhost:3000 to view it in the browser.

API Endpoints

The following 5 endpoints have been created for this exercise. The values for api_id and api_stage would be provided accordingly. (CRUD API handling)

1. Fetch all kitchens (GET)

   https://{api_id}.execute-api.us-east-1.amazonaws.com/{api_stage}/fetch

2. Fetch kitchen by id (GET)

   https://{api_id}.execute-api.us-east-1.amazonaws.com/{api_stage}/fetch/{id}

3. Add new kitchen (POST)

   https://{api_id}.execute-api.us-east-1.amazonaws.com/{api_stage}/create

   Request Body Schema { name: string, status: string, location: string, cost: string }

4. Update existing kitchen (PUT)

   https://{api_id}.execute-api.us-east-1.amazonaws.com/{api_stage}/update/{id}

   Request Body Schema { name: string, status: string, location: string, cost: string }

5. Delete existing kitchen (DELETE)

   https://{api_id}.execute-api.us-east-1.amazonaws.com/{api_stage}/remove/{id}

Test GET Request to fetch list of all kitchens: https://7aqlss9ih7.execute-api.us-east-1.amazonaws.com/dev/fetch

Sample Screenshots

1. Fetch All Kitchens

2. Add New Kitchen

3. View Kitchen Details

4. Delete Kitchen

Helpful tips & notes

1. Adapt your approach to Brad Frost's Atomic Design (https://atomicdesign.bradfrost.com/chapter-2/)
2. Take advantage of Material UI components & Icons (https://mui.com/components/)
3. An utils module for (Kitchen Statuses) has been provided
4. A Postman collection (json file) has been included (to help with testing APIs independently)
5. Feel free to reach out if you have any question or need better clarity

Contact

Hassan Badru - [email protected]
Tayana Harrison - [email protected]