Ecobazar 🛒

A modern, responsive e-commerce platform built with React, TypeScript, and Redux Toolkit, specializing in fresh produce and organic products. Ecobazar provides a seamless shopping experience with features like product browsing, shopping cart management, and secure checkout.

Live Link 🔗

Ecobazar Live Site

Screenshot 📷

Video Demo 🎥

Ecobazar Demo Video

Features 🚀

🛍️ E-commerce Functionality

• Product Catalog: Browse featured products, hot deals, best sellers, and top-rated items
• Category Navigation: Organized product categories including vegetables, fruits, meat, fish, snacks, and beverages
• Product Search & Filtering: Find products by category, price range, and ratings
• Product Details: View product images, prices, ratings, and descriptions

🛒 Shopping Cart System

• Add/Remove Items: Add products to cart with quantity management
• Cart Persistence: Redux state management for cart items
• Quantity Controls: Increment/decrement product quantities
• Real-time Updates: Dynamic cart total calculations
• Coupon System: Apply discount codes (6-character alphanumeric validation)

💳 Checkout & Payment

• Billing Information: Comprehensive form with validation using Formik + Yup
• Address Management: Billing and shipping address handling
• Payment Methods: Multiple payment options (Cash on Delivery, PayPal, Amazon Pay)
• Order Summary: Real-time cart total and shipping calculations
• Form Validation: Client-side validation with error handling

🎨 User Interface

• Responsive Design: Mobile-first approach with Tailwind CSS and SCSS
• Interactive Elements: Hover effects, smooth transitions, and animations
• Product Carousel: Featured product showcase with navigation
• Testimonials: Customer reviews and ratings display
• Instagram Integration: Social media feed display

🔧 Technical Features

• State Management: Redux Toolkit for global state management
• Routing: React Router for navigation between pages
• Type Safety: Full TypeScript implementation
• Form Handling: Formik with Yup validation
• Modern React: Built with React 19 and modern hooks
• Performance: Optimized rendering and lazy loading

Set up Locally 🔧

Prerequisites

• Node.js (v16 or higher)
• npm or yarn package manager

Stack

• React + Typescript
• Redux Toolkit
• SCSS + BEM Styling
• TailwindCSS

Installation Steps

1. Clone the repository

   git clone https://github.com/haroonabdulrazaq/ecobazar.git
   cd ecobazar

2. Install dependencies

   npm install
   # or
   yarn install

3. Start development server

   npm start
   # or
   yarn start

4. Open your browser Navigate to http://localhost:3000

Available Scripts

• npm start - Start development server
• npm build - Build for production
• npm test - Run test suite
• npm run lint - Run ESLint
• npm run lint:fix - Fix ESLint errors
• npm run format - Format code with Prettier

Project Structure

src/
├── components/          # Reusable UI components
│   ├── BillingForm.tsx # Checkout form with validation
│   ├── Carousel.tsx    # Product showcase carousel
│   ├── FeaturedProducts.tsx # Main product grid
│   ├── Header.tsx      # Site header with navigation
│   ├── ShoppingCart.tsx # Cart management component
│   └── ...             # Other UI components
├── pages/              # Page components
│   ├── Home.tsx        # Landing page
│   ├── Products.tsx    # Product listing page
│   ├── Cart.tsx        # Shopping cart page
│   └── Checkout.tsx    # Checkout process
├── state/              # Redux state management
│   ├── features/       # Feature slices
│   │   └── cart/       # Shopping cart state
│   └── store/          # Redux store configuration
├── common/             # Shared utilities
│   ├── data.ts         # Product and category data
│   ├── interface.ts    # TypeScript interfaces
│   └── validation.ts   # Form validation schemas
└── assets/             # Static assets
    ├── images/         # Product and UI images
    └── stylesheets/    # SCSS styling files

Technologies Used

• Frontend: React 19, TypeScript, SCSS
• State Management: Redux Toolkit, React Redux
• Routing: React Router DOM
• Forms: Formik, Yup validation
• Styling: Tailwind CSS, SCSS modules
• Icons: React Icons
• Build Tool: Create React App
• Code Quality: ESLint, Prettier

Hosted on Vercel 🚀

The project is hosted on Vercel. You can access the live site at Ecobazar

Author 👨

👤 Haroon Abdulrazaq

• Github: @Haroonabdulrazaq
• Twitter: @hanq_o
• Linkedin: linkedin
• Portfolio: Portfolio

Contributing 🤝

Contributions are welcome! Please feel free to submit a Pull Request.

CI/CD Pipeline 🚀

This project uses GitHub Actions for continuous integration and deployment. The pipeline automatically runs on every push and pull request to the main and development branches.

What the Pipeline Does

1. Lint & Test: Runs ESLint, Prettier checks, and unit tests
2. Build: Creates a production build of the application
3. Deploy: Automatically deploys to Vercel
4. Security: Runs security audits on dependencies

Setting Up GitHub Actions

1. Create Required Secrets

Go to your GitHub repository → Settings → Secrets and variables → Actions, and add these secrets:

• VERCEL_TOKEN: Your Vercel API token
• VERCEL_ORG_ID: Your Vercel organization ID
• VERCEL_PROJECT_ID: Your Vercel project ID

2. Get Vercel Credentials

# Install Vercel CLI globally
npm i -g vercel

# Login to Vercel
vercel login

# Link your project (this will show your org and project IDs)
vercel link

3. Workflow Triggers

• Push to development: Deploys preview version
• Push to main: Deploys production version
• Pull Requests: Runs tests and linting only

Manual Deployment

If you prefer to deploy manually:

# Build the project
npm run build

# Deploy to Vercel
vercel --prod

License 📄

This project is licensed under the MIT License.