This is a production-ready online store I built with Claude to learn Typescript, React and explore a couple of tools and concepts related to Redis, Docker, Stripe, MailHog, AWS and Github Actions. Claude has filled some gaps that were needed to make this production-ready, but I've focused primarily on those tools.

It's a full e-commerce platform: customers can browse a catalog, add items to a cart, register / log in, check out via Stripe, and view their order history. Admins can manage products, categories, inventory and images from a role-gated admin panel.

1. What this app does
2. Live demo flow
3. Tech stack
4. Architecture at a glance
5. Repo layout
6. Quick start (local dev)
7. Stripe setup
8. How to use the app
9. Available scripts
10. Testing
11. Deploying to AWS
12. Documentation index
13. License

I've tried to solve both the customer facing and merchant facing sides:

• Browse the catalog — search by keyword, filter by category, sort by price/newest, paginate. Lazy-loaded images, mobile-friendly grid.
• Product detail pages — image gallery, full description, stock level, "Add to cart" with optimistic UI updates.
• Shopping cart — works for both anonymous guests (cookie-backed) and logged-in users (DB-backed). On login, the guest cart is automatically merged into the user account.
• Account management — signup with email verification, login, password reset, profile, shipping addresses, order history.
• Checkout — Stripe-hosted checkout collects payment securely; we never see card numbers. Orders are created server-side via a signed webhook, with stock decremented inside a database transaction so the same item can't be oversold.
• Order history — list view + detail page showing snapshot of items, prices, status, and shipping address at time of purchase.

• Product CRUD — create, edit, deactivate (soft-delete). Unique slugs, price in cents, stock, category assignment.
• Image upload — direct browser-to-S3 upload using presigned URLs. Multiple images per product, ordered.
• Category CRUD — name + slug + optional description. Blocks deletion if products still reference the category.
• Audit log — every admin write goes to an AuditLog table: who-did-what-when, with before/after snapshots.

• Production-grade auth — JWT access tokens (15 min) + rotating refresh tokens (httpOnly, Secure cookies, 30 days), bcrypt password hashing.
• CSRF protection — Origin/Referer allowlist on cookie-mutating endpoints.
• Rate limiting — Redis-backed, shared across multiple API instances.
• Idempotent webhooks — Stripe events deduped via (provider, eventId) unique constraint; safe to retry.
• Observability — Pino structured logs with request IDs, Sentry error tracking, Prometheus /metrics endpoint exposing RED metrics + Node defaults.
• Threat model — documented OWASP Top 10 checklist + mitigations.
• AWS deployment — Terraform modules for VPC, RDS, ElastiCache, ECS Fargate, ALB, CloudFront, S3, WAF, Secrets Manager. Separate staging and prod environments with different sizing.
• CI/CD — GitHub Actions: lint, typecheck, test, build, Trivy security scan on every PR; auto-deploy to staging on merge; gated deploy to prod on git tag.

After setup, here's what works end-to-end:

1. Open http://localhost:5173 → home page with "Browse products" CTA
2. Click Products → browse catalog (30 sample products in 6 categories)
3. Use the search box, category filter, and sort dropdown — URL updates so you can share / bookmark
4. Click a product → detail page with image gallery + Add to cart
5. Add to cart (works as guest — cookie holds your cart)
6. Click Sign in → log in with customer@example.com / CustomerDemo1!
7. Your guest cart is automatically merged into your account
8. Click Cart → adjust quantities, remove items, see live subtotal
9. Proceed to checkout → shipping form → Stripe redirect (needs Stripe keys; see below)
10. After payment → order appears at Orders within seconds (via webhook)
11. Log out, log back in as admin@example.com / AdminChangeMe1!
12. Header now shows an Admin link → product list, create/edit forms, image upload, category management

A pnpm monorepo holds it all together, so the frontend and backend can share TypeScript types and Zod validators — there's a single source of truth for "what does a Product look like."

[browser :5173] ─► Vite dev server ─► proxies /api/* ─► [Fastify API :3001]
                                                        │
                                                        ├─► Postgres :5432   (Docker)
                                                        ├─► Redis :6379      (Docker)
                                                        ├─► MinIO :9000      (Docker, pretend S3)
                                                        └─► Mailhog :1025    (Docker, pretend SES)

[browser]
   │  HTTPS
   ▼
CloudFront + WAF
   ├─ /                → S3 (React SPA static files)
   ├─ /images/*        → S3 (product images)
   └─ /api/*           → ALB → ECS Fargate (Fastify API)
                              │
                              ├─► RDS Postgres 16 (Multi-AZ, encrypted)
                              ├─► ElastiCache Redis (primary + replica)
                              ├─► S3 (presigned image uploads)
                              ├─► SES (transactional email)
                              └─► Stripe (checkout sessions + webhooks)

Full Mermaid diagram + cost estimate in docs/aws-architecture.md.

shopping-app/
├── apps/
│   ├── api/                      # Fastify API server (Node)
│   │   ├── src/                  # routes, auth, cart, orders, observability
│   │   ├── prisma/               # schema + migrations + seed
│   │   ├── test/                 # vitest integration tests
│   │   ├── Dockerfile            # multi-stage, distroless runtime image
│   │   └── .env.example
│   │
│   └── web/                      # React SPA (Vite)
│       ├── src/
│       │   ├── pages/            # route components
│       │   ├── pages/admin/      # admin-only pages
│       │   ├── components/       # reusable UI bits
│       │   ├── auth/             # AuthContext + ProtectedRoute
│       │   └── lib/              # typed API clients
│       ├── Dockerfile            # builds bundle, serves with nginx
│       ├── nginx.conf
│       └── .env.example
│
├── packages/
│   └── shared/                   # Zod schemas + Money type + shared utils
│       └── src/schemas/          # auth, cart, order, product, admin
│
├── e2e/                          # Playwright browser tests
│   └── tests/smoke.spec.ts       # golden path: browse → cart → login → checkout
│
├── load-tests/
│   └── smoke.js                  # k6 smoke profile with SLO thresholds
│
├── infra/
│   └── terraform/
│       ├── bootstrap/            # one-time: state bucket + lock table + OIDC role
│       ├── modules/              # reusable: network, rds, redis, ecs-*, s3-cdn, waf, secrets
│       └── envs/{staging,prod}/  # per-environment wiring
│
├── docs/
│   ├── architecture.md           # system overview + request lifecycle
│   ├── aws-architecture.md       # production AWS topology + cost
│   ├── security.md               # threat model + OWASP checklist
│   ├── launch-checklist.md       # go-live checklist (60+ items)
│   ├── runbooks/                 # deploy, incident response
│   └── adr/                      # Architecture Decision Records
│
├── .github/
│   ├── workflows/
│   │   ├── ci.yml                # lint, typecheck, test, audit, build, Docker scan
│   │   └── deploy.yml            # PR plan + main→staging + tag→prod
│   └── dependabot.yml
│
├── docker-compose.yml            # local: postgres + redis + minio + mailhog
├── pnpm-workspace.yaml           # monorepo configuration
└── tsconfig.base.json            # shared strict TS settings

Node 22/25 work for local dev. CI pins Node 20.

# 1. Get dependencies
pnpm install

# 2. Start backing services (Postgres, Redis, MinIO, Mailhog)
docker compose up -d
docker compose ps                       # all four should say "healthy"

# 3. Copy env files (gitignored copies of the *.example files)
cp apps/api/.env.example apps/api/.env
cp apps/web/.env.example apps/web/.env

# 4. Create the database schema + seed sample data
pnpm db:migrate:dev                     # creates tables
pnpm db:seed                            # 6 categories + 30 products + 2 users

# 5. Run everything (api + web with hot reload)
pnpm dev

Open http://localhost:5173.

docker compose down        # stop services, keep data
docker compose down -v     # stop AND delete all data (fresh start next time)

The cart and order routes work without Stripe, but /checkout/session needs real test-mode keys. Free, takes ~5 minutes.

1. Sign up at https://dashboard.stripe.com/register. After signup, ensure the toggle in the top-right says "Test mode" (yellow banner).
2. Grab your Secret key from https://dashboard.stripe.com/test/apikeys (starts with sk_test_...) and put it in apps/api/.env:

   STRIPE_SECRET_KEY=sk_test_51...
   

3. Install the Stripe CLI and have it forward webhooks to your local API:

   brew install stripe/stripe-cli/stripe
   stripe login
   stripe listen --forward-to localhost:3001/webhooks/stripe

   It prints a whsec_... — paste it into apps/api/.env:

   STRIPE_WEBHOOK_SECRET=whsec_...
   

   Leave stripe listen running while you test — it forwards real Stripe events to your local API so order creation actually happens.
4. Restart pnpm dev so the API picks up the new env vars.
5. In the browser: add a product to cart → Proceed to checkout → fill in the address → you'll redirect to Stripe's hosted page.
6. Use card 4242 4242 4242 4242, any future expiry (12/34), any CVC.
7. You'll land on /checkout/success and the order appears at /orders within 1–2 seconds.

Log in as admin@example.com → an Admin link appears in the header.

A non-admin visiting /admin gets Access denied.

Run from the repo root.

Per-workspace shortcuts:

End-to-end deploy needs an AWS account + a Route 53 hosted zone. Detailed topology, costs and trade-offs are in docs/aws-architecture.md.

One-time bootstrap (once per AWS account):

cd infra/terraform/bootstrap
terraform init
terraform apply -var "github_org=YOUR_ORG" -var "github_repo=shopping-app"

Copy the printed github_role_arn into .github/workflows/deploy.yml as AWS_ROLE_ARN.

Provision staging:

cd infra/terraform/envs/staging
cp terraform.tfvars.example terraform.tfvars   # fill in zone id + hostnames
terraform init
terraform apply

Seed the app secrets (Terraform creates them empty so plaintext is never in state):

aws secretsmanager put-secret-value --secret-id shop-staging/jwt-secret \
  --secret-string "$(openssl rand -base64 48)"
aws secretsmanager put-secret-value --secret-id shop-staging/stripe-secret-key \
  --secret-string "sk_test_..."
# …repeat for the others (see launch-checklist.md)

First deploy kicks off automatically when CI pushes to main. It builds the Docker image, pushes to ECR, syncs the SPA to S3, invalidates CloudFront, and updates the ECS service.

Promote to prod by tagging: