E-Commerce Store

Overview

A modern full-stack e-commerce web platform engineered for seamless product discovery, dynamic inventory management, and frictionless checkout flows. Powered by React, Vite, and Strapi Headless CMS, the application provides administrators with a flexible content dashboard while delivering a blazing-fast, responsive shopping experience integrated with Stripe for end-to-end payment processing.

Key Features

• Headless Product Catalog: Dynamic categorization, filtering, and rich product presentation powered by Strapi REST APIs.

• Persistent Cart Management: Persistent client-side shopping cart with quantity adjustments, subtotal calculations, and slide-over drawer navigation.

• Secure Stripe Checkout: Streamlined, PCI-compliant checkout workflow handling payment intents, error states, and instant order confirmation.

• Admin Content Management: Decoupled content management dashboard allowing real-time product updates, stock status control, and banner modifications via Strapi.

• Responsive Shopping UI: Modern, mobile-first design system built with Material UI (MUI), featuring responsive grids, product carousels, and loading skeletons.

Tech Stack & Architecture

• Frontend: React, Vite, Material UI (MUI), Emotion

• State Management: Redux Toolkit (RTK), Redux Persist (local storage cart caching)

• Backend & CMS: Strapi Headless CMS, Node.js

• Payments & APIs: Stripe API, Axios

• Database: PostgreSQL / SQLite (managed via Strapi ORM)

Technical Challenges & Solutions

1. Reliable Cart State Persistence & Hydration

• Challenge: Preventing cart state resets across page refreshes and browser tabs while preventing UI layout shifts or hydration mismatches.

• Solution: Implemented Redux Toolkit paired with Redux Persist to automatically sync cart data to localStorage. Structured actions ensure instant optimistic quantity updates and automatic subtotal recalculation without redundant component re-renders.

2. End-to-End Payment Intent Verification

• Challenge: Preventing client-side price tampering during the checkout transition from cart to payment gateway.

• Solution: Decoupled price calculation from client-side payloads. When initializing the Stripe Payment Intent, product IDs and quantities are verified against Strapi database records on the server side to calculate the final transaction amount before generating the client secret.

Key Takeaways

Demonstrates practical expertise in building headless commerce architectures: integrating headless CMS backends with fast modern build tools, managing complex transactional client-side state, and implementing secure, compliant payment gateways.