FlyingNaked — Swag Store

STAGE 01

Browse Store

Frontend
SwagStorePage.jsx req
ProductGrid component
ProductCard component
Category filter tabs
Sort dropdown
Search input

API
GET /api/products
?category=&sort=&q=
Returns: id, name, price,
images[], categories[],
variants[], inStock

Database
products table
product_images table
categories table

STAGE 02

Select Item

Frontend
ProductDetailPage.jsx req
Image gallery / zoom
SizeSelector component
ColorSwatch component
QuantityPicker (+/−)
StockBadge component
Add to Cart CTA

API
GET /api/products/:id
GET /api/inventory/check
?sku= → { qty, status }

Database
product_variants table
sku, size, color, qty
inventory_log table

Logic
Inventory check req
Disable OOS size/color
Show "Low stock" warning
if qty < threshold

STAGE 03

Add to Cart

Frontend
CartDrawer.jsx req
CartContext / useCart()
CartItem component
Qty edit + remove
Cart icon + badge
Subtotal calculation
Proceed to Checkout CTA

Logic
cartReducer.js req
ADD_ITEM / REMOVE_ITEM
UPDATE_QTY action
CLEAR_CART action
Persist to sessionStorage
Re-check stock on open

API
POST /api/cart/validate
Verify items still in stock
before checkout begins

STAGE 04

Checkout

Frontend
CheckoutPage.jsx req
GuestCheckoutForm
name, email fields
ShippingAddressForm
address, city, state, zip
OrderSummaryPanel
Form validation inline

Logic
Guest checkout req
No login required
Email = order identifier
Validate address format
Calc shipping estimate

API
POST /api/checkout/init
Returns: session token,
shipping options + rates

STAGE 05

Payment

Frontend
PaymentStep.jsx req
Stripe Elements embed req
CardElement component
Pay Now button
Loading / error states
SSL / secure badge UI

API
POST /api/payment/intent req
Creates Stripe PaymentIntent
POST /api/payment/confirm
Stripe webhook listener
payment_intent.succeeded

Logic
stripe.js server lib req
STRIPE_SECRET_KEY env
STRIPE_WEBHOOK_SECRET
Lock inventory on intent
Release if payment fails

Database
orders table
status: pending→paid
stripe_payment_intent_id

STAGE 06

Confirm + Email

Frontend
OrderConfirmPage.jsx req
Order # display
Items + totals summary
Shipping address recap
Track Order CTA
Continue Shopping link

Email Trigger
orderConfirmEmail() req
Triggered on: payment OK
To: customer email
Contains: order #, items,
total, ship address,
tracking link placeholder
Service: Resend / SES pick one

Database
order_items table
Update inventory qty
email_log table

STAGE 07

Order Tracking

Frontend
OrderTrackPage.jsx req
Lookup by email + order#
Status timeline UI
Carrier link embed
Estimated delivery date

API
GET /api/orders/:id/status
Auth: email + order token
Returns: status, tracking#,
carrier, est. delivery

Logic
trackingUpdateEmail() opt
Webhook from carrier API
or manual admin update
Statuses: processing →
shipped → out for del.
→ delivered

Database
orders.status field
orders.tracking_number
orders.carrier
orders.shipped_at

Recommended Tech Stack

Frontend

React + Next.js (App Router)

Tailwind CSS

Zustand for cart state

React Hook Form + Zod

Backend / API

Next.js API Routes

or Express.js server

Stripe Node SDK

Webhook endpoint (POST)

Database

PostgreSQL (Supabase)

Tables: products, variants,

inventory, orders,

order_items, email_log

Payments

Stripe Payments

Stripe Elements (card UI)

PaymentIntent API

Stripe webhooks

Resend (recommended)

React Email templates

Triggers: order confirm,

shipped, delivered

Inventory Lock

Decrement qty on

payment_intent.succeeded

Restore on intent cancel

or 30-min session timeout