Inventory Desk

Inventory Desk is a complete Next.js product-management application with a responsive frontend dashboard, REST API endpoints, MongoDB Atlas persistence, validation, and Vercel-ready deployment configuration.

Features

• Create, list, update, and delete products from the frontend UI.
• REST API route handlers for product CRUD operations.
• MongoDB Atlas integration with a serverless-safe cached client.
• Automatic totalPrice calculation from unitPrice * quantity.
• Field-level validation with consistent API error responses.
• Responsive dashboard for desktop and mobile product management.
• API documentation with request and response examples.

Tech Stack

• Next.js 16 App Router
• React 19
• TypeScript
• Tailwind CSS 4
• MongoDB Node.js Driver
• Zod
• Lucide React

Requirements

• Node.js 20.9 or newer.
• npm.
• MongoDB Atlas cluster connection string.

Local Setup

Install dependencies:

npm install

Create a local environment file:

cp .env.example .env.local

Set the MongoDB Atlas values in .env.local:

MONGODB_URI=mongodb+srv://<username>:<password>@<cluster-host>/?retryWrites=true&w=majority
MONGODB_DB=product_management

Run the development server:

npm run dev

Open http://localhost:3000.

Scripts

npm run dev
npm run lint
npm run build
npm run start

Architecture

• app/page.tsx renders the product-management dashboard.
• app/components/ contains the client-side product form, list, and dashboard shell.
• app/api/products/route.ts handles product list and creation.
• app/api/products/[id]/route.ts handles product update and deletion.
• lib/mongodb.ts manages the cached MongoDB connection.
• lib/products.ts contains the product data access layer.
• lib/product-validation.ts contains shared validation and total-price calculation.
• types/product.ts contains shared product and API response types.
• docs/api.md documents API requests, responses, validation, and errors.

API Documentation

See docs/api.md for all endpoints and examples.

MongoDB Atlas Notes

1. Create a MongoDB Atlas project and cluster.
2. Create a database user with read/write permissions.
3. Add your local IP address for development, and configure production access according to your security policy.
4. Copy the connection string into MONGODB_URI.
5. The app creates a unique index on productCode automatically.

Deploy on Vercel

1. Push the repository to GitHub, GitLab, or Bitbucket.
2. Import the project in Vercel.
3. Add these environment variables in the Vercel project settings:
   • MONGODB_URI
   • MONGODB_DB
4. Deploy with the default Next.js framework settings.

The API route handlers use the Node.js runtime because the MongoDB driver is not compatible with the Edge runtime.

Production Notes

• No authentication or authorization is included yet, by request.
• Product codes are unique and normalized to uppercase.
• totalPrice is computed on the server and should not be trusted from client input.
• API errors are sanitized before being returned to clients.