🛍️ Denz E-Commerce

A modern, full-stack e-commerce platform built with Next.js 14, Supabase, and Cloudinary.

---

✨ Features

🛒 Customer Features

• Product Browsing - Browse products with category filters, search, and price range filtering
• Product Details - View product images, multiple variants, and size selection (S, M, L, XL, XXL, XXXL)
• Shopping Cart - Add/remove items, update quantities, persistent cart with size tracking
• Checkout - Complete checkout with shipping address and order confirmation
• Order History - View past orders with status tracking
• Google Authentication - Secure login with Google OAuth

👨‍💼 Admin Features

• Admin Dashboard - Comprehensive dashboard for store management
• Order Management - View orders, update status (pending → confirmed → shipped → delivered), filter and sort orders
• Product Management - Add, edit, delete products with:
  • Multiple image uploads via Cloudinary
  • Size selection
  • Category assignment
  • Trending/Active status toggles
  • Search and filter products
• Ad Management - Create and manage homepage carousel ads

🔒 Security Features

• HttpOnly Cookies - Secure session management with Supabase SSR
• Admin Role Protection - Admin routes protected by role-based access
• Row Level Security (RLS) - Database-level security policies

🖼️ Image Optimization

• Cloudinary Integration - Automatic image optimization
• Next.js Image Component - Lazy loading, responsive sizing
• Auto Format - WebP/AVIF conversion with f_auto
• Auto Quality - Bandwidth optimization with q_auto

---

🏗️ Tech Stack

Category	Technology
Framework	Next.js 14 (App Router)
Language	TypeScript
Database	Supabase (PostgreSQL)
Authentication	Supabase Auth (Google OAuth)
Styling	Tailwind CSS (CDN)
Image Storage	Cloudinary
Icons	Font Awesome 6

---

📁 Project Structure

denz/
├── app/                      # Next.js App Router
│   ├── admin/dashboard/      # Admin dashboard page
│   ├── api/upload/           # Cloudinary upload API
│   ├── auth/callback/        # OAuth callback handler
│   ├── cart/                 # Cart page
│   ├── checkout/             # Checkout page
│   ├── my-orders/            # Order history page
│   ├── product/[id]/         # Product details page
│   ├── secret-admin-login/   # Admin login page
│   ├── shop/                 # Shop/products page
│   ├── layout.tsx            # Root layout
│   └── page.tsx              # Home page
│
├── components/
│   ├── Navbar.tsx            # Navigation bar
│   ├── NavbarWrapper.tsx     # Navbar with session
│   ├── ProductImage.tsx      # Optimized image components
│   └── Providers.tsx         # React context providers
│
├── context/
│   └── CartContext.tsx       # Shopping cart state
│
├── lib/
│   ├── cloudinaryLoader.ts   # Cloudinary URL optimization
│   ├── supabase.ts           # Supabase client exports
│   └── supabase/
│       ├── client.ts         # Browser Supabase client
│       ├── middleware.ts     # Session refresh utility
│       └── server.ts         # Server Supabase client
│
├── pages/                    # Page components
│   ├── AdminDashboard.tsx    # Admin dashboard UI
│   ├── AdminLogin.tsx        # Admin login UI
│   ├── Cart.tsx              # Cart UI
│   ├── Checkout.tsx          # Checkout UI
│   ├── Home.tsx              # Homepage UI
│   ├── MyOrders.tsx          # Order history UI
│   ├── ProductDetails.tsx    # Product details UI
│   └── Shop.tsx              # Shop page UI
│
├── public/                   # Static assets
├── middleware.ts             # Next.js middleware (session refresh)
├── store.sql                 # Database schema
├── types.ts                  # TypeScript interfaces
└── next.config.js            # Next.js configuration

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• Supabase account
• Cloudinary account
• Google OAuth credentials (in Supabase)

Installation

1. Clone the repository

   git clone https://github.com/Bijoy2406/denz.git
   cd denz

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env.local file:

   NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
   
   CLOUDINARY_CLOUD_NAME=your_cloud_name
   CLOUDINARY_API_KEY=your_api_key
   CLOUDINARY_API_SECRET=your_api_secret

4. Set up the database

   Run the store.sql file in your Supabase SQL editor to create all tables and policies.

5. Configure Supabase Auth

   • Enable Google OAuth in Supabase Dashboard
   • Add redirect URL: http://localhost:3000/auth/callback

6. Run the development server

   npm run dev

7. Open the app

   Visit http://localhost:3000

---

🎨 Color Theme

Color	Hex	Usage
Primary	#8B4789	Buttons, links, accents
Secondary	#DC2626	Alerts, delete buttons
Brown	#7C3F2E	Secondary text
Beige	#F5F5DC	Backgrounds, borders
Dark	#000000	Primary text

---

📊 Database Schema

Main Tables

• users - User accounts with admin flag
• categories - Product categories
• products - Product catalog with attributes
• product_variations - Product variants (colors, images)
• orders - Customer orders
• order_items - Order line items with size
• ads - Homepage carousel ads

Order Status Flow

pending → confirmed → shipped → delivered
                   ↘ cancelled

---

🔐 Admin Access

1. Add your email to the users table with is_admin = true
2. Navigate to /secret-admin-login
3. Sign in with Google
4. Access the admin dashboard at /admin/dashboard

---

📱 Features Breakdown

Product Image Optimization

The app uses custom Cloudinary loaders for automatic optimization:

import ProductImage from '../components/ProductImage';

// Automatically optimizes with f_auto, q_auto, responsive sizing
<ProductImage src={cloudinaryUrl} alt="Product" fill />

Available Image Components

Component	Use Case
ProductImage	Product detail pages
ProductThumbnail	Small thumbnails
ProductCardImage	Product grid cards
BannerImage	Hero/carousel banners
AdminThumbnail	Admin dashboard
CartItemImage	Cart items

---

🛠️ Scripts

npm run dev      # Start development server
npm run build    # Build for production
npm run start    # Start production server
npm run lint     # Run ESLint

---

📄 License

This project is private and proprietary.

---

👨‍💻 Author

Bijoy - @Bijoy2406 Afran - @Afran-zero

Made with ❤️ using Next.js and Supabase