Smartcart Ecommerce Frontend

This repository contains the frontend application for Smartcart, a full-stack e-commerce platform built with React and Vite. The storefront includes product browsing with search and filtering, a complete cart and multi-step checkout flow with Stripe payment integration, and an AI-powered shopping assistant driven by LangChain4j on the backend. The application also provides role-based admin and seller dashboards for managing products, orders, categories, and sellers.

Live Demo: smartcart.munashemudabura.com

---

Features

• Responsive storefront with product browsing, search, and category filtering
• AI-powered shopping assistant providing personalized product recommendations
• Shopping cart with quantity management and real-time price calculations
• Multi-step checkout flow with address management, payment method selection, and order review
• Stripe payment gateway integration with invoice generation
• User authentication with login and registration
• Role-based access control for admin and seller dashboards
• Product, order, category, and seller management interfaces

---

Technologies Used

• React 19 with Vite 7
• Tailwind CSS v4
• Redux Toolkit for state management
• React Router 7 for client-side routing
• Material UI and Headless UI
• Stripe React SDK for payment processing
• Axios for API communication
• Docker and Nginx for containerized deployment

---

Screenshots

Home Page

AI Shopping Assistant

Product Search

Shopping Cart

Checkout - Address Selection

Checkout - Payment Method

Checkout - Order Summary

Stripe Payment Gateway

Order Confirmation

---

Installation and Setup

To run the project locally:

# 1. Clone the repository
git clone https://github.com/mudabs/Ecommerce-Frontend.git

# 2. Navigate to the project directory
cd Ecommerce-Frontend

# 3. Install dependencies
npm install

# 4. Create a .env.development file with the required environment variables
# 5. Start the development server
npm run dev

Environment Variables

For local development, create a .env.development file in the project root (or copy the existing template):

VITE_API_BASE_URL=http://localhost:5000
VITE_BACK_END_API_PREFIX=/api
VITE_API_AUTH_BASE_URL=http://localhost:5000/api/auth
VITE_API_PUBLIC_BASE_URL=http://localhost:5000/api/public
VITE_FRONTEND_URL=http://localhost:5173
VITE_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
VITE_SKIP_BACKEND_IMAGES=false

vite.config.js requires VITE_API_BASE_URL for both development and production modes. Define it in .env.development and .env.production as appropriate; VITE_BACK_END_URL alone is not sufficient. For machine-specific or local-only values, use .env.development.local, which is ignored by Git and must not be committed.

Every variable prefixed with VITE_ is exposed to client-side code and must be treated as public. Never put server-only secrets, private API keys, or database credentials in these files; keep those values in the backend environment instead. The Stripe publishable key is safe to expose by design, but secret Stripe keys are not.

Docker

To build and run the application in a container:

docker compose up --build

Then open http://localhost:8080.

Container details:

• Service name: frontend
• Container name: ecommerce-frontend
• Exposed host port: 8080
• Served by Nginx on container port 80