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.

​
Installation Guide

This guide walks you through setting up the complete Sabbels Handmade E-Commerce platform on your local machine for development.

​
Prerequisites

Before you begin, ensure you have the following installed and configured:
  • Node.js ≥ 18 (recommended: v20 LTS)
  • npm or pnpm package manager
  • Git for cloning the repository
  • Supabase account with a configured project
  • Stripe account with API keys
This guide assumes you’re using a Unix-like system (macOS, Linux, WSL). Windows users should use WSL2 for the best experience.

​
Installation Overview

1

Clone the repository

Get the source code on your local machine
2

Set up the database

Configure Supabase and run database migrations
3

Install and configure the API

Set up the Express backend server
4

Install and configure the client

Set up the React frontend application
5

Verify the installation

Test that everything works together

​
Step 1: Clone the Repository

Clone the repository and navigate to the project directory: 
git clone https://github.com/aluxey/E-Commerce.git
cd E-Commerce
The repository structure: 
E-Commerce/
├── client/             # React frontend
├── api/                # Express backend
└── Database/           # SQL scripts and migrations

​
Step 2: Set Up the Database

​
Create a Supabase Project

  1. Go to supabase.com and sign in
  2. Click New Project
  3. Fill in the project details:
    • Name: sabbels-handmade (or your choice)
    • Database Password: Generate a strong password
    • Region: Choose closest to your location
  4. Wait for the project to be provisioned (~2 minutes)

​
Run Database Migrations

Execute the SQL scripts in the following order via the Supabase SQL Editor:
1

Create the database schema

Navigate to SQL Editor in your Supabase dashboard, create a new query, and paste the contents of Database/BDD_struct.sql. This creates all tables, indexes, triggers, and constraints.
# Copy the file contents
cat Database/BDD_struct.sql
Click Run in the SQL Editor.
2

Set up Row Level Security

Create a new query and paste the contents of Database/RLS.sql. This sets up all security policies.
cat Database/RLS.sql
Click Run in the SQL Editor.
3

Load seed data (optional)

For development, you can load sample data by running Database/SEED.sql:
cat Database/SEED.sql
Click Run in the SQL Editor. This creates sample categories, colors, and products.

​
Configure Storage

  1. In your Supabase dashboard, go to Storage
  2. Create a new bucket named product-images
  3. Set the bucket to Public
  4. Configure the following policies (or use the SQL in Database/RLS.sql):
    • Anyone can read images
    • Only admins can upload/delete images

​
Get Your Supabase Credentials

You’ll need these for the next steps:
  1. Go to Project Settings → API
  2. Copy the following:
    • Project URL (e.g., https://xxx.supabase.co)
    • Anon Public Key (starts with eyJ...)
    • Service Role Key (starts with eyJ...)
Never commit your service_role key to version control. It bypasses all RLS policies.

​
Step 3: Install and Configure the API

​
Install Dependencies

cd api
npm install

​
Configure Environment Variables

Create a .env file in the api/ directory: 
cp .env.example .env
Edit .env and add your credentials: 
# Server
PORT=3001
NODE_ENV=development
CLIENT_ORIGIN=http://localhost:5173

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

# Stripe
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

# Email (optional for development)
RESEND_API_KEY=re_...
  1. Log in to stripe.com
  2. Go to Developers → API keys
  3. Copy your Secret key (starts with sk_test_)
  4. For webhooks, see Stripe Configuration

​
Start the API Server

npm run dev
You should see: 
[api] listening on :3001
The API will be available at http://localhost:3001.

​
Test the API

Open a new terminal and test the health endpoint: 
curl http://localhost:3001/api/health
Expected response: 
{"ok":true}

​
Step 4: Install and Configure the Client

​
Install Dependencies

Open a new terminal window: 
cd client
npm install

​
Configure Environment Variables

Create a .env file in the client/ directory: 
cp .env.example .env
Edit .env and add your credentials: 
# Supabase
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-public-key

# API
VITE_API_URL=http://localhost:3001
The VITE_ prefix is required for Vite to expose these variables to the client.

​
Start the Development Server

npm run dev
You should see: 
  VITE v7.0.0  ready in 324 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
The application will be available at http://localhost:5173.

​
Step 5: Verify the Installation

​
Create an Admin User

  1. Open http://localhost:5173 in your browser
  2. Click Sign Up and create an account
  3. Go to your Supabase dashboard → Table Editor → users
  4. Find your user and change the role field from client to admin

​
Test Key Features

Browse Products

Navigate to the home page and verify products are displayed (if you loaded seed data)

Admin Dashboard

Go to /admin and verify you can access the admin panel

Add to Cart

Click on a product and add it to your cart

Language Switch

Toggle between German and French using the language selector

​
Verify API Connection

Check the browser console for any errors. You should see successful API calls to:
  • Supabase (authentication, data fetching)
  • Your local API server (health checks)

​
Common Issues

  • Verify your SUPABASE_URL and credentials are correct
  • Check that all SQL scripts ran successfully without errors
  • Ensure RLS policies are properly configured
  • Make sure the API server is running on port 3001
  • Verify CLIENT_ORIGIN in the API .env includes http://localhost:5173
  • Check that both servers are running
  • Ensure you’re using Node.js 18 or higher: node --version
  • Clear node_modules and reinstall: rm -rf node_modules && npm install
  • Check for missing environment variables
  • Verify you’re using test mode keys (starting with sk_test_ and pk_test_)
  • For local webhook testing, see Stripe Configuration
  • Check the API server logs for webhook errors

​
Next Steps

Now that you have everything installed:

Quickstart Guide

Follow the quickstart to understand the core workflows

Admin Guide

Learn how to manage products, orders, and customers

API Reference

Explore the backend API endpoints

Deployment

Deploy your instance to production

​
Development Workflow

​
Running Both Servers Concurrently

For convenience, you can run both servers in parallel. In the root directory, you can create a package.json with a dev script: 
{
  "scripts": {
    "dev:api": "cd api && npm run dev",
    "dev:client": "cd client && npm run dev"
  }
}
Or use a tool like concurrently: 
npm install -g concurrently
concurrently "cd api && npm run dev" "cd client && npm run dev"

​
Hot Reloading

  • Client: Vite provides instant hot module replacement (HMR)
  • API: Node.js --watch flag provides automatic server restarts

​
Database Changes

When modifying the database schema:
  1. Create a new migration file in Database/migrations/
  2. Follow the naming convention: YYYYMMDD_description.sql
  3. Run the migration in the Supabase SQL Editor
  4. Document the changes in your changelog
For more details, see Database Migrations.

Build docs developers (and LLMs) love

Get started for freeTalk to us