🛍️ Viora Market

A modern, responsive, and professional e-commerce web application built with React.js. Viora Market provides a smooth shopping experience with product browsing, categories, brands, product details, cart management, checkout, authentication, and interactive animations.

---

✨ Features

🏠 Home Page

• Modern and responsive landing page
• Featured products
• Product categories
• Popular brands
• Smooth scroll animations
• Responsive design for desktop, tablet, and mobile

🛍️ Products

• Display products dynamically from the API

• Product cards with:

  • Product image
  • Product name
  • Price
  • Rating
  • Discount information
  • Add to cart button
  • View details button

• Smooth hover animations

• Responsive product grid

📂 Categories

• Display available product categories
• Click on a category to view its products
• Dynamic category filtering
• Animated category cards

🏷️ Brands

• Display available brands
• Click on a brand to view related products
• Dynamic brand filtering
• Animated brand cards

🔎 Product Details

• View complete product information
• Product images
• Product title
• Description
• Price
• Discount
• Rating
• Stock information
• Quantity selector
• Add to cart functionality

🛒 Shopping Cart

• Add products to cart
• Remove products
• Increase product quantity
• Decrease product quantity
• Display total items
• Calculate total price
• Empty cart state
• Smooth cart item animations

💳 Checkout

• Checkout page
• Order summary
• Customer information
• Payment flow
• Back navigation
• Return to Home after payment

🔐 Authentication

• Login page
• Register page
• Forgot Password page
• Professional authentication UI
• Form validation

🎨 UI & Animations

• Modern professional design
• Responsive layout
• Smooth page transitions
• Scroll reveal animations
• Staggered product animations
• Card hover effects
• Image zoom effects
• Button interactions
• Smooth navigation animations

---

🛠️ Technologies Used

• React.js
• Vite
• React Router
• Tailwind CSS
• Axios
• Context API
• React Icons
• Font Awesome
• REST API
• JavaScript (ES6+)
• HTML5
• CSS3

---

📡 API

The application uses a REST API to retrieve and manage:

• Products
• Categories
• Brands
• Authentication
• Cart-related data

Axios is used for handling HTTP requests.

---

📁 Project Structure

Viora-Market/
│
├── ecommerce-main/
│   │
│   ├── public/
│   │
│   ├── src/
│   │   ├── assets/
│   │   │
│   │   ├── components/
│   │   │   ├── Auth/
│   │   │   ├── Navbar/
│   │   │   ├── Footer/
│   │   │   ├── ProductItem/
│   │   │   └── ...
│   │   │
│   │   ├── pages/
│   │   │   ├── Home/
│   │   │   ├── Products/
│   │   │   ├── Categories/
│   │   │   ├── CategoryProducts/
│   │   │   ├── Brands/
│   │   │   ├── BrandProducts/
│   │   │   ├── ProductDetails/
│   │   │   ├── Cart/
│   │   │   ├── Checkout/
│   │   │   ├── Login/
│   │   │   ├── Register/
│   │   │   └── ForgotPassword/
│   │   │
│   │   ├── context/
│   │   ├── hooks/
│   │   ├── services/
│   │   ├── App.jsx
│   │   └── main.jsx
│   │
│   ├── package.json
│   └── vite.config.js
│
└── README.md

---

🚀 Installation

1. Clone the repository

git clone YOUR_GITHUB_REPOSITORY_URL

2. Open the project

cd Viora-Market
cd ecommerce-main

3. Install dependencies

npm install

4. Start the development server

npm run dev

5. Open the application

Open the URL provided by Vite, usually:

http://localhost:5173

---

📱 Responsive Design

Viora Market is designed to work smoothly across different screen sizes:

• 💻 Desktop
• 💻 Laptop
• 📱 Tablet
• 📱 Mobile

The layout automatically adapts to different screen sizes using responsive Tailwind CSS utilities.

---

🎯 Main User Flow

Home
  │
  ├── Categories
  │      └── Category Products
  │
  ├── Brands
  │      └── Brand Products
  │
  ├── Products
  │      └── Product Details
  │              └── Add to Cart
  │
  └── Cart
         │
         └── Checkout
                │
                └── Payment
                       │
                       └── Home

---

🎨 Design

The project focuses on creating a clean and modern shopping experience with:

• Professional card layouts
• Consistent spacing
• Responsive grids
• Modern typography
• Smooth transitions
• Interactive buttons
• Product image effects
• Animated sections
• User-friendly navigation

---

👩‍💻 Author

Sosana Ashraf

Designed & Developed with ❤️ using React.js.

---

📄 License

© 2026 Viora Market. All rights reserved.

---

⭐ If you like this project

If you find this project useful or interesting, feel free to give it a ⭐ on GitHub!