🛍 E-Commerce Frontend

A modern and responsive E-commerce frontend built using React with clean UI components and smooth animations.

This frontend consumes REST APIs from a Django + DRF backend and provides a seamless user and admin experience.

---

🚀 Tech Stack

• React
• Bootstrap
• Framer Motion (Animations)
• Radix UI (Accessible UI Components)
• Axios (API Integration)
• React Router
• JWT Authentication (Token Handling)

---

🏗 Architecture

• Component-Based Structure
• Local State Management
• Separate User & Admin Interfaces
• Protected Routes
• API Layer Separation using Axios Instances
• Animated UI Transitions using Framer Motion
• Accessible Component Design with Radix UI

---

📌 Features

👤 User Features

• User Registration & Login
• JWT Token-based Authentication
• Product Listing with Pagination
• Product Details View
• Add to Cart
• Wishlist Management
• Secure Checkout
• Order History Tracking
• Add Reviews (Only for Delivered Orders)

---

🛒 Cart & Orders

• Real-time Cart Updates
• Quantity Management
• Order Placement
• Order Status Tracking (Pending / Shipped / Delivered)

---

❤️ Wishlist

• Add / Remove Wishlist Items
• Persistent User-based Wishlist

---

⭐ Reviews

• Add Product Reviews
• Rating System
• Review Validation

---

🛠 Admin Dashboard

• Admin Login
• Product Management (CRUD)
• Category Management
• Order Management
• Revenue Overview
• Active Users Monitoring

---

🔐 Authentication

• JWT Token Handling
• Token Storage & Header Injection
• Protected Routes for User & Admin
• Role-based Navigation Rendering

---

🔗 API Integration

The frontend connects to the Django backend via REST APIs:

• /api/products/
• /api/cart/
• /api/orders/
• /api/reviews/
• /api/admin/

All API requests are handled using Axios with proper authentication headers.

---

📱 UI & UX Highlights

• Fully Responsive Design
• Smooth Animations with Framer Motion
• Accessible Components with Radix UI
• Clean Navigation System
• Dynamic Rendering Based on User Role

---

⚙️ Setup Instructions

1️⃣ Clone the repository

git clone https://github.com/sreenandpk/ecommerce-frontend.git
cd ecommerce-frontend

2️⃣ Install dependencies

npm install

3️⃣ Start development server

npm run dev

🌐 Environment Configuration

VITE_API_URL=http://localhost:8000/api

👨‍💻 Author

Sreenand P K Full-Stack Developer Django | DRF | PostgreSQL | React | Framer Motion | Radix UI