Frontend Tech Associate – Take-Home Assessment

Overview

The objective of this assessment is to evaluate your React development skills, understanding of frontend architecture, state management, API integration, user experience, and problem-solving abilities.

You will build a small e-commerce application using React. Backend APIs will be provided separately.

Technology Requirements

• React (latest stable version)
• React Router
• Any state management solution (Context API, Redux Toolkit, Zustand, etc.)
• Responsive design
• Git version control
• REST API integration

You may use any UI framework/library (Material UI, Ant Design, Tailwind CSS, Bootstrap, etc.) or build your own components.

Application Modules

1. Public Product Listing Page

Create a public-facing product page that displays products retrieved from the provided API.

Requirements

• Display product image, name, price, and description.
• Backend will return more than 100 products.
• Implement server-side or API-driven pagination.
• Only 20 products may be displayed per page.
• Users should be able to navigate between pages.
• Show loading and error states.
• Add products to cart.

2. Shopping Cart

Users should be able to manage products in their shopping cart.

Requirements

• Add products to cart.
• Update product quantities.
• Remove products from cart.
• Display cart subtotal.
• Display total number of items.
• Place an order using the provided API.

Persistence Requirement

Cart contents must survive browser refreshes and page reloads.

Example:

• User adds 3 products.
• User refreshes the page.
• Cart should still contain those 3 products.

3. Returning Customer Identification

The system should identify whether a visitor is a returning customer.

Requirements

• A returning customer is defined as a user who has successfully placed an order previously.
• You may not request any identifying information from the user for this purpose.
• The solution must work automatically on future visits.
• Display a visual indicator showing whether the customer is:
  • New Customer
  • Returning Customer

Notes

You are free to decide the frontend implementation approach.

4. Authentication

Implement authentication using the provided API.

Requirements

• Login page
• Authentication handling
• Protected admin routes
• Logout functionality

5. Admin Product Management

Authenticated administrators should be able to manage products.

Requirements

• View products
• Create products
• Update products
• Delete products

Suggested UI

• Product table or grid
• Product form
• Delete confirmation dialog

6. Admin Order Management

Authenticated administrators should be able to view orders placed by customers.

Requirements

• View list of orders
• View order details
• Display purchased products
• Display quantities
• Display order totals
• Display customer information returned by the API

Expected Pages

Public Pages

• /products
• /cart
• /login

Admin Pages

• /admin/products
• /admin/orders

Evaluation Criteria

Candidates will be evaluated on:

React Fundamentals

• Component design
• Hooks usage
• Routing
• State management

Code Quality

• Project structure
• Reusability
• Maintainability
• Readability

API Integration

• API handling
• Error handling
• Loading states

User Experience

• Responsive design
• Navigation
• Feedback messages

Data Persistence

• Cart persistence across reloads
• Returning customer identification

Security & Best Practices

• Protected routes
• Authentication handling
• Clean architecture

Deliverables

Submit the following:

1. Git repository URL (GitHub/GitLab/Bitbucket)
2. README.md containing:
   • Setup instructions
   • Project architecture overview
   • Assumptions made
   • Additional features implemented
3. Optional:
   • Hosted demo URL
   • Demo video walkthrough

Time Expectation

The assessment is intentionally scoped to be completed within approximately 6–10 hours.

Focus on:

• Clean architecture
• Correct implementation
• User experience
• Code quality

rather than excessive feature development.

APIs

All required APIs, authentication endpoints, and API documentation will be provided in the below link:

Swagger Link: /api-docs

Default Admin User:

• ADMIN_EMAIL=[email protected]
• ADMIN_PASSWORD=Welcome@123