StoreOps - Complete E-Commerce Platform

StoreOps is a modern, full-stack e-commerce platform consisting of two integrated applications: a comprehensive admin portal for managing multiple stores and a customer-facing storefront. The platform enables businesses to manage products, orders, inventory, and analytics from a single admin interface while providing customers with a seamless shopping experience. Built with Next.js 14 App Router, the platform leverages TypeScript, MySQL with Prisma ORM, Stripe for payments, Clerk for authentication, and Cloudinary for image management.

Admin Portal Features:

• Multi-Store Management: Create and manage multiple stores from a single admin interface with store-specific configurations
• Product Management: Complete CRUD operations with categorization, size/color variants, image galleries, and stock management
• Order Management: Track orders with status management (Created, Processing, Shipped, Delivered, Cancelled) and detailed order views
• Content Management: Billboard management for homepage and category pages, category organization, and attribute management
• Analytics Dashboard: Comprehensive analytics with revenue tracking, order statistics, product metrics, monthly sales trends, and state-wise sales distribution using interactive Recharts visualizations
• Payment Integration: Secure Stripe payment processing with webhook handling for payment confirmation
• RESTful API: Complete API endpoints for all resources accessible by frontend applications

Store Frontend Features:

• Product Browsing: Homepage with featured billboards, product listing with pagination, detailed product pages with image galleries
• Shopping Cart: Add/remove products, quantity management, persistent cart storage, and cart summary
• Product Filtering: Filter by category, size, and color with mobile-responsive interface
• Checkout Flow: Secure checkout process with Stripe integration and order confirmation
• Order Tracking: Order lookup by ID with status display and detailed order views
• Responsive Design: Mobile-first design optimized for all device sizes

Technology Stack:

Admin Portal:

• Framework: Next.js 14 with App Router and Server Components
• Language: TypeScript for type safety
• Database: MySQL with Prisma ORM for type-safe database access
• Authentication: Clerk for secure authentication and protected routes
• Payment Processing: Stripe API with webhook handling
• Image Hosting: Cloudinary for optimized image storage and delivery
• UI Components: Radix UI primitives with custom styling
• Styling: Tailwind CSS with dark/light theme support
• State Management: Zustand for client-side state
• Form Handling: React Hook Form with Zod validation
• Data Tables: TanStack React Table for sortable, filterable tables
• Charts: Recharts for analytics visualizations
• Notifications: React Hot Toast for user feedback

Store Frontend:

• Framework: Next.js 14 App Router
• Language: TypeScript
• Styling: Tailwind CSS
• State Management: Zustand with localStorage persistence for cart
• HTTP Client: Axios for API communication
• UI Components: Headless UI
• Icons: Lucide React

Architecture:

• Multi-tenant Design: Store-based routing with /api/{storeId} pattern
• Server Actions: Next.js Server Actions for data fetching and mutations
• API Routes: RESTful API endpoints for frontend consumption
• Database Schema: Normalized schema with relationships between Stores, Products, Categories, Orders, and related entities
• Authentication Flow: Clerk middleware protecting dashboard routes with user-specific store access
• Payment Flow: Order creation → Stripe session → Payment processing → Webhook confirmation → Order status update
• Image Management: Cloudinary upload in admin portal, optimized delivery in frontend

Database Schema:

• Stores (multi-tenant configuration)
• Billboards (marketing banners)
• Categories (product organization)
• Sizes & Colors (product variants)
• Products (with images, pricing, inventory)
• Orders & OrderItems (transaction management)

API Integration:

• Store frontend consumes admin portal API via NEXT_PUBLIC_API_URL
• All endpoints prefixed with /api/{storeId}
• CORS enabled for cross-origin requests
• Server actions handle API communication in frontend

Admin Portal:

storeops-admin-portal/
├── app/
│   ├── (auth)/              # Authentication routes
│   ├── (dashboard)/         # Protected dashboard
│   │   └── [storeId]/      # Store-specific routes
│   └── api/                # API endpoints
├── actions/                 # Server actions
├── components/              # React components
├── hooks/                   # Custom hooks
├── lib/                     # Utilities & configs
├── prisma/                  # Database schema
└── providers/               # Context providers

Store Frontend:

storeops-store-frontend/
├── app/                     # Routes (home, products, cart, checkout)
├── actions/                 # API server actions
├── components/              # UI components
├── hooks/                   # Cart & preview hooks
└── lib/                     # Utilities

GitHub Repositories:

• Admin Portal: storeops-admin-portal
• Store Frontend: storeops-store-frontend

Live Deployments:

• Admin Portal: storeops-admin.vercel.app
• Store Frontend: creative-kurta.vercel.app (demo showcase)

Documentation:

• API & Setup Guide: StoreOps API Documentation

Both repositories are open source and available for exploration. The admin portal serves as the backend API and management interface, while the store frontend demonstrates how to consume the API to build a customer-facing e-commerce experience.

Prerequisites:

• Node.js 20+
• MySQL database
• Clerk account (authentication)
• Stripe account (payments)
• Cloudinary account (images)

Environment Variables:

• Admin Portal: Database URL, Clerk keys, Stripe keys, Cloudinary config
• Store Frontend: NEXT_PUBLIC_API_URL pointing to admin portal API

Development:

1. Clone both repositories:
   • git clone https://github.com/niranjangirhe/storeops-admin-portal.git
   • git clone https://github.com/niranjangirhe/storeops-store-frontend.git
2. Install dependencies in both projects
3. Configure environment variables
4. Run Prisma migrations in admin portal
5. Start development servers

Both applications deploy seamlessly to Vercel with proper environment configuration.