ProdDeck

ProdDeck is a modern, server-side rendered e-commerce product management dashboard built with Next.js. It provides administrators with a comprehensive platform to manage products efficiently through CRUD operations, validated forms, cloud-based image uploads, and interactive data visualization dashboards.

🔗 Live Demo: https://prod-deck.vercel.app

🚀 Features

Core Features

1. Admin Authentication & Authorization

• Secure admin login system with username, email, and password authentication
• Session management using HTTP-only cookies (7-day expiration)
• Protected admin routes with middleware authentication
• Admin account creation functionality
• Logout functionality

2. Product Management (Full CRUD)

• Create Products: Multi-step form with validation
  • Step 1: Basic Information (name, description, category)
  • Step 2: Pricing Information (price, stock, status)
  • Step 3: Image Upload (Cloudinary integration)
  • Step 4: Review & Submit
• Read Products: View all products in a responsive grid layout
  • Product cards with images, pricing, stock, and category
  • Product detail modal with full information
• Update Products: Edit existing products with pre-filled multi-step form
• Delete Products: Remove products with automatic image cleanup from Cloudinary

3. Product Features

• Product status management (Draft/Active)
• Stock tracking
• Category organization
• Multiple image support (Cloudinary storage)
• Form validation using Zod schema
• Real-time form validation feedback

4. Analytics Dashboard

• Overview Statistics:
  • Total Products count
  • Total Sales (₹ currency format)
  • Total Orders count
• Product Status Chart: Interactive pie chart showing Active vs Draft products
• Stock Overview Chart: Bar chart displaying stock levels per product
• Sales Trend Chart: Area chart with monthly sales data
  • Timeline filters (1 Week, 1 Month, 1 Year)
  • Dummy data generation for preview
  • Comparison with previous period

5. User Interface

• Modern, dark-themed UI with gradient accents
• Responsive design (mobile, tablet, desktop)
• Glassmorphism effects with backdrop blur
• Smooth animations and transitions
• Interactive charts using Recharts
• Modal-based forms for better UX
• Empty state handling with helpful messages

6. Image Management

• Cloudinary integration for cloud storage
• Automatic image upload during product creation/update
• Image deletion from Cloudinary when products are deleted
• Support for multiple images per product
• Image preview in product cards and detail views

7. Data Validation

• Server-side validation using Zod schemas
• Client-side form validation
• Type-safe form handling
• Error messages and user feedback

🛠️ Tech Stack

Frontend

• Next.js 16.1.1 - React framework with App Router
• React 19.2.3 - UI library
• TypeScript - Type safety
• Tailwind CSS 4 - Styling
• Recharts 2.15.4 - Data visualization
• Lucide React - Icons

Backend

• Next.js Server Actions - Server-side logic
• MongoDB - Database (via Mongoose)
• Mongoose 9.0.2 - ODM for MongoDB

Authentication & Security

• bcryptjs 3.0.3 - Password hashing
• HTTP-only cookies - Secure session management

Cloud Services

• Cloudinary 2.8.0 - Image storage and management

Validation

• Zod 4.2.1 - Schema validation

📦 Installation

Prerequisites

• Node.js 18+ and npm/yarn
• MongoDB database (local or cloud like MongoDB Atlas)
• Cloudinary account for image storage

Steps

1. Clone the repository

   git clone <repository-url>
   cd ProdDeck

2. Install dependencies

   npm install

3. Set up environment variables Create a .env.local file in the root directory:

   MONGODB_URI=your_mongodb_connection_string
   CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
   CLOUDINARY_API_KEY=your_cloudinary_api_key
   CLOUDINARY_API_SECRET=your_cloudinary_api_secret

4. Run the development server

   npm run dev

5. Open your browser Navigate to http://localhost:3000

🔐 Admin Credentials

Dummy Admin Credentials (For Testing/Demo)

The following dummy admin credentials can be used to access the dashboard for testing purposes:

Username: Admin1
Email: admin@proddeck.com
Password: admin123

⚠️ Security Note:

• These are test/demo credentials only
• DO NOT use these credentials in production
• Change passwords immediately after first login in production environments
• Use strong, unique passwords for production
• Never commit real credentials to version control

Creating Additional Admin Accounts

You can create new admin accounts in two ways:

Option 1: Create Admin via Dashboard (Recommended)

1. Log in with an existing admin account (use the dummy credentials above)
2. Navigate to the sidebar
3. Click on "Create Admin"
4. Fill in the form with:
   • Username
   • Email
   • Password
5. Submit to create a new admin account

Option 2: Create Admin via Database Script

You can create an admin account directly in MongoDB or use a script:

// Example: Create admin using Node.js script
const bcrypt = require('bcryptjs');
const mongoose = require('mongoose');

async function createAdmin() {
  await mongoose.connect(process.env.MONGODB_URI);
  
  const hashedPassword = await bcrypt.hash('admin123', 10);
  
  await mongoose.connection.db.collection('admins').insertOne({
    username: 'admin',
    email: 'admin@proddeck.com',
    password: hashedPassword,
    role: 'admin',
    createdAt: new Date(),
    updatedAt: new Date()
  });
  
  console.log('Admin created successfully!');
  process.exit(0);
}

createAdmin();

Note: If you need to set up the dummy admin account, run the script above or create it manually through the dashboard after setting up your first admin account.

📁 Project Structure

ProdDeck/
├── app/
│   ├── admin/                    # Admin dashboard routes
│   │   ├── components/           # Admin-specific components
│   │   │   ├── CreateAdminModal.tsx
│   │   │   ├── DeleteProductButton.tsx
│   │   │   ├── LogoutButton.tsx
│   │   │   ├── ProductStatusChart.tsx
│   │   │   ├── SalesTrendChart.tsx
│   │   │   ├── SidebarNav.tsx
│   │   │   └── StockOverviewChart.tsx
│   │   ├── products/            # Product management routes
│   │   │   ├── [id]/
│   │   │   │   └── edit/        # Edit product page
│   │   │   ├── components/      # Product components
│   │   │   │   ├── CreateProductModal.tsx
│   │   │   │   ├── EditProductModal.tsx
│   │   │   │   ├── ProductDetailModal.tsx
│   │   │   │   ├── ProductItem.tsx
│   │   │   │   ├── ProductsList.tsx
│   │   │   │   └── ProductsPageClient.tsx
│   │   │   ├── new/             # Create product page
│   │   │   │   └── steps/       # Multi-step form steps
│   │   │   │       ├── StepBasicInfo.tsx
│   │   │   │       ├── StepImages.tsx
│   │   │   │       ├── StepPricingInfo.tsx
│   │   │   │       └── StepReview.tsx
│   │   │   ├── actions.ts       # Product server actions
│   │   │   ├── MultiStepForm.tsx
│   │   │   └── page.tsx
│   │   ├── actions.ts           # Admin server actions
│   │   ├── layout.tsx           # Admin layout with sidebar
│   │   └── page.tsx             # Dashboard home
│   ├── components/              # Shared components
│   │   └── AlertProvider.tsx
│   ├── login/                   # Login page
│   │   ├── actions.ts
│   │   └── page.tsx
│   ├── logout/                  # Logout action
│   │   └── actions.ts
│   ├── layout.tsx               # Root layout
│   ├── page.tsx                 # Home page (redirects to login)
│   └── globals.css              # Global styles
├── lib/
│   ├── cloudinary.ts           # Cloudinary configuration
│   ├── db.ts                    # MongoDB connection
│   └── validators/              # Zod validation schemas
│       ├── product.ts
│       └── productSteps.ts
├── models/                      # Mongoose models
│   ├── Admin.ts
│   ├── Order.ts
│   └── Product.ts
├── public/                      # Static assets
├── package.json
├── tsconfig.json
└── README.md

🎯 Usage Guide

Accessing the Dashboard

1. Navigate to http://localhost:3000
2. You'll be redirected to /login
3. Enter your admin credentials (username, email, password)
4. Upon successful login, you'll be redirected to /admin dashboard

Managing Products

Creating a Product

1. Click "Add Product" button on the Products page
2. Fill in the multi-step form:
   • Step 1: Enter product name, description, and category
   • Step 2: Set price, stock quantity, and status (Draft/Active)
   • Step 3: Upload product image(s)
   • Step 4: Review all information and submit
3. Product will be created and appear in the products list

Editing a Product

1. Navigate to Products page
2. Click "Edit" on any product card
3. Modify the information in the multi-step form
4. Submit to save changes

Deleting a Product

1. Navigate to Products page
2. Click "Delete" on any product card
3. Confirm deletion
4. Product and its images will be permanently removed

Viewing Analytics

The dashboard provides several analytics views:

• Overview Cards: Quick stats at the top
• Product Status Chart: Visual breakdown of Active vs Draft products
• Stock Overview: Bar chart showing stock levels for each product
• Sales Trend: Monthly sales data with timeline filters

Creating Additional Admin Accounts

1. Log in as an existing admin
2. Click "Create Admin" in the sidebar
3. Fill in the form with new admin details
4. Submit to create the account

🔒 Security Features

• Password hashing using bcrypt (10 rounds)
• HTTP-only cookies for session management
• Server-side authentication checks
• Protected routes with middleware
• Input validation on both client and server
• Secure image uploads via Cloudinary

🎨 UI/UX Features

• Dark Theme: Modern dark color scheme with gradient accents
• Responsive Design: Works seamlessly on all device sizes
• Glassmorphism: Modern UI with backdrop blur effects
• Smooth Animations: Transitions and hover effects
• Empty States: Helpful messages when no data is available
• Loading States: Visual feedback during async operations
• Error Handling: Clear error messages for user feedback

📊 Data Models

Admin Model

{
  username: string (required, unique)
  email: string (required, unique)
  password: string (required, hashed)
  role: string (default: "admin")
  createdAt: Date
  updatedAt: Date
}

Product Model

{
  name: string (required)
  description: string (required)
  price: number (required, positive)
  stock: number (default: 0)
  category: string (optional)
  images: string[] (default: [])
  status: "draft" | "active" (default: "draft")
  createdAt: Date
  updatedAt: Date
}

Order Model

{
  products: [{
    productId: ObjectId (ref: Product)
    quantity: number
    price: number
  }]
  totalAmount: number
  status: "pending" | "completed" | "cancelled" (default: "pending")
  createdAt: Date
  updatedAt: Date
}

🚀 Deployment

Build for Production

npm run build
npm start

Environment Variables for Production

Make sure to set all required environment variables in your production environment:

• MONGODB_URI
• CLOUDINARY_CLOUD_NAME
• CLOUDINARY_API_KEY
• CLOUDINARY_API_SECRET
• NODE_ENV=production

🐛 Troubleshooting

Common Issues

1. MongoDB Connection Error

   • Verify MONGODB_URI is correct in .env.local
   • Ensure MongoDB is running or Atlas cluster is accessible

2. Cloudinary Upload Fails

   • Check Cloudinary credentials in .env.local
   • Verify API key permissions

3. Admin Login Fails

   • Ensure admin account exists in database
   • Verify password is correctly hashed
   • Check cookie settings in browser

4. Images Not Displaying

   • Verify Cloudinary configuration
   • Check image URLs in database
   • Ensure CORS settings allow image access

📝 Development

Running in Development Mode

npm run dev

Note: This is a production-ready e-commerce management system. Ensure all security best practices are followed when deploying to production.