Implement product listing page

[theoldguard99]

Requirements (from README)

• Product listing – Fetches products from Fake Store API, displays them in a responsive grid with image, name, price, and star rating.
• Detail view – Clicking a product opens a modal with full details and “Add to cart” a detail page at /products/[id] is also available.
• Filtering & search – Text search (by title) and category dropdown list updates in real time.
• Loading & error states – Route-level loading UI, image spinners on cards/cart, and an error alert when the products fetch fails product page uses notFound() when a product can’t be loaded.
• Responsive design – Layout and components adapt across breakpoints (including mobile cart modal and FAB).

Bonus features

• Cart – Add to cart from card or modal cart FAB with badge cart modal with line items, editable quantity (max 999), remove, and total. “Sorry we can’t add more” when an item is at max quantity (999 is the max input) “Can’t add more of this product” snackbar when trying to add beyond limit.
• Snackbars – “Added to cart” on add, stacked snackbars (max 5) with fade-out, single-line layout on small screens (This is also mobile responsive)
• UX – Product name truncation (40 chars) + tooltip in cart category labels in title case, app branded as “Bilan”
• Performance – Lazy-loaded modals, memo on product cards, stable callbacks, blur image placeholders, content-visibility on grid, MUI optimizePackageImports, cached product fetch, reduced priority images for LCP.

Tech stack
Next.js 14 (App Router), React 18
MUI (Material UI) + Tailwind for styling
State – React useState + CartContext (cart + snackbars)
Data – Server-side fetch in app/page.tsx and app/products/[id]/page.tsx with next (revalidate) for caching
How to run

cd frontend
npm install
npm run dev

Open http://localhost:3000

Accomplished TODOS
[x] Product listing with API fetch
[x] Detail view (modal + optional page)
[x] Search and category filter
[x] Loading and error handling
[x] Responsive layout
[x] Clean code, clear data fetching, basic state management