🍫 Choco — Modern Chocolate E-Commerce Platform

Choco is a full-stack chocolate e-commerce platform built with Next.js. It combines a polished customer shopping experience with a role-protected admin dashboard for products, inventory, warehouses, orders, and delivery operations.

✨ App UI showcase

Customer storefront

The customer experience is designed around discovery and quick shopping: a hero landing page, featured products, product details, wishlist, cart, checkout, account pages, and order history.

Available customer screens

• Home — hero section, special products, about section, product catalogue, newsletter, and footer
• Product details — product information, images, pricing, and add-to-cart actions
• Cart and checkout — cart management and Razorpay payment flow
• Wishlist — save products for later
• Account — authentication, profile, and order history

Admin dashboard

The admin UI provides operational tools for managing the store:

• Product CRUD and image uploads
• Inventory management across warehouses
• Order status tracking and delivery-person assignment
• Warehouse and delivery-person management
• Interactive data tables and validated forms

To view the UI locally, run the project and open http://localhost:3000. The admin area is available at http://localhost:3000/admin for authorized users.

🚀 Features

• Google OAuth authentication with NextAuth.js
• Role-based access control for customers and admins
• PostgreSQL persistence with Drizzle ORM
• Product images through ImageKit
• Razorpay checkout integration
• Zustand stores for client-side state
• TanStack Query for server state
• React Hook Form and Zod validation
• Responsive Tailwind CSS UI with Radix UI components
• Docker-ready standalone Next.js deployment
• Turbopack-powered development

🧱 Architecture

graph TB
    A[Next.js App Router] --> B[Customer Store]
    A --> C[Admin Dashboard]
    A --> D[API Route Handlers]
    D --> E[NextAuth]
    D --> F[Drizzle ORM]
    F --> G[(PostgreSQL)]
    B --> H[Zustand Cart and Wishlist]
    B --> I[Razorpay Checkout]
    B --> J[ImageKit CDN]

Loading

🛠️ Tech stack

Area	Technology
Framework	Next.js 16.3, React 19, TypeScript
Styling and UI	Tailwind CSS, Radix UI, Lucide React
Database	PostgreSQL, Drizzle ORM
Authentication	NextAuth.js with Google OAuth
Forms and validation	React Hook Form, Zod
State	Zustand, TanStack Query
Images	ImageKit
Payments	Razorpay
Deployment	Docker, OpenNext, Cloudflare

📁 Project structure

src/
├── app/
│   ├── (client)/       # Customer-facing storefront pages
│   ├── admin/          # Protected admin dashboard
│   └── api/            # Next.js API route handlers
├── components/         # Shared UI components
├── http/               # Axios client and API functions
├── lib/
│   ├── auth/           # NextAuth configuration
│   ├── db/             # Drizzle schema and database access
│   └── validators/     # Zod validation schemas
└── store/              # Zustand state stores

⚡ Quick start

Prerequisites

• Node.js 18+
• npm
• PostgreSQL, or a hosted PostgreSQL provider
• Google OAuth credentials for authentication

1. Install dependencies

git clone https://github.com/Py8050147/choco_app.git
cd choco_app
npm install

2. Configure environment variables

cp .env.example .env

Fill in the values required by your environment:

DATABASE_URL="postgresql://user:password@host:5432/database"
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"
NEXTAUTH_SECRET="your-secret"
NEXTAUTH_URL="http://localhost:3000"
NEXT_PUBLIC_BACKEND_URL="http://localhost:3000/api"
NEXT_SERVER_ACTIONS_ENCRYPTION_KEY="your-encryption-key"
IMAGEKIT_PRIVATE_KEY="your-private-key"
IMAGEKIT_PUBLIC_KEY="your-public-key"
IMAGEKIT_URL_ENDPOINT="https://ik.imagekit.io/your-endpoint"

3. Prepare the database

npm run db:generate
npm run db:run

4. Start the development server

npm run dev

Open the customer UI at http://localhost:3000.

📜 Useful scripts

npm run dev       # Start Next.js with Turbopack
npm run build     # Build the application
npm start         # Start the production server
npm run lint      # Run linting
npm run db:generate
npm run db:run

🔐 Security notes

• Keep .env out of version control.
• Never expose private ImageKit or payment credentials to the browser.
• Admin API routes validate the authenticated user's role before allowing mutations.
• Use a strong NEXTAUTH_SECRET and server-action encryption key in production.

👤 Author

Pankaj Yadav

• GitHub: @Py8050147
• LinkedIn: Pankaj Kumar

📄 License

This project is licensed under the MIT License.

---

⭐ If you like Choco, consider starring the repository!