Scribd
Upload
46 views4 pages

Frontend Assignment - Whatbytes

The document outlines the requirements for a frontend assignment focused on creating a product listing website using Next.js. It includes specifications for the home page, product detail page, and an optional cart page, detailing layout, features, and logic to implement. Additionally, it emphasizes the use of Tailwind CSS for styling and mandates specific rules for code management and deployment.

Uploaded by

Akshat Pratap Singh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
46 views4 pages

Frontend Assignment - Whatbytes

The document outlines the requirements for a frontend assignment focused on creating a product listing website using Next.js. It includes specifications for the home page, product detail page, and an optional cart page, detailing layout, features, and logic to implement. Additionally, it emphasizes the use of Tailwind CSS for styling and mandates specific rules for code management and deployment.

Uploaded by

Akshat Pratap Singh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Frontend Assignment - Whatbytes

1. Home Page (/) – Product Listing

Layout:

Header:

●​ Logo on the left​

●​ Search bar in the center​

●​ Cart icon (with badge) and profile/avatar on the right​

Main Section:

Sidebar (left):

●​ Category filter (checkboxes or pills)​

●​ Price range slider​

●​ Brand filter (optional)​

Product Grid (right):

●​ Responsive grid: 3 columns on desktop, 2 on tablet, 1 on mobile​

●​ Each product card includes:​

○​ Image (cover)​

○​ Title​

○​ Price​

○​ Quick "Add to Cart" button​

○​ Optional: Rating stars​

Footer:
●​ Copyright information​

●​ Social media icons​

2. Product Detail Page (/product/[id])

Layout:

Image Section (left):

●​ Image carousel or large product image​

Details Section (right):

●​ Product title​

●​ Price​

●​ Description​

●​ Category​

●​ Quantity selector​

●​ "Add to Cart" button​

●​ Optional: Reviews section​

3. Bonus (Optional) – Cart Page (/cart)

●​ List of added products​

●​ Quantity update controls​

●​ Remove item option​

●​ Price summary​

Logic to Implement
●​ Filtering logic for categories and price​

●​ Search filtering with string matching​

●​ URL-based filters (e.g., ?category=electronics&price=0-1000)​

●​ Client-side state management for the cart (using React Context or Zustand or Redux)​

●​ Dynamic routing with Next.js for product detail pages (/product/[id])​

●​ Conditional rendering (e.g., show a message when no products are found)​

●​ Persist cart state in localStorage​

Suggested Styling Stack

●​ Tailwind CSS for rapid and responsive UI development​

●​ Icons can be sourced from lucide-react​

Rules to be strictly followed

●​ Push your code to a public GitHub repository with logical, feature-based


commits. Avoid pushing all changes in a single commit. Commit incrementally as
you build features (e.g., filter UI, product listing, product detail page, cart logic) to
clearly demonstrate your development process.
●​ Deploy your completed project to Vercel and include the live deployment URL in
your repository's README file.
●​ Make the UI the same as the image below (attention to detail will be checked).
●​ Use Next js setup for the project.

​
​

You might also like