test.md

React.js software engineer practical test

In this practical test, we build a simple CRUD application called 🍔 The Fridge. We use this application to see what we have in our fridge at a glance and when do they expire.

Please read the instructions properly before you proceed.

⚙️ Tech Stack to be used

• React.js (Latest)
• SASS Stylesheets (scss)
• Axios http client

---

⚔️ Objectives

Each objective will be evaluated individually. Please use the given API endpoints below.

1️⃣ Objective One

Develop the UI following the given 🎨 Figma design, using react functional components, hooks and scss stylesheets for styles. (Please DO NOT use any third party component libraries or css libraries. write custom code)

https://www.figma.com/file/IPXZBpnc20QUbGcuiv1K9Z/TheFridge-React-Practical-Test

2️⃣ Objective Two

1. List the items with details as pointed in the Figma design, once data completely fetched from API.
2. Show a pre-loading message/spinner while fetching the List items from API.
3. Show Total items count by counting the list items.
4. Show Expiring soon label if Expiry date is due in one month.
5. Show Expired label if Expiry date is passed.
6. Show Healthy label if Expiry date is NOT due in less than one month.

3️⃣ Objective Three

1. Add form functionality to add a New item to the fridge.
2. Each added item should show on the items list without a page refresh.
3. Add a date picker to the Expiry date input field. (You can use ANY datepicker)

---

🚥 API Endpoints

▶︎ Get all items

Request

GET https://thefridge-api.karapincha.io/fridge

▶︎ Create a new item

Request

POST https://thefridge-api.karapincha.io/fridge

Body

{
    "title": "Lemon",
    "expiry": "20/11/2040"
}

---

🔑 Evaluating criteria

• Follow instructions
• Attention to design details
• Use of React best practices
• Use of SCSS best practices
• Code cleanliness and readability
• Your coding style and practices

👌 Bonus points if

• Write SCSS using BEM or your preferred style structure
• Better folder structure
• Unit tests

💾 Submission

Once you are completed;

1. Please commit the codebase to a Github repository.
2. Include instructions to run the app locally in the readme

And email us the repository link.

Good luck! 🥂