Glow Lab

Fun e-commerce storefront demo with Stripe checkout and clear order states.

#CartStateSync
#CheckoutFlow
#PaymentStatusHandling
#OrderConfirmation
#RESTRoutes

Project overview

Glow Lab is an e-commerce platform showcasing a direct-to-consumer beauty brand. Built with React and Express, it features a seamless shopping experience with Stripe integration for secure payments. The application demonstrates essential e-commerce functionality including product browsing, cart management, and a streamlined checkout process.

Engineering challenges

Keeping cart quantity and line totals in sync as shoppers move between catalog, cart, and checkout routes—so add/remove actions in React update what checkout sends to the server without stale items.
Splitting Stripe responsibilities: Express creates payment intents with the secret key while the Vite client mounts Payment Element with the publishable key—card data flows through Stripe, not custom payment handlers.
Designing explicit success and failure screens after Payment Element completes so users get clear confirmation or can retry without losing context on what was in the cart.

Features

Interactive product catalog with detailed product information and images
Dynamic shopping cart with real-time updates
Secure payment processing through Stripe Payment Element integration
Responsive design for optimal viewing across all devices
Clear order confirmation and transaction status feedback
RESTful API endpoints for product and order management

Architecture

At a glance

React + Vite with CartContext; catalog loads from Express, cart and checkout on the home route.
Express validates cart totals and creates or updates Stripe payment intents; secret key stays server-side.
Payment Element confirms charges with Stripe; /payment-status shows success or failure.

Client routes

/ (product catalog, cart, and checkout)
/payment-status (order confirmation)

Express API

GET /products (product catalog with images, titles, descriptions, and prices)
GET /config (return Stripe publishable key to the client)
POST /create-payment-intent (validate cart, calculate total, create payment intent)
PATCH /update-payment-intent/:id (recalculate total when cart changes before checkout)

Deploy & data

Separate client (Vite) and server (Express) apps on Render (React for cart and checkout UI; Express serves products and Stripe intents; card data never touches custom server handlers).

flowchart TB
  subgraph fe [1. Frontend — React + Vite]
    router[React Router — catalog, cart, checkout]
    cart[Cart state — add, remove, totals]
    payUI[Stripe Payment Element]
    router --> cart --> payUI
  end
  subgraph be [2. Backend — Node.js + Express]
    api[REST API — products and checkout]
    stripeSDK[Stripe SDK — secret key]
    api --> stripeSDK
  end
  stripe[Stripe — payment processing]
  router -->|Fetch products| api
  cart -->|Create payment intent| api
  payUI -->|Confirm card payment| stripe
  stripeSDK -->|Payment intents and charges| stripe

Technologies used

Frontend

React, Vite, React Router, CSS

Backend

Node.js, Express.js, RESTful APIs

Payments

Stripe API, Stripe Payment Element

Infra

Render