E-Commerce Python

A simple, full-stack e-commerce example application with a FastAPI backend and a React + TypeScript + Vite frontend.

Project Description: https://roadmap.sh/projects/ecommerce-api

Quick links

• Live API docs: http://localhost:8000/docs (when backend is running)

Features

• User authentication (access + refresh tokens)
• Product listing, search and filters
• Shopping cart and checkout (Stripe)
• Admin panel for product CRUD and image uploads
• Events to refresh categories immediately after admin changes
• File/image storage using MinIO (S3-compatible)

Tech stack

• Backend: FastAPI, SQLAlchemy, Alembic
• Frontend: React, TypeScript, Vite, Tailwind CSS
• Database: Postgres (development via Docker)
• Object storage: MinIO
• Payment: Stripe

Quickstart (recommended: Docker Compose)

The easiest way to run the whole stack is with Docker Compose. From the project root:

docker compose up --build

This starts the backend (http://localhost:8000) and the frontend (http://localhost:5173) plus Postgres and MinIO.

Open the frontend at http://localhost:5173 and the API docs at http://localhost:8000/docs.

Environment variables

• Frontend (in frontend/.env or .env):
  • VITE_BACKEND_URL — base URL for the API (e.g. http://localhost:8000)
  • VITE_SUCCESS_URL / VITE_CANCEL_URL — Stripe redirect URLs used after checkout
• Backend (see backend/.env or Docker env in docker-compose.yaml):
  • POSTGRES_* — Postgres connection string
  • MINIO_* — MinIO credentials and endpoint
  • STRIPE_API_KEY — for Stripe payments
  • SECRET_KEY - JWT key for generate json token (you can use any jwt generator)
• docker-compose.yaml (.env.example change to .env):
  • Needs to follow backend .env for Postgres and MinIO variables

Note: When using Docker Compose the compose file already configures sensible defaults for local development.

Admin & data

• Needs to create an "admin" user inside postgres after docker compose up manually with role admin.
• The admin UI is in the frontend under the Admin page. Use the admin to create and edit products and categories.
• After creating or updating products/categories via the Admin UI, the frontend broadcasts a categories-updated CustomEvent so the Sidebar refreshes immediately.