Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/aluxey/E-Commerce/llms.txt

Use this file to discover all available pages before exploring further.

​
Quickstart Guide

This quickstart guide will get you from zero to a working e-commerce platform in about 15 minutes. We’ll set up a minimal configuration so you can explore the platform and start selling handmade products.

​
What You’ll Accomplish

By the end of this guide, you’ll have:
  • A working Supabase database with sample products
  • The frontend running locally
  • The API server processing payments
  • An admin account to manage your store
For a more detailed setup, see the full installation guide.

​
Prerequisites

Before starting, make sure you have:
  • Node.js 18+ installed (download)
  • A Supabase account (sign up)
  • A Stripe account for backend webhooks (sign up)

​
Quick Setup

1

Clone and Install

Get the code and install dependencies for both client and API:
git clone https://github.com/aluxey/E-Commerce.git
cd E-Commerce

# Install API dependencies
cd api && npm install

# Install client dependencies
cd ../client && npm install
2

Set Up Supabase

Create a new Supabase project and run the database setup:
  1. Go to supabase.com and create a new project
  2. Wait for provisioning (~2 minutes)
  3. Navigate to the SQL Editor
  4. Copy and run each script in order:
    • Database/BDD_struct.sql - Creates tables
    • Database/RLS.sql - Sets up security
    • Database/SEED.sql - Loads sample data
The seed data includes 6 sample products so you can test the platform immediately.
  1. Go to Storage → Create bucket product-images (public)
  2. Copy your credentials from Project Settings → API:
    • Project URL
    • Anon public key
    • Service role key
3

Configure the API

Create api/.env with your credentials:
PORT=3001
CLIENT_ORIGIN=http://localhost:5173

SUPABASE_URL=https://your-project.supabase.co
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

STRIPE_SECRET_KEY=sk_test_your-stripe-key
  1. Log in to dashboard.stripe.com
  2. Enable Test mode (toggle in top right)
  3. Go to Developers → API keys
  4. Copy the Secret key (starts with sk_test_)
4

Configure the Client

Create client/.env with your credentials:
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key
VITE_API_URL=http://localhost:3001
Payment processing is handled through SumUp redirect. No additional payment provider credentials needed for the frontend.
5

Start Everything

Open two terminal windows:Terminal 1 - API Server:
cd api
npm run dev
Terminal 2 - Frontend:
cd client
npm run dev
You should see:
API: [api] listening on :3001
Client: Local: http://localhost:5173/

​
Explore the Platform

​
As a Customer

1

Browse Products

Open http://localhost:5173 and you’ll see the home page with featured products from the seed data.Try:
  • Searching for products
  • Filtering by category or color
  • Adjusting the price range slider
2

Add to Cart

Click on any product to view details. Select a size and color, then click Add to Cart.The cart persists in local storage, so you can close your browser and items will still be there.
3

Create an Account

Click Sign Up to create an account. You’ll need this to checkout.Use any email and a password (min 6 characters). Supabase will send a confirmation email in development mode.
4

Test Checkout

Go to your cart and click Proceed to Checkout.The system will:
  1. Create an order in the database
  2. Redirect you to SumUp’s payment page in a new tab
  3. Clear your cart after order creation
Payment is processed through SumUp. In production, configure your SumUp merchant account. For development, the order is created but you’ll need a test SumUp link.

​
As an Admin

1

Promote Yourself to Admin

  1. Go to your Supabase dashboard → Table Editor → users
  2. Find your user account
  3. Change the role column from client to admin
  4. Save
2

Access the Admin Dashboard

Go to http://localhost:5173/adminYou’ll see:
  • KPI widgets: Revenue, orders, average order value
  • Quick actions: Manage products, orders, customers
3

Create a Product

  1. Click Products → Create New
  2. Fill in the product wizard:
    • Info: Name, description, category, price
    • Variants: Add size options with stock and pricing
    • Images: Upload product photos
    • Review: Verify and publish
  3. Click Create Product
Your product is now live on the storefront!
4

Manage Orders

Click Orders to see all customer orders. You can:
  • View order details (items, customer, shipping)
  • Update order status (pending → processing → shipped → delivered)
  • Track payment information

​
What’s Next?

Now that you have the platform running, here’s what to explore:

User Guide

Learn all customer-facing features

Admin Guide

Master the admin dashboard

Configure Services

Set up Stripe webhooks, email notifications

Deploy to Production

Launch your store to the world

​
Key Features to Try

Click the language switcher in the top navigation to toggle between German and French. All UI text updates instantly.See Internationalization to add more languages.
Products support multiple variants (sizes) with independent pricing and stock levels. Each variant can have different colors.Learn more in Product Variants.
As an admin, go to Customer Photos to create a gallery of customer-submitted photos showcasing your products.See Customer Photos.
Customers can view their order history and status at /orders. Status updates are visible in real-time.Details in Order Tracking.

​
Common Questions

Use the admin dashboard at /admin → Products → Create New. Follow the 4-step wizard to add products with variants and images.
The platform uses SumUp for payment processing. Orders are created in the database, but payment is handled externally through SumUp. You’ll need to configure your SumUp merchant account and payment link for actual payments. The backend uses Stripe webhooks for order status updates.
The frontend uses custom CSS with CSS variables. Edit files in client/src/styles/ to customize colors, fonts, and spacing. See variables.css for theme tokens.
No, authentication is required for checkout to track orders and send confirmation emails. Customers must create an account or sign in.

​
Need Help?

If you run into issues:
  1. Check the console - Browser DevTools (F12) shows API errors and warnings
  2. Verify environment variables - Ensure all .env values are correct
  3. Check server logs - Both terminal windows show request logs and errors
  4. Review the installation guide - Full installation guide has troubleshooting tips

Installation Guide

Detailed setup with troubleshooting

API Reference

Backend API documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us