This is a demo e-commerce application (part of my portfolio) built with Next.js, RTK Query, and MUI. It features a responsive design, robust filter controls, cart management, and server-side logic handled via Next.js API Routes (mimicking a backend).
- Responsive UI: Fully responsive design built with Material-UI (MUI).
- Tree-Based Filtering: Advanced multi-level filter sidebar for navigating deep, hierarchical product categories.
- Price Range Slider: Price filtering with decoupled state management (using local state and an 'Apply' button) for smooth UI performance despite slow data fetching.
- State Management: Utilizes Redux Toolkit Query (RTK Query) for efficient data fetching, caching, and automatic synchronization of Wishlist and Product data.
- Wishlist Functionality: Users can add and remove products from their personalized wishlist, with state managed and synchronized via RTK Query.
- Cart Management: Simple state management for adding, removing, and updating items in the shopping cart.
- Mock Backend: All API interactions (products, wishlist, categories) are handled by Next.js API Routes, simulating a real database interaction with artificial latency.
- Image Optimization: Uses the Next.js
Imagecomponent for optimized image delivery.
| Category | Technology | Purpose |
|---|---|---|
| Framework | Next.js 16 (App Router) | Server-side Rendering, Routing, and API Routes. |
| Styling | Material-UI (MUI) v7 | Component library for a modern and accessible UI. |
| State/Data | Redux Toolkit (RTK) & RTK Query | Data fetching, caching, synchronization, and global state management. |
| Language | TypeScript | Strong typing for reliability and scalability. |
| Routing | Next.js Router (Client & Server) | Navigation and URL state synchronization. |