GlamMart is a fully responsive e-commerce frontend built with React, TypeScript, Tailwind CSS, and React Query.
This project showcases modern frontend skills, including state management, context API, dark mode, wishlist & cart functionality, and checkout integration with Razorpay.

Checkout the Live Demo

• Product Listing & Search - Fetches products from Fake Store API with React Query for caching & fast UI updates.
• Wishlist & Cart Management - Add/remove items, dynamically update cart total, persists in localStorage.
• Dark/Light Mode Toggle - Saves preference in localStorage.
• Product Details Page - Detailed view of products with add-to-cart & wishlist functionality.
• Checkout & Razorpay Payment Integration - Simulated payment flow with order confirmation and shipping details.
• Order History - View past orders with detailed information.
• Responsive Design - Works beautifully on mobile, tablet, and desktop.
• Clean & Modern UI - Built with Tailwind CSS, optimized for readability and aesthetics.

• Frontend: React, TypeScript, React Router DOM
• State Management: React Context + useReducer
• Styling: Tailwind CSS
• Data Fetching: React Query
• Icons: React Icons
• Payment: Razorpay (simulated)
• Persistence: localStorage

• TypeScript with React - strongly typed context, reducer, components, and props.
• Advanced state management using useReducer + Context API.
• Building responsive UI with Tailwind CSS and flex/grid layouts.
• Integrating third-party payment gateway (Razorpay) and handling order management.
• Best practices for component reusability and code organization.
• Handling dark mode and persisted localStorage state.

A few Screenshots

Homepage

Homepage

Wishlist Page in Light Mode - Mobile Size

Product Page in Dark Mode - Tablet Size

# Clone the repo git clone https://github.com/ramdeoshubham/glammart.git cd glammart # Install dependencies npm install # Start the development server npm run dev

Open http://localhost:5173 to view in the browser.

It is deployed on Vercel. You can checkout the live demo here.

• Add authentication (login/signup) for personalized orders & cart.
• Connect with a real backend for products and orders.
• Implement quantity management in cart.
• Add filters, search, and sorting for products.

Shubham Ramdeo - GitHub Profile | Personal Website | Linkedin

This project was built for portfolio and demonstrating frontend javascript tech skills.