Kenneth espela/3 5 years frontend

[Alepse]

Summary

• Implemented a products listing and detail flow per 3–5 years README.
• Added search, category filter, and sort; loading and error states.
• Responsive layout with accessible UI and improved UX.

Tech

• Next.js App Router (server fetch with revalidation, client UI).
• Tailwind (v4) + shadcn-style components (Button, Card, Input, Select, Skeleton).
• Framer Motion for subtle entrance/hover animations.
• Next/Image remote config for fakestoreapi.com.
• React Icons in filter sidebar.

Features

• Products grid with image, title, price.
• Product detail page (image, price, category, rating, description).
• Search by title, category chips with icons, sort by price.
• Loading skeletons and route-level loader for details.
• Error messaging and empty state.
• Global nav and simple footer.

Testing

• Lint: clean (npm run lint)
• Responsive: 1/2/3-column layouts verified.
• Performance: server fetching + preconnect; minimal layout shift.

Screens/Routes

• / — hero + value props
• /products — listing with filters
• /products/[id] — product detail