SECTOR-FIVE-LAB/mpesa-coffee-kiosk

This is an ecommerce system for ordering coffee using M-Pesa A modern coffee ordering kiosk with M-Pesa payment integration, built with React, TypeScript, and Node.js. ## 🚀 Features - **Modern UI/UX**: Beautiful, responsive interface built with React, TypeScript, and Tailwind CSS - **M-Pesa Integration**: Seamless payment processing using Safaricom's M-Pesa API - **User Authentication**: Secure login system with JWT tokens - **Order Management**: Track and manage coffee orders - **Admin Panel**: Administrative interface for order management - **Real-time Updates**: Live order status updates - **Mobile Responsive**: Optimized for all device sizes ## 🏗️ Project Structure ``` coffee-and-code/ ├── client/ # React frontend application │ ├── src/ │ │ ├── components/ # Reusable UI components │ │ ├── pages/ # Application pages │ │ ├── data/ # Static data (coffee products) │ │ ├── lib/ # Utility functions and API │ │ └── hooks/ # Custom React hooks │ └── package.json ├── Backend/ # Node.js backend server │ ├── routes/ # API route handlers │ ├── middleware/ # Express middleware │ ├── utils/ # Utility functions │ └── index.js # Main server file ├── index.js # M-Pesa STK Push API service └── package.json ``` ## 🛠️ Technology Stack ### Frontend - **React 18** with TypeScript - **Vite** for fast development and building - **Tailwind CSS** for styling - **Shadcn/ui** for UI components - **React Router** for navigation - **React Query** for data fetching - **Axios** for HTTP requests ### Backend - **Node.js** with Express - **MongoDB** with Mongoose for data persistence - **JWT** for authentication - **bcrypt** for password hashing - **M-Pesa API** integration ## 📋 Prerequisites Before running this project, make sure you have: - **Node.js** (v16 or higher) - **npm** or **yarn** or **pnpm** - **MongoDB** (local installation or MongoDB Atlas) - **M-Pesa Developer Account** with sandbox cr …