TechsoiBd E-commerce Platform
A front-end e-commerce platform built with Next.js and Tailwind CSS. Features a responsive design, dynamic product listings, and seamless user interactions for an engaging shopping experience.
- >Dynamic SSG/ISR Listing & Indexing Pages
- >Client-side Cart state synchronized with Zustand
- >Framer Motion interactive micro-transitions
Project Vision & Meaning
TechsoiBd E-commerce was built to address the critical impact page speed has on online retail conversions. If an online store takes more than 2 seconds to load, search rankings drop and customer bounce rates rise. This project is a next-generation storefront utilizing edge rendering, dynamic static generation, and advanced state syncing to achieve lightning-fast loading speeds.
Real-World Problems Solved
The storefront brought page load speeds down to a 50ms Time To Interactive (TTI), significantly lowering buyer bounce rates. By using Next.js Incremental Static Regeneration (ISR), product pages remain highly indexable by search engine bots for maximum SEO visibility, while displaying current product details.
Challenges & Solutions
Balancing Static Page Caching with Real-time Stock and Prices
Problem Context:Generating product pages statically (SSG) yields exceptional load times, but creates the risk of presenting out-of-date stock numbers or prices to customers during checkouts.
Adopted a hybrid fetching pattern. The static layout, descriptions, and images are cached and served via Vercel's Edge Network instantly. As soon as the page mounts on the client, lightweight SWR hooks fetch the latest stock levels and prices directly from the live database, updating the interface seamlessly.
Cross-Tab Cart State Synchronization
Problem Context:Customers often open multiple tabs of the store to compare products. If they add an item to their cart on tab A, tab B would remain out-of-sync until a hard reload, leading to confusion during checkouts.
Integrated a Zustand store configured with storage sync middleware. Configured a window listener for the browser 'storage' event that detects local storage changes from other tabs and updates the Zustand state instantly, guaranteeing a synchronized checkout cart across all open windows.