ZestCo Ecosystem

A Premium, Real-Time & High-Performance Grocery Delivery Platform

---

🌐 Live Preview  •  ✨Features  •  🛠️ Tech Stack  •  🚀 Get Started

---

📋 Table of Contents

---

• Overview
• Architecture
• Features
• Tech Stack
• Project Structure
• Getting Started
• Available Scripts
• Deployment
• Contributing
• License
• Contact

🎯 Overview

---

Welcome to my grocery store website. ZestCo is not just a grocery app; it's a full-scale ecosystem designed for speed and reliability. Built with a decoupled architecture, it uses Next.js 15 for a blazing-fast frontend and a dedicated Node.js Socket Server for real-time bidirectional data flow.

⚡	Real-Time Engine	Custom Socket.io server for instant bidirectional order tracking and live delivery status.
🎨	UI & UX Masterclass	Premium Glassmorphic aesthetics with cinematic staggered letter-glow (Sheryians Inspired).
📦	Scalable Architecture	Decoupled MERN + Next.js 15 setup with specialized service separation for high availability.
🔐	Security Ecosystem	Robust OTP (Send/Verify) logic combined with Next-Auth for bulletproof session management.
🚚	Smart Logistics	Automated Delivery Assignment system with real-time coordinate updates on Leaflet maps.
🤖	AI Support	Integrated AI-Suggestion engine within the support chat for intelligent product resolutions.
💳	Financial Suite	Production-ready Stripe integration with secure Webhook handling for automated order success.
📊	Admin Analytics	Data-driven Dashboard with Recharts for real-time inventory and sales performance tracking.
📧	Automation Hub	Nodemailer powered automated transaction receipts and security alerts sent instantly.
🖼️	Asset Management	Cloudinary integrated media pipeline for optimized image delivery and cloud-based storage.

---

1️⃣ 🛡️ API Endpoints Preview (Security Showcase)

Endpoint	Method	Description	Auth Required
/api/otp/send	POST	Generates & Sends 6-digit OTP via Email	✅ Yes (User)
/api/otp/verify	POST	Validates OTP & sets temporary session	✅ Yes (Partner)
/api/delivery/assignment	GET	Fetches active orders for delivery partner	✅ Yes (Partner)
/api/user/payment	POST	Creates Stripe Payment Intent	✅ Yes (User)

---

2️⃣ 🛠️ Environment Variables (.env.example)

---

Create a .env file and add these keys

MONGODB_URI=your_mongodb_connection_string
NEXTAUTH_SECRET=your_next_auth_secret_key
STRIPE_SECRET_KEY=your_stripe_secret_key
CLOUDINARY_CLOUD_NAME=your_cloud_name
NODEMAILER_EMAIL=your_email_address
NODEMAILER_PASSWORD=your_app_password
SOCKET_SERVER_URL=http://localhost:4000
NEXT.JS_SERVER_URL=http://localhost:3000

---

3️⃣ 🚀 Future Roadmap (Scalability)

---

1️⃣ PWA Support: Prepare the app for offline mode and home screen installation.
2️⃣ Multi-Vendor Support: Provide individual dashboards to different shop owners.
3️⃣ Analytics Engine: Detailed sales and delivery efficiency graphs for the admin.

---

🏗️ Architecture

The project is split into two specialized cores to maintain maximum performance:

1️⃣ SocketServer (The Heart)

A dedicated Node.js environment handling live connections.
. Role: Order status broadcasting, live delivery coordinates, and support pings.

. Tech : Socket.io, Express, Node.js.

2️⃣ zestco (The Brain)

The primary Next.js 15 application.

. Role: Core business logic, Product catalog, Auth, and Premium legal modules.

. Tech : React 19, Tailwind CSS 4, Framer Motion.

---

✨ Features

---

🎨 Design & User Experience

Feature	Description
🌌 3D Particle System	Interactive particle backgrounds that respond to mouse movements
🔷 Geometric Animations	CSS-powered floating shapes with smooth parallax effects
🖱️ Custom Cursor	Unique cursor that transforms on hover states
🎭 Page Transitions	Cinematic transitions between routes using Framer Motion
🌓 Theme Switching	Smooth dark/light mode with persistent localStorage
✨ Micro-interactions	Delightful hover effects and button animations
⚡ Latest Glow	UI Premium staggered letter-glow animations with metallic rust-orange neon effects
🌌 Glassmorphism Design	Modern dark-themed UI with translucent layers and backdrop filters
🎭 Fluid Transitions	Cinematic page and component transitions powered by Framer Motion
🖱️Interactive Stagger	Typography that reacts independently to mouse movements on legal pages
📱 Adaptive Layout	Fully responsive experience across mobile, tablet, and ultra-wide screens
✨ Micro-interactions	High-end hover states and spring-based physics for all UI elements

---

⚙️ Core Logistics & Functionality

Feature	Description
📍 Live Order Tracking	Real-time delivery visualization using Leaflet maps and Socket.io
🚚 Smart Assignments	Automated system for order allocation between Admin and Delivery Partners
🛡️ Dual-Stage OTP	Secure mobile authentication with dedicated 'Send' and 'Verify' logic
🤖 AI-Suggestion Engine	Smart product recommendations integrated within the real-time support chat
💳 Secure Payments	Stripe integration with robust Webhook handling for order success/failure
📊 Admin Control Center	Comprehensive dashboard for inventory intake and live order management

---

🚀 Performance & Backend Architecture

Feature	Description
🏗️ Decoupled Servers	Separated Socket Server and Main App for high scalability and low latency.
🔐 Next-Auth Security	Role-based access control (RBAC) with secure session middleware.
🖼️ Media Optimization	Cloudinary integration for fast image delivery and optimized assets
📧 Automated Alerts	Nodemailer powered transaction receipts and security notifications
🗄️ Mongoose Singleton	Optimized MongoDB connections to prevent serverless function overhead
🔍 SEO Optimized	Next.js 15 App Router with dynamic metadata and structured data

---

✨ Features

⚡ Core Ecosystem Highlights

Category	Highlights
🔄 Real-time Engine	Live order tracking and instant status notifications via Socket.io.
🛡️ Advanced Security	AES-256 encrypted legal modules and secure Stripe payment gateways.
🎭 Fluid Animations	Framer Motion powered staggered letter-glow with Neon Aura effects.
📊 Admin Dashboard	Comprehensive management for inventory, orders, and delivery partners.
🌗 Dark Aesthetics	Native glassmorphism design optimized for high-performance low-light UI.
📱 Mobile First	Fully responsive logistics interface for on-the-go delivery partners.

---

🛠️ Tech Stack

Core Technologies

---

Animation & UI

---

Tools & Deployment

---

📦 Full Dependencies List (ZestCo Ecosystem)

🔐 Authentication & Security

Package	Version	Description
next-auth	^5.0.0-beta	Secure session management & Auth provider
bcryptjs	^2.4.3	High-security password hashing (Salt & Hash)
jsonwebtoken (JWT)	^9.x	Token-based authentication for secure API access
otp-generator	^4.x	Unique numeric/alphanumeric OTP generation engine

---

🌐 Frontend & Core Framework

Package	Version	Description
next	^15.x	Full-stack React framework (App Router)
react	^19.0.0	UI Library with Concurrent Rendering support
framer-motion	^12.0	High-end staggered animations (Neon Glow)
tailwindcss	^4.0	Utility-first CSS for glassmorphic UI
lucide-react	Latest	Premium vector icons for modern UI

---

🛠️ State Management & Data Fetching

Package	Version	Description
axios	^1.7.x	Promise-based HTTP client for seamless API calls
@reduxjs/toolkit	^2.x	Scalable global state management (Cart, User, Auth)
react-redux	^9.x	Redux bindings for React components
react-hook-form	^7.x	Type-safe form handling & validation

---

🔌 Real-time & Backend Core

Package	Version	Description
socket.io	^4.8.x	Real-time server logic (Bidirectional Events)
socket.io-client	^4.8.x	Live client-side WebSocket communication
mongoose	^8.x	Advanced MongoDB object modeling (ODM)
nodemailer	^6.10.x	Professional automated email & OTP service
cloudinary	^2.x	Cloud-based media storage & image optimization

---

💳 Logistics & Payments

Package	Version	Description
Stripe	^17.x	Professional payment gateway with Webhook support
leaflet & react-leaflet	^1.9.x	Interactive maps for live delivery tracking
recharts	^2.15.x	Data visualization for Admin Dashboard analytics

---

🎨 UI Feedback & Utilities

Package	Version	Description
sonner	^2.x	Premium, stackable toast notifications
clsx & tailwind-merge	Latest	Conditional Tailwind class merging & optimization
react-icons	^5.x	Comprehensive icon library support

---

📁 Project Structure

📦 zestCo-main-folder
┃
┣━━ 📂 socketServer                # Real-time WebSocket Engine (Node.js)
┃   ┣━━ 📄 index.js                # Server entry point & Socket event listeners
┃   ┣━━ 📄 .env                    # PORT, CORS & Socket configurations
┃   ┗━━ 📄 package.json            # Socket-specific dependencies
┃
┗━━ 📂 zestco                      # Full-Stack Web App (Next.js 15 + TS)
    ┃
    ┣━━ 📂 src
    ┃   ┣━━ 📂 app                 # Next.js App Router (Routing & Layouts)
    ┃   ┃   ┣━━ 📂 (auth)          # Authentication Flow (Grouped)
    ┃   ┃   ┃   ┣━━ 📂 login       # User Login & Identity Access
    ┃   ┃   ┃   ┣━━ 📂 register    # New User Onboarding
    ┃   ┃   ┃   ┗━━ 📂 verify-otp  # Multi-stage OTP Verification UI
    ┃   ┃   ┃
    ┃   ┃   ┣━━ 📂 (user)          # Client-facing Routes
    ┃   ┃   ┃   ┣━━ 📂 cart        # Cart Management & Persistence
    ┃   ┃   ┃   ┣━━ 📂 checkout    # Stripe Secure Checkout Pipeline
    ┃   ┃   ┃   ┣━━ 📂 orders      # Order History & Status Dashboard
    ┃   ┃   ┃   ┗━━ 📂 track-order # Live [orderId] Tracking (Leaflet Map)
    ┃   ┃   ┃
    ┃   ┃   ┣━━ 📂 admin           # Business Control Center
    ┃   ┃   ┃   ┣━━ 📂 add-grocery # Inventory Intake (Cloudinary Managed)
    ┃   ┃   ┃   ┣━━ 📂 all-orders  # Global Order Management Logic
    ┃   ┃   ┃   ┗━━ 📂 users       # Role-Based Access Control (RBAC)
    ┃   ┃   ┃
    ┃   ┃   ┣━━ 📂 api             # Serverless Backend Architecture
    ┃   ┃   ┃   ┣━━ 📂 auth        # NextAuth Configuration & Signup
    ┃   ┃   ┃   ┣━━ 📂 admin       # Protected Admin Operations
    ┃   ┃   ┃   ┣━━ 📂 chat        # AI Support & Message Archiving
    ┃   ┃   ┃   ┣━━ 📂 delivery    # Partner Assignment & Logic
    ┃   ┃   ┃   ┣━━ 📂 otp         # Nodemailer OTP Engine (Send/Verify)
    ┃   ┃   ┃   ┣━━ 📂 stripe      # Payment Intents & Webhook Handlers
    ┃   ┃   ┃   ┗━━ 📂 user        # Personalization & Order Logic
    ┃   ┃   ┃
    ┃   ┃   ┣━━ 📂 help            # Legal/Support UI & UX Masterclass
    ┃   ┃   ┣━━ 📂 privacy         # Legal/Support UI & UX Masterclass
    ┃   ┃   ┣━━ 📂 refund          # Legal/Support UI & UX Masterclass
    ┃   ┃   ┣━━ 📂 terms           # Legal/Support UI & UX Masterclass
    ┃   ┃   ┣━━ 📄 layout.tsx      # Global Root Layout (Glassmorphism)
    ┃   ┃   ┗━━ 📄 page.tsx        # Dynamic Hero & Product Ecosystem
    ┃   ┃
    ┃   ┣━━ 📂 components          # Modular UI Engine
    ┃   ┃   ┣━━ 📂 Delivery        # LiveMap.tsx, GeoUpdator.tsx
    ┃   ┃   ┣━━ 📂 AdminDash       # OrderTable.tsx, AnalyticsChart.tsx
    ┃   ┃   ┣━━ 📂 Navbar          # Glassmorphism.tsx, UserMenu.tsx
    ┃   ┃   ┣━━ 📄 EditRole.tsx    # Role Switcher Modal Component
    ┃   ┃   ┣━━ 📄 GroceryCard.tsx # Animated Product Display Card
    ┃   ┃   ┗━━ 📄 Footer.tsx      # Staggered Letter Glow Footer
    ┃   ┃
    ┃   ┣━━ 📂 hooks               # Custom React Hooks
    ┃   ┃   ┗━━ 📄 useGetMe.tsx    # Custom Redux Session-State Hook
    ┃   ┃
    ┃   ┣━━ 📂 redux               # Global State Management
    ┃   ┃   ┣━━ 📂 slices          # cartSlice.ts, userSlice.ts
    ┃   ┃   ┣━━ 📄 storeProvider.tsx # Client-side Redux Wrapper
    ┃   ┃   ┗━━ 📄 store.ts        # Persisted Redux Store Config
    ┃   ┃
    ┃   ┣━━ 📂 models              # Mongoose Database Architecture
    ┃   ┃   ┣━━ 📄 user.model.ts   # User, Admin & Partner Schemas
    ┃   ┃   ┣━━ 📄 order.model.ts  # Real-time Tracking & Order Metadata
    ┃   ┃   ┣━━ 📄 grocery.model.ts # Inventory & Pricing Schema
    ┃   ┃   ┣━━ 📄 message.model.ts # Chat Message Schema
    ┃   ┃   ┣━━ 📄 chatRoom.model.ts # Support Room Thread Logic
    ┃   ┃   ┗━━ 📄 deliveryAssignment.model.ts # Logistics Assignment Logic
    ┃   ┃
    ┃   ┣━━ 📂 lib                 # Server-side Infrastructure
    ┃   ┃   ┣━━ 📄 db.ts           # MongoDB Connection (Singleton Pattern)
    ┃   ┃   ┣━━ 📄 cloudinary.ts   # Multi-media Optimization Config
    ┃   ┃   ┣━━ 📄 mailer.ts       # Nodemailer Transporter Utility
    ┃   ┃   ┣━━ 📄 emitHandler.ts  # Centralized Socket Event Handler
    ┃   ┃   ┗━━ 📄 socket.ts       # Client-side Socket Initialization
    ┃   ┃
    ┃   ┣━━ 📄 middleware.ts       # Global Route Protection & JWT Guard
    ┃   ┗━━ 📄 Provider.tsx        # High-order Context Wrappers
    ┃
    ┣━━ 📄 .env                    # System Secrets & API Credentials
    ┣━━ 📄 .gitignore              # Git Deployment Exclusions
    ┣━━ 📄 next.config.js          # Next.js Advanced Optimizations
    ┣━━ 📄 tailwind.config.ts      # Custom Theme & "Sheryians" Glow Config
    ┗━━ 📄 package.json            # Deployment Scripts & Metadata

---

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js v18.0.0 or higher
• npm v9.0.0 or higher (or yarn / pnpm)
• Next.js v16.21.0 or higher

Installation

1️⃣ Clone the repository

git clone 

2️⃣ Navigate to project directory

cd zestCo main folder

3️⃣ Current Directory

cd zestco 

4️⃣ Current Directory

cd socketServer 

5️⃣ Install dependencies

npm install
# or
yarn install
# or
pnpm install

6️⃣ Start development server (for zestco folder)

npm run dev

or

7️⃣ Start development server(for socketServer folder)

npm run dev

8️⃣ Open in browser (for next.js)

http://localhost:3000

9️⃣ Open in browser (for socket.IO)

http://localhost:4000

---

📜 Available Scripts

Script	Command	Description
🔧 Dev	npm run dev	Start development server with HMR
🏗️ Build	npm run build	Create production build
👁️ Preview	npm run preview	Preview production build locally
🔍 Lint	npm run lint	Run ESLint and auto-fix issues
🧹 Clean	npm run clean	Remove dist and cache folders
📦 Build Prod	npm run build:prod	Clean + Production build

---

🌐 Deployment

This Project is configured for seamless deployment on Vercel:

Manual Deployment

# Build for production
npm run build

# Preview build locally
npm run preview

The dist/ folder contains the production-ready files.

---

🤝 Contributing

Contributions make the open-source community amazing! Any contributions are greatly appreciated.

1. Fork the Project

2. Create your Feature Branch

   git checkout -b feature/AmazingFeature

3. Commit your Changes

   git commit -m '✨ Add some AmazingFeature'

4. Push to the Branch

   git push origin feature/AmazingFeature

5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2024 - 2027 Pintu Kumar

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

---

📞 Contact

Pintu Kumar — Full Stack Developer

🌟 If you found this project helpful, please give it a star!

_{Built with ❤️ and ☕ by Pintu Kumar
© 2026 All Rights Reserved}

---