Modern E-commerce Website

A responsive, modern e-commerce application built with React, TypeScript, and Tailwind CSS. This project includes essential e-commerce features such as product listings, a shopping cart, filtering options, and a checkout process.

Features

• Product Listing: Display products in a grid layout with images, prices, and details.
• Search and Category Filtering: Quickly search and filter products by category.
• Shopping Cart: Add items to the cart, adjust quantities, and calculate the total price.
• Responsive Design: Mobile-friendly, adapting to various screen sizes.
• Elegant UI: Beautiful user interface with animations and transitions.
• Checkout Process: Checkout button (currently clears the cart for demonstration).

Technologies Used

• React: Component-based UI building.
• TypeScript: Strong typing for improved development experience.
• Tailwind CSS: Modern utility-first CSS framework for fast UI development.
• Netlify: Deployment platform for the live site.

Project Structure

• src/types/index.ts: TypeScript types and interfaces.
• src/data/products.ts: Sample product data.
• src/context/CartContext.tsx: Context for managing cart state globally.
• src/components/Navbar.tsx: Navbar with a cart indicator.
• src/components/ProductCard.tsx: Product card component with details.
• src/components/ProductGrid.tsx: Product grid component.
• src/components/Cart.tsx: Shopping cart component with quantity controls.
• src/App.tsx: Main application file.

Installation and Setup

1. Clone the repository

   git clone https://github.com/baldanaresh/modern-ecommerce-website.git
   cd modern-ecommerce-website
   npm install
   npm run dev

2.Live Demo

 https://precious-arithmetic-e68d98.netlify.app/