Amazon E-commerce
Full-featured e-commerce platform with dynamic product catalog, interactive cart management, and responsive checkout interface.
README.md
95 linesإليك النسخة المحسّنة والمنسقة من ملف README.md، حيث قمت بتنظيم المسافات، إضافة الرموز التعبيرية (Emojis) لجعله أكثر جاذبية، وتصحيح رابط الـ Clone ليتطابق مع مسار مستودعك الحالي:
# 🛒 AmazonEcommerce Clone
A modern, responsive eCommerce web application built with **React** and **Tailwind CSS**. This project fetches real-time product data using the [FakeStore API](https://fakestoreapi.com/) and features a complete shopping experience from browsing to checkout, inspired closely by the layout and design palette of Amazon.
## 🚀 Features
* **🎨 Amazon-style UI/UX:** Custom theme variables and styling that mimic the world's most popular eCommerce layout.
* **🛍️ Product Catalog:** Browse featured products on the homepage or see all available products with category filters, searching, and sorting functionality.
* **📦 Product Details:** View specific product descriptions, ratings, pricing, and dynamic cart integration.
* **🛒 Shopping Cart:** Fully functional cart using the React Context API. Adjust quantities, automatically calculate totals with taxes/shipping, and remove items dynamically.
* **💳 Checkout Flow:** A beautiful Multi-step simulated checkout experience with form validation and success handling.
* **📱 Responsive Design:** Designed to work flawlessly on both desktop and mobile devices.
## 🛠️ Technology Stack
* **Framework:** [React 18](https://react.dev/) + [Vite](https://vitejs.dev/)
* **Routing:** [React Router v6](https://reactrouter.com/)
* **Styling:** [Tailwind CSS v4](https://tailwindcss.com/)
* **State Management:** React Context API (`CartContext`)
* **Icons:** SVG / Inline elements
## 📦 Getting Started
Follow these steps to run the application locally on your machine.
### Prerequisites
You need Node.js and npm installed. Check your versions using:
node -v
npm -v
### Installation
1. **Clone the repository:**git clone https://github.com/mostafanagedy/AmazonEcommerce-main.git
cd AmazonEcommerce-main
2. **Install dependencies:**npm install
3. **Start the development server:**npm run dev
4. **Open in browser:**
Navigate to `http://localhost:5173` to view the application in action.
## 📂 Project Structure
src/
├── components/ # Reusable UI components (Navbar, ProductCard, CartItem)
├── context/ # React Context files (CartContext)
├── pages/ # Application views (Home, Products, ProductDetail, Cart, Checkout)
├── App.jsx # Main application component & routes setup
├── App.css # Global Tailwind configurations & colors
└── main.jsx # Application entry point
## 🌐 API Reference
Product data is actively sourced from the [FakeStore API](https://fakestoreapi.com/). Specifically:
* `GET /products` - Fetch list of all products.
* `GET /products?limit=8` - Fetch featured items for the Home page.
* `GET /products/:id` - Fetch details for a specific product.
خطوات التنفيذ: