Before proceeding, kindly review the following details prior to cloning the repository.
Objective: Screen development & Integration, as per the below details.
Design Figma URL - Figma Link
Design consists of two pages
- Signup Page
- Product Page
Tasks
Task 1: Setup
1. Fork the repository.
2. Install all necessary dependencies.
3. Run the application to ensure everything is set up correctly.
Task 2: Signup page
1. Develop a signup page incorporating essential components.
2. Implement form state management functionalities.
3. Utilize the `formik` package for form validation.
***Note: Integration with API is not required ***
Task 3: Products page
1. Construct a product page to display all products utilizing the provided API.
2. Implement category filters allowing users to refine product listings based on selected categories.
Bonus Task (Optional):
1. Implement unit tests for at least one component using the Jest and React Testing Library (Or any library).
2. Add typescript support and make sure components are typed appropriately.
3. Mobile responsive for all the pages.
API Details
Products API - GET - https://fakestoreapi.com/products
Sample Response
{
"id": 1,
"title": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
"price": 109.95,
"description": "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
"category": "men's clothing",
"image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
"rating": {
"rate": 3.9,
"count": 120
}
},
Please be aware: Direct git push to this repository is restricted. Only pull requests (PRs) from forked repositories are accepted.
Additional Information:: Utilization of frontend frameworks such as Next.js, Tailwind CSS, Formik, etc., is encouraged.
Upon completion of the development, kindly submit a pull request from your forked repository. Your work will undergo assessment based on:
- Adherence to Design Specifications
- Coding Standards Compliance
- Code Readability & Reusability
- Code Quality and Conciseness
This repository serves the purpose of facilitating the interview process @Blocktheory. Only candidates referred for the interview process are granted access.
Happy Coding!!!