Luxury Jewellery E-Commerce Platform

Project Overview

AURUM Fine Jewellery is a modern and responsive jewellery e-commerce web application developed using React, Vite, and Tailwind CSS. The platform allows users to browse luxury jewellery collections, view product details, add items to their cart, apply discount coupons, and complete a simulated checkout process.
The application includes a complete shopping flow such as product browsing, authentication, cart management, coupon system, and order placement. Authentication and cart data are managed using localStorage, allowing the application to function fully without a backend server.
The project demonstrates a real-world e-commerce interface with modern UI design, smooth navigation, and responsive layout suitable for both desktop and mobile devices.

Screenshots

Key Features

Modern luxury jewellery product catalog
Product detail pages with images and pricing
Add to cart and remove from cart functionality
Coupon code discount system
LocalStorage-based user authentication
Complete shopping cart system
Checkout and order summary interface
Responsive design for mobile and desktop
Smooth page navigation using React Router
Interactive UI with hover effects and animations
Clean and reusable component structure
Persistent cart and login session using localStorage

Functionality

The application allows users to explore various jewellery products such as rings, necklaces, bracelets, and earrings through a visually appealing product catalog. Each product page provides detailed information including price, image, and description.
Users can add products to their shopping cart and manage cart items easily. The cart automatically updates item quantities and total price. A coupon code system allows users to apply discount codes such as AURUM10, WELCOME15, and GOLD20 to receive promotional discounts during checkout.
The platform includes a localStorage-based authentication system where users can sign up and log in. User session data and cart information are stored in the browser to maintain persistence across page refreshes.
React Router is used for smooth navigation between pages such as Home, Products, Cart, Login, and Checkout without reloading the website.
During checkout, users can review their selected products, apply discount codes, and complete the order process through a simulated order confirmation interface.
The entire application is fully responsive and optimized for both desktop and mobile devices, providing a smooth and modern user experience.

Technology Used

React 19
Vite 6
Tailwind CSS v3
React Router DOM v6
JavaScript (ES6+)
HTML5
CSS3
React Icons
localStorage
Google Fonts
CSS Animations

Why This Project Is Useful

Demonstrates a real-world e-commerce website structure
Shows practical implementation of React components and state management
Useful for learning frontend architecture in React applications
Provides experience with client-side authentication
Demonstrates cart management and checkout logic
Suitable for portfolio projects showcasing frontend development skills
Can be extended into a full-stack e-commerce platform with backend and database integration