QuickPick Storefront

A modern React-based e-commerce storefront designed for customers to browse products, manage shopping carts, apply coupons, place orders, and track purchase history.

Built with React + Vite and integrated with a backend API for authentication, product management, and commerce workflows.

---

Features

User Experience

• User authentication
• Product browsing experience
• Category and brand discovery
• Promotional offers and featured products

Shopping Workflow

• Add products to cart
• Stock-aware purchasing flow
• Remove cart items
• Coupon application and removal
• Checkout and delivery information

Orders

• Order placement
• Order tracking and history
• Customer purchase management

State Management

• Shared application state using React Context
• Persistent authentication flow
• Dynamic data synchronization with backend APIs

---

Architecture

Customer Frontend (React + Vite)
              ↓
Axios API Layer
              ↓
ASP.NET Core Backend API
              ↓
SQL Server Database

---

Tech Stack

• React 18
• Vite
• React Router DOM
• Axios
• React Context API
• JavaScript
• ESLint

---

Project Structure

quickpick-storefront/

├── public
│
├── src
│   ├── assets
│   ├── components
│   ├── Context
│   └── pages
│
├── package.json
├── index.html
└── vite.config.js

---

Main Pages

• Login
• Home
• Products
• Cart
• Checkout
• Verification
• Order History

---

Getting Started

Install dependencies:

npm install

Run development server:

npm run dev

Build production version:

npm run build

---

Backend Integration

The application integrates with backend APIs for:

• Authentication
• Product management
• Shopping cart
• Orders
• Coupons
• Categories
• Brands
• Offers

---

Future Improvements

• Payment gateway integration
• Environment variable support
• Product search and filtering
• Wishlist functionality
• Better state management architecture
• Analytics integration

---

Why I built this

This project was built to gain experience building customer-facing e-commerce systems and integrating frontend applications with backend APIs and commerce workflows.