Jumia Clone - E-commerce Application

A modern e-commerce application built with React, TypeScript, and Vite. This is a clone of the Jumia e-commerce platform featuring product browsing, search functionality, shopping cart management, and checkout.

Features

• 🛍️ Product listing with search functionality
• 🛒 Shopping cart with quantity selection
• 📦 Delivery date options
• 💰 Order summary with tax calculations
• 💾 Local storage persistence
• 📱 Responsive design
• ⚡ Fast development with Vite
• 🔒 Type-safe with TypeScript

Technology Stack

• React 19 - Modern React with hooks
• TypeScript - Type-safe development
• Vite - Next-generation frontend tooling
• React Router v7 - Client-side routing
• React Context API - State management

Getting Started

Prerequisites

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

Installation

1. Clone the repository:

git clone https://github.com/Josemiles-ctr/Jumia-clone.git
cd Jumia-clone

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run lint - Run ESLint
• npm run preview - Preview production build

Project Structure

src/
├── components/       # Reusable React components
│   ├── Header.tsx
│   ├── ProductCard.tsx
│   └── *.css
├── pages/           # Page components
│   ├── Home.tsx
│   ├── Checkout.tsx
│   └── *.css
├── context/         # React Context for state management
│   └── CartContext.tsx
├── data/           # Static data
│   └── products.ts
├── types/          # TypeScript type definitions
│   └── index.ts
├── App.tsx         # Main application component
└── main.tsx        # Application entry point

public/
└── images/         # Product images

Features in Detail

Product Browsing

• Grid layout displaying all available products
• Product images, names, prices, and ratings
• Star ratings for customer reviews

Search Functionality

• Real-time search filtering
• Search by product name
• "No results found" message when search yields no matches

Shopping Cart

• Add products to cart with quantity selection (1-3 items)
• Cart counter in header shows total items
• Persistent cart using localStorage

Checkout Page

• View all items in cart
• Choose delivery dates with different shipping costs:
  • Today: $10.00 shipping
  • 3 days: $5.00 shipping
  • 6 days: Free delivery
• Remove items from cart
• Order summary with:
  • Items subtotal
  • Shipping & handling
  • Tax calculation (10%)
  • Order total

Contributing

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

License

This project is for educational purposes.

Acknowledgments

This project was created as a learning exercise to demonstrate proficiency with HTML, CSS, JavaScript, and modern web development practices including React and TypeScript.