Shoe Haven is a full-stack e-commerce platform for purchasing shoes, featuring a responsive React frontend, a Flask backend with SQLite, and M-Pesa payment integration for seamless transactions in Kenya.
# Shoe Haven - E-Commerce Shoe Store
Shoe Haven is a full-stack e-commerce platform for purchasing shoes, featuring a responsive React frontend, a Flask backend with SQLite, and M-Pesa payment integration for seamless transactions in Kenya. The application supports filtering shoes by brand (e.g., Nike, Adidas), price, size, and search terms, with a clean, mobile-friendly UI.
## Table of Contents
- Features
- Tech Stack
- Setup Instructions
- Backend Setup
- Frontend Setup
- Project Structure
- Usage
- API Endpoints
- Future Enhancements
- Testing
- Troubleshooting
- Contributing
- License
## Features
- **Responsive UI**: Mobile-first design with a grid layout for shoes, collapsible filter panel, and pagination.
- **Filtering**: Filter shoes by brand (Nike, Adidas, etc.), min/max price, size, and search term.
- **Cart Management**: Add, update, and remove items from the cart, with stock validation.
- **M-Pesa Integration**: Secure payments via STK Push, with callback handling for payment confirmation.
- **Order Tracking**: View order history and payment status (pending, completed, cancelled).
- **Rate Limiting**: Protects API endpoints from abuse using `flask-limiter`.
- **Input Sanitization**: Prevents XSS and SQL injection with regex-based sanitization.
- **Logging**: Comprehensive logging for debugging and monitoring (`logs/app.log`).
## Tech Stack
- **Frontend**:
- React 18 (with Vite)
- React Router DOM
- Axios
- CSS (vanilla, responsive)
- **Backend**:
- Flask 3.x
- Flask-SQLAlchemy (SQLite)
- Flask-Limiter
- Flask-CORS
- Python-dotenv
- **Payment**:
- M-Pesa Daraja API (STK Push, B2C refunds)
- **Tools**:
- Ngrok (for local callback testing)
- SQLite (lightweight database)
- Vite (frontend build tool)
## Setup Instructions
### Prerequisites
- Python 3.8+
- Node.js 18+
- Ngrok (for M-Pesa callbacks)
- M-Pesa Daraja API credentials (Consumer Key, Consumer Secret, Passkey, Shortcode)
### Backend Setup
1. **Clone the repository**:
```bash
git clone htt …