ShopX
A production-ready e-commerce platform with a customer storefront, admin inventory tools, Stripe payments, transactional emails, Redis caching, and observability built into the stack.
Project Overview
ShopX is a production-ready, full-stack e-commerce platform built with Next.js 15, FastAPI, and MongoDB. It coordinates a decoupled asynchronous architecture using Redis for caching, session state storage, rate limiting, and cache invalidation around product and admin workflows.
The build includes secure customer authentication, wishlist and cart flows, product variant handling, Stripe checkout, transactional emails through Resend, Slack backend notifications, and full-stack monitoring through Sentry and PostHog.
Build Highlights
Video Demonstrations
Product Walkthrough & Demo
Detailed walk-through of the customer-facing interface, including searching, category filters, cart, dynamic Stripe checkout flows, and real-time shipping timelines.
PostHog Session Replay
Actual session replay captured using PostHog, displaying full-stack user behavior analysis, mouse tracks, clicks, and page flows recorded during testing.
Interface & Screenshot Tour
Homepage (Alt 1)
Initial design layout highlighting main visual sections.
Homepage (Alt 2)
Iterative layout mockup showing category banners and filters.
Homepage (Final)
Final responsive interface with styled cards and product listings.
User Login Panel
Sleek authentication interface checking secure cookie sessions.
Registration Form
Account creation requiring verification links sent via Resend API.
Catalog & Filters
Active filtering by categories, variant sizes, colors, and prices.
Detailed Product View
Select sizes and colors with real-time stock availability verification.
Saved Wishlist
Persistent user preferences synced directly to MongoDB database.
Stripe Payment Element
Client-side card verification securely encrypted by Stripe servers.
Shipping Address Form
Validated form fields for customer contact and courier choice.
Order Status Tracker
An animated progress timeline outlining processing and shipping milestones.
Dashboard Analytics
Charts documenting revenue, orders, and clients with 2m Redis cache.
Product Management
Form to configure items, manage variant counts, and delete products.
Customer Directory
Admin listing detailing user profiles, verifications, and histories.
Resend Confirmation Mail
HTML email sent dynamically upon payment validation.
Resend Dispatched Email
Automated mail providing active package shipment and tracking links.
Slack Webhook Logs
Real-time backend alerts regarding orders, webhooks, and errors.
Technical Specifications
| Frontend Stack | Next.js 15 (App Router, Turbopack), TypeScript, Tailwind CSS, Zustand, Stripe.js |
| Backend Stack | FastAPI (Async Python), MongoDB (Motor Async Driver), Redis Cloud (Caching, Caching invalidations) |
| Infrastructure & Observability | Sentry full-stack tracing, PostHog product funnel analytics & mouse track session replays |
| Security Controls | HttpOnly & SameSite cookies, bcrypt hashing, SHA-256 hashed password tokens, input validation against ReDoS queries |
Key Features
Product grids querying categorical selections, variants (size, color), and custom prices.
Persistent client-side shopping cart with state management.
Stripe Payment Intent flows, handling webhooks signatures, and completing payments.
Visual analytics documenting revenues, order charts, and customer statistics with caching.
Caching product lists (5m), user session tables, invalidating caches automatically on edits.
Protection against brute-force endpoint crawls via slowapi IP checks (20 logins/m).