🛍️ React E-Commerce Platform

A full-featured e-commerce web application built with React, Tailwind CSS, JWT authentication, and modern libraries for an optimized shopping experience.

🚀 Features

• 🔑 JWT Authentication for secure user login & registration
• 🎨 Tailwind CSS for a sleek and responsive UI
• 🔄 React Query for efficient data fetching and caching
• 🍪 js-cookie for handling authentication tokens
• 📞 libphonenumber-js for phone number validation
• ⚡ Vite for a fast development experience
• 🚀 Framer Motion for smooth animations
• 📦 React Router for seamless navigation
• 🔥 Formik & Yup for form validation
• 🍞 React Toastify for interactive notifications
• 🛍️ Cart & Order Management
• 🔎 Product Search & Filtering
• 📸 Image Carousels with Swiper.js

🖥️ Technologies Used

• React.js 18 - Frontend framework
• JWT Authentication - Secure user authentication
• Tailwind CSS - Utility-first CSS framework
• React Query - Efficient server-state management
• Vite - Fast build tool for modern web apps
• Framer Motion - Smooth animations
• React Router - SPA navigation

📂 Project Structure

📦 src
 ┣ 📂 components      # Reusable UI Components
 ┣ 📂 context         # Global State Management (Cart, Auth, etc.)
 ┣ 📂 hooks           # Custom Hooks
 ┣ 📂 pages           # Application Pages (Home, Product, Cart, etc.)
 ┣ 📂 services        # API Requests & Data Fetching
 ┣ 📂 utils           # Utility Functions
 ┣ 📜 App.js          # Main App Component
 ┣ 📜 main.jsx        # Entry Point
 ┗ 📜 styles.css      # Global Styles

🔧 Installation & Setup

1️⃣ Clone the Repository

git clone https://github.com/yourusername/react-e-commerce.git
cd react-e-commerce

2️⃣ Install Dependencies

npm install

3️⃣ Start the Development Server

npm run dev

The app will run on http://localhost:5173/.

📜 Usage

1. User Authentication: Register/Login using JWT authentication.
2. Browse Products: View available products with details.
3. Add to Cart: Select and add products to your shopping cart.
4. Checkout: Proceed to checkout and place an order.
5. Responsive UI: Works seamlessly across devices.

📸 Screenshots

🛠 Available Scripts

• npm run dev - Start development server
• npm run build - Build the app for production
• npm run preview - Preview the production build
• npm run lint - Run ESLint for code quality checks

🌟 Contributing

Feel free to contribute! Fork the repo, create a new branch, and submit a pull request.

📜 License

This project is licensed under the MIT License.

---

🚀 Happy Coding & Shopping!