← Back to projects

Glow Lab

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

  • #CartStateSync
  • #CheckoutFlow
  • #PaymentStatusHandling
  • #OrderConfirmation
  • #RESTRoutes

Live siteSource code

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

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

Separate client (Vite) and server (Express) apps, deployed on Render. The browser loads products from Express, then Stripe handles checkout while the secret key stays on the server.

Technologies used

Frontend

React, Vite, React Router, CSS

Backend

Node.js, Express.js, RESTful APIs

Payments

Stripe API, Stripe Payment Element

Infra

Render