Back to Projects
ShanBazar - Modern E-commerce Platform

ShanBazar - Modern E-commerce Platform

A high-performance, interactive E-commerce single-page application built with React 19. Features global state management with Redux Toolkit, efficient server-state handling via TanStack Query, and smooth animations powered by Framer Motion.

Jan 2024 - April 2024
Web Application
Technologies
#React#Tailwind CSS#vite#REST API#Responsive Design#TanStack-Query#Redux#Framer Motion
Live Demo Source Code

Key Features

  • Global state management (Cart) integrated using Redux Toolkit for predictable data flow.
  • Efficient data fetching and caching implemented with TanStack Query (React Query).
  • Smooth, interactive UI animations and page transitions powered by Framer Motion.
  • Real-time geolocation tracking using OpenStreetMap API for personalized experiences.
  • Standardized API requests and global error handling using Axios Interceptors.
  • Fully reactive and mobile-responsive layout powered by Tailwind CSS v4.

Case Study Overview

# Project Overview ShanBazar is a next-generation e-commerce platform designed to bridge the gap between static browsing and interactive shopping experiences. Built with **React 19**, it leverages **Redux** and **TanStack Query** to deliver instant page loads and seamless state synchronization. ## Technical Architecture The application is structured as a modular Single Page Application (SPA). - **Frontend**: React 19, React Router v7 - **State Management**: Redux Toolkit (Client State), TanStack Query (Server State) - **Styling & Animation**: Tailwind CSS v4, Framer Motion - **API Layer**: Axios with custom interceptors for standardized communication ## Core Functionalities 1. **Interactive Cart**: Real-time cart management with instant price updates and quantity controls using Redux. 2. **Optimized Data Fetching**: Smart caching and background updates ensure users always see fresh product data without loading spinners. 3. **Engaging UI**: Smooth entry animations and micro-interactions enhance the perceived performance and user delight.

The Challenge

Challenges Faced Managing complex state synchronization between the server (API data) and client (shopping cart) while maintaining a high-performance, jitter-free user interface.

My Solution

Adopted a hybrid state management approach: **TanStack Query** handles caching and background synchronization of product data, while **Redux Toolkit** manages the synchronous client-side cart interactions. This separation of concerns significantly improved render performance and code maintainability.