The problem

Legacy e-commerce templates often suffer from client-side bundle bloat, sluggish mobile rendering, poor SEO indexing on dynamically filtered catalogs, and brittle cart state persistence across anonymous guest sessions.

The approach

Implemented a Server-Side Rendered (SSR) product catalog powered by Next.js App Router, combined with an optimized client drawer state (Zustand/Redux), image optimization via Next.js Image component, and a Node.js Express REST API backend with MongoDB.

Architecture

Frontend

Next.js App Router, TypeScript, Tailwind CSS, Zustand client cart state, Framer Motion drawers.

Backend

Node.js REST API hosted on Render Cloud containerized via Docker.

Database

MongoDB Atlas with Mongoose schema indexing for categories, products, and variants.

Authentication

JWT access tokens paired with HTTP-only refresh cookies for registered buyer accounts.

Key decisions

  • Server-Side Rendering (SSR) for product listing pages to guarantee search engine crawlers index dynamic catalog filters.
  • Isolating shopping bag drawer state inside a lightweight Zustand client store to avoid re-rendering product grids.
  • Pre-fetching adjacent product detail routes on client hover to achieve instant sub-100ms page transitions.

Working through the challenges

  • Preventing layout shifts during image loading on mobile viewports.
  • Synchronizing guest shopping cart state seamlessly upon user login without losing cart contents.

What the application supports

  • Dynamic catalog filtering by price, category, and multi-attribute variants.
  • Slide-out shopping bag drawer with animated quantity adjustments and total calculation.
  • Stripe payment checkout workflow integration.
  • RESTful API integration with automated error handling and request validation.