Welcome to E-commerce Starter

Launch your online store quickly with this comprehensive e-commerce solution. Built with DashForm and Material-UI, this kit includes everything needed for a modern shopping experience.

What's Included

• Product Catalog - Beautiful product grid and detail pages with image galleries
• Shopping Cart - Persistent cart with quantity controls and price calculations
• Checkout Flow - Multi-step checkout with address validation and payment processing
• Order Management - Complete order history and tracking for customers
• Payment Integration - Ready-to-use Stripe integration with webhook handling
• Inventory Management - Track stock levels and handle out-of-stock scenarios
• Product Search & Filters - Advanced search with category and price filters
• Customer Reviews - Product rating and review system
• Wishlist - Save products for later with persistent storage

Tech Stack

• React 18
• TypeScript
• DashForm for checkout and forms
• Material-UI components
• Stripe for payments
• React Router
• Redux Toolkit for state management
• Vite for development

Getting Started

1. Download and extract the starter kit
2. Install dependencies: npm install
3. Configure Stripe keys in .env
4. Start development server: npm run dev
5. Browse the demo store at http://localhost:5173

Prerequisites

• Node.js 18 or higher
• npm or yarn
• Stripe account (for payment processing)
• Basic understanding of e-commerce concepts

Project Structure

ecommerce-starter/
├── src/
│   ├── components/
│   │   ├── ProductGrid/
│   │   ├── ProductDetail/
│   │   ├── Cart/
│   │   └── Checkout/
│   ├── pages/
│   │   ├── Home.tsx
│   │   ├── Products.tsx
│   │   ├── ProductDetail.tsx
│   │   ├── Cart.tsx
│   │   └── Checkout.tsx
│   ├── store/
│   ├── services/
│   └── main.tsx
├── package.json
└── README.md

Key Features

Product Catalog

Display products in a responsive grid with filtering and sorting options. Each product has a detailed page with image gallery and variants.

Shopping Cart

Add products to cart with real-time price calculations. Cart persists across sessions and includes quantity controls.

Checkout Process

Guided multi-step checkout with:

1. Shipping address (with validation)
2. Shipping method selection
3. Payment information
4. Order review and confirmation

Payment Processing

Integrated with Stripe for secure payment processing. Supports credit cards, digital wallets, and more.

Order Management

Customers can view order history, track shipments, and download invoices.

Product Search

Fast client-side search with category filtering, price ranges, and sorting options.

Configuration

Customize your store in src/config/store.ts:

• Currency and locale settings
• Shipping methods and rates
• Tax calculation rules
• Product categories
• Payment methods

Stripe Integration

Configure Stripe in .env:

VITE_STRIPE_PUBLIC_KEY=pk_test_...
VITE_STRIPE_WEBHOOK_SECRET=whsec_...

Test mode included for development.

Backend API

The kit includes a mock API for development. For production:

1. Implement product and order APIs
2. Set up Stripe webhook handlers
3. Configure inventory management
4. Implement user authentication

Support

Get help with your store:

• Email: [email protected]
• Documentation: https://dashforge.dev/docs/ecommerce
• Community: https://discord.gg/dashforge

License

Commercial license. One license per project. Contact us for multi-site licensing.