A Product Management Dashboard built with Next.js, GraphQL, and Apollo Client, designed to manage products with ease. It features an admin panel for CRUD operations, product listing, and a detailed product view — all wrapped in a modern, responsive UI with dark mode support.
👉 https://dashprod.netlify.app
👉 https://dashprod.netlify.app/products
- Fetch products from a mocked GraphQL API
- Server-side pagination and client-side search
- Responsive grid layout with product cards showing:
- Product image
- Name and price
- Stock availability
- Dynamic routes for each product:
/products/[id] - Displays detailed product info: description, stock, images, etc.
- Add to Cart button (client-side managed state)
- System-based theme detection
- Fully responsive dark theme UI with toggle support
- Accessible at
/adminonly for users withrole: ADMIN - Features:
- Create new products
- Edit existing products
- Delete products with confirmation
- Form validation (e.g., empty fields, price formats)
- Protected via JWT authentication
| Tool/Library | Usage |
|---|---|
| Next.js | App router, dynamic routing, SSR |
| TypeScript | Static typing |
| GraphQL | API schema & operations |
| Apollo Client | Data fetching + caching |
| React Context | Global state (cart, auth) |
| Tailwind CSS | Utility-first styling |
| Heroicons | Icon set for UI |
| graphql-request | Lightweight server-side GraphQL client |
| Jest/React Testing Library | Unit + integration tests |
| Route | Description |
|---|---|
/admin |
Admin dashboard home (overview) |
/admin/products |
List all products (with edit/delete) |
/admin/products/create |
Create a new product |
/admin/products/[id]/edit |
Edit an existing product |
To log in as an admin:
{
id: "1",
email: "[email protected]",
password: "adminpass",
role: "ADMIN",
}