Task: E-Commerce Admin Dashboard
Objective: Build a small dashboard to manage products using Next.js App Router, Server Actions, and a database (Postgres/Vercel KV/SQLite).
Requirements:
- Public Page: A product listing page (Grid view) with a search bar. Search must use URL search params.
- Admin Area: Protected route (
/admin) requiring a simple password (mock auth). - CRUD: Ability to Add, Edit, and Delete products using Server Actions.
- Validation: Validate form inputs using Zod.
- Optimistic UI: The UI should update immediately when adding/deleting a product, before the server responds.
- Loading States: Use
loading.jsand Suspense for data fetching.
Bonus Points:
- Implement an Intercepting Route to show product details in a modal.
- Add image upload support (or mock it).
- Use
useFormStateto handle server-side validation errors.