| Platform | URL | Credentials |
|---|---|---|
| 🛍️ Customer Store | https://shop-stack-black.vercel.app/ | Register your own account |
| 🎛️ Admin Dashboard | https://shop-stack-rqve.vercel.app/ | Email: admin.limited@gmail.comPassword: Admin@1234 |
⚠️ Note: This is a read-only demo environment. You can view all sections except payment information, but cannot modify any data. Changes are not persisted.
📧 Email: admin.limited@gmail.com
🔑 Password: Admin@1234
What you can do in Admin Demo:
- 📊 View dashboard analytics & charts
- 📦 Manage products (create, edit, delete)
- 📋 Track orders & update statuses
- 👥 View customer accounts
- ⚙️ Configure system settings
- 📈 See real-time revenue & order statistics
Features to explore:
- 🏠 Browse beautiful home page with animations
- 📦 Shop products by category
- 🛍️ Add to cart & manage quantities
- 💳 Test checkout flow (Blupal sandbox)
- 👤 Register/Login with email or phone
- 📱 Fully responsive mobile experience
- ✨ Smooth Framer Motion animations
| Feature | Description |
|---|---|
| 🏠 Home Page | Hero section, latest products, categories, features, testimonials, CTA with animated elements |
| 📦 Product Listing | Browse by category with pagination & search |
| 🔍 Product Detail | Full info with images, pricing, reviews |
| 🛍️ Shopping Cart | Persistent localStorage, quantity management, discounts, free shipping threshold |
| 💳 Checkout & Payment | Online order form + Blupal Payment Gateway integration |
| 🔐 Authentication | Login/Register with email/phone, JWT sessions |
| 👤 User Profile | Manage personal information |
| 📱 Responsive Design | Mobile hamburger menu, glassmorphism UI, RTL support |
| ✨ Smooth Animations | Framer Motion, AOS scroll animations, transitions |
| Feature | Description |
|---|---|
| 📈 Dashboard Overview | Real-time stats, live ticker, revenue charts, order status donut, recent orders, top products |
| 📦 Product Management | Full CRUD with categories, brands, tags, inventory tracking |
| 📋 Order Management | Status workflow: Pending → Processing → Shipped → Delivered/Cancelled/Returned |
| 👥 Customer Management | View & manage customer accounts |
| ⚙️ Settings | System configuration |
| 🔐 Admin Auth | Dedicated authentication with RBAC |
| 📊 Data Visualization | Recharts-powered analytics |
- ⚡ Rate Limiting — In-memory API rate limiting with configurable thresholds
- 🔐 Token-based Auth — JWT + cookie-based session management
- 💰 Blupal Payment — Invoice creation, payment links, webhooks, transaction tracking
- 🔍 SEO Optimized — Full metadata, Open Graph, Twitter Cards
- 🛡️ Error Handling — Error boundaries, loading states, toast notifications
| Layer | Technology | Version |
|---|---|---|
| 🏗️ Framework | Next.js | 16 (App Router) |
| ⚛️ UI Library | React | 19 |
| 🎨 Styling | Tailwind CSS | v4 |
| 🗄️ Database | MongoDB + Mongoose | Latest |
| 🔐 Authentication | JWT + Bcryptjs | Latest |
| 💳 Payment | Blupal | Iranian Gateway |
| 📝 Forms | React Hook Form + Yup | Latest |
| 🎬 Animations | Framer Motion + AOS | Latest |
| 📊 Charts | Recharts | Latest |
| 🎯 Icons | Lucide React + Custom SVGs | Latest |
| 🔔 Notifications | react-hot-toast | Latest |
| 🖼️ Image Processing | Sharp | Latest |
| 🛠️ Utilities | Lodash + Persian Tools | Latest |
apps/
├── 🌐 frontend/ # Customer Store (Port 3000)
│ ├── app/
│ │ ├── page.jsx # 🏠 Home Page
│ │ ├── products/ # 📦 Product Listing & Detail
│ │ ├── cart/ # 🛍️ Shopping Cart & Checkout
│ │ ├── payment/ # 💳 Payment Page
│ │ ├── auth/ # 🔐 Login & Register
│ │ ├── profile/ # 👤 User Profile
│ │ ├── about/ # ℹ️ About Page
│ │ ├── contact/ # 📞 Contact Page
│ │ ├── api/ # 🔌 API Routes (products, auth, cart, orders, payments, contact)
│ │ ├── layout.js # 🎭 Root Layout (providers, metadata, SEO)
│ │ └── globals.css # 🎨 Global Styles
│ ├── components/ # 🧩 Shared & Feature Components
│ ├── context/ # 🔄 Cart & Auth Context Providers
│ ├── models/ # 🗄️ Mongoose Models (User, Product, Order, Payment)
│ ├── lib/ # 🛠️ Utilities (auth, validation, db connection)
│ ├── data/ # 📊 Static Data (categories, testimonials)
│ ├── metadata/ # 🔍 SEO Metadata Configs
│ └── proxy.js # ⚡ Rate Limiting & Auth Middleware
│
├── 🎛️ admin/ # Admin Dashboard (Port 3001)
│ ├── app/
│ │ ├── dashboard/ # 📊 Admin Dashboard
│ │ │ ├── page.jsx # Overview (stats, charts, recent orders, top products)
│ │ │ ├── products/ # 📦 Product CRUD
│ │ │ ├── orders/ # 📋 Order Management
│ │ │ ├── customers/ # 👥 Customer Management
│ │ │ ├── settings/ # ⚙️ System Settings
│ │ │ └── layout.jsx # 🎭 Dashboard Layout with Sidebar
│ │ ├── auth/login/ # 🔐 Admin Login
│ │ ├── api/ # 🔌 Admin API Routes (dashboard, products, orders, users, categories, settings, messages)
│ │ └── layout.jsx # 🎭 Auth Layout
│ ├── components/ # 🧩 Admin Components
│ └── lib/ # 🛠️ Admin Utilities
- ✅ Node.js 18+ & npm
- ✅ MongoDB (local or cloud)
- ✅ Blupal merchant account (for payments)
- ✅ JWT secret key
🌐 Frontend (.env)
NEXT_PUBLIC_API_URL=http://localhost:3000
NEXT_PUBLIC_ADMIN_URL=http://localhost:3001
JWT_SECRET=your-super-secret-key🎛️ Admin (.env)
NEXT_PUBLIC_API_URL=http://localhost:3000
NEXT_PUBLIC_ADMIN_URL=http://localhost:3001
JWT_SECRET=your-super-secret-key# 📥 Clone the repository
git clone https://github.com/Mr-Syntax1/ShopStack.git
cd ShopStack/apps
# 📦 Install frontend dependencies
cd frontend
npm install
# 📦 Install admin dependencies
cd ../admin
npm install# Terminal 1 — 🌐 Frontend (Customer Store)
cd frontend
npm run dev
# → http://localhost:3000
# Terminal 2 — 🎛️ Admin (Dashboard)
cd admin
npm run dev
# → http://localhost:3001cd frontend
npm run build
npm start
cd ../admin
npm run build
npm start| App | Purpose | Port |
|---|---|---|
frontend/ |
🛍️ Customer storefront with shopping, cart, checkout | 3000 |
admin/ |
🎛️ Admin dashboard with management tools | 3001 |
graph LR
A["User Login/Register"] --> B["/api/auth/login"]
B --> C["JWT Token in Cookies"]
C --> D["/api/auth/me"]
D --> E["AuthProvider Context"]
E --> F["proxy.js Middleware"]
F --> G{"User Type"}
G -->|Admin| H["/dashboard"]
G -->|Customer| I["/products"]
- 📝 User registers/logs in via
/api/auth/loginor/api/auth/register - 🎫 Server returns JWT token stored in cookies
- 👤 Frontend reads user info from
/api/auth/me - 🔄
AuthProvidercontext manages global auth state - ⚡
proxy.jsmiddleware validates tokens on protected routes - 🎯 Role-based routing: admins → dashboard, users → storefront
graph LR
A["Add to Cart"] --> B["localStorage via CartContext"]
B --> C["Quantity, Discount, Price Tracking"]
C --> D["Checkout Form Validation"]
D --> E["/api/payments/create"]
E --> F["Blupal Payment Link"]
F --> G["Redirect to Blupal"]
G --> H["Success → Clear Cart"]
- 🛒 Cart stored in
localStorageviaCartContext - 📦 Products added with quantity, discount, price tracking
- ✅ Checkout validates form with Yup schema via React Hook Form
- 💳 Order submitted to
/api/payments/create→ Blupal payment link - 🔄 User redirected to Blupal for payment
- 🗑️ Cart cleared on successful order creation
- 🗄️ Separate Admin Database — Read-only mode supported
⚠️ Visual Warning Banner — When in read-only mode- 🔐 Role-Based Routing — Regular users → storefront, admins → dashboard
We love contributions! 🎉 Follow these steps:
# 1️⃣ Fork the repository
# 2️⃣ Create your feature branch
git checkout -b feature/amazing-feature
# 3️⃣ Commit your changes
git commit -m '✨ Add amazing feature'
# 4️⃣ Push to the branch
git push origin feature/amazing-feature
# 5️⃣ Open a Pull Request
