A modern, production-ready e-commerce solution with separate admin and storefront applications
ShopSwift is a comprehensive full-stack e-commerce platform built with modern web technologies. The project is organized as a Monorepo using NPM Workspaces, ensuring shared logic and components across all applications.
- Admin Dashboard - Complete product and order management system.
- Customer Storefront - High-performance, responsive shopping interface.
- Shared Package - Unified UI components, types, and API logic used by both applications.
Both applications are built with Next.js 15, React 19, and TypeScript, deployed on Vercel for optimal performance and scalability.
- Product Management: Full CRUD operations with image uploads and category mapping.
- Order Tracking: Real-time management of order statuses and customer fulfillment.
- Analytics: Revenue metrics, top products, and customer growth tracking.
- Bulk Operations: Efficiently manage large product sets and category hierarchies.
- Dynamic Shopping: Fast, responsive grid with advanced filtering and search.
- Unified Cart: Server-synchronized cart with optimistic local updates.
- Checkout Flow: Secure, UUID-idempotent checkout process with order confirmation.
- Account Management: Comprehensive profile, order history, and wishlist management.
- Design System: Unified brand icons and UI primitives.
- API Core: Centralized Axios instance with standardized error handling.
- Type Safety: Shared TypeScript interfaces for products, orders, and users.
flowchart LR
subgraph Monorepo["NPM workspaces"]
AD["admin<br/>Next.js, :3000"]
SF["storefront<br/>Next.js, :3001"]
SH["packages/shared<br/>API client, hooks, types"]
UI["packages/ui<br/>primitives, patterns, theme"]
AD --> SH
SF --> SH
AD --> UI
SF --> UI
SH --> UI
end
Browser["Browser"] --> AD
Browser --> SF
AD -->|"Axios, NEXT_PUBLIC_API_BASE_URL"| GW["API Gateway :8080<br/>(E-Commerce-backend)"]
SF -->|"Axios, cookies + JWT"| GW
GW --> SVC["identity / catalog / order /<br/>notification / agent"]
SF -->|"redirect"| Stripe["Stripe Checkout"]
Stripe -->|"webhook"| GW
Both apps talk only to the API gateway. The backend lives in ../E-Commerce-backend.
E-Commerce/
├── admin/ # Admin dashboard (Next.js, Pages Router): products, orders, inventory,
│ # customers, analytics, marketing, shipping, returns, reviews, support
├── storefront/ # Customer storefront (Next.js, Pages Router): products, cart, checkout,
│ # account, payment, store
├── packages/
│ ├── shared/ # API client, hooks, types, utils, shared components
│ └── ui/ # Design system: primitives, patterns, theme
├── package.json # Root workspace configuration
└── README.md
- Node.js 18.x or higher
- NPM 7+ (for Workspace support)
- Clone and Install
git clone https://github.com/yashrajoria/E-Commerce.git
cd E-Commerce
npm installRun both applications concurrently:
npm run dev:bothOther scripts: build:both, lint:both, typecheck.
- Admin Dashboard: http://localhost:3000
- Storefront: http://localhost:3001
Backend must be running (see ../E-Commerce-backend). Point the apps at it via .env.local in each app:
| Variable | Purpose |
|---|---|
NEXT_PUBLIC_API_BASE_URL |
API gateway URL (e.g. http://localhost:8080) |
NEXT_PUBLIC_SITE_URL |
Public site URL |
NEXT_PUBLIC_DEFAULT_STORE_SLUG |
Default store (multi-tenant) |
NEXT_PUBLIC_CURRENCY, NEXT_PUBLIC_LOCALE |
Formatting |
Or run them individually:
npm run dev:admin
npm run dev:storefront- Frameworks: Next.js 15 (App Router & Pages Router)
- UI Logic: React 19
- Styling: TailwindCSS
- Components: Radix UI & Lucide Icons
- Data Fetching: TanStack Query v5
- State Management: React Context API & Refs
- Animations: Framer Motion
- Admin Dashboard: shopswift-admin.vercel.app
- Storefront: shopswift-storefront.vercel.app
Yash Rajoria
- GitHub: @yashrajoria
- LinkedIn: yashrajoria
⭐ Star this repository if you find it helpful!
Made with ❤️ by Yash Rajoria