WaysBean Frontend Client

Modern Coffee E-commerce Interface

The WaysBean Frontend is a polished, responsive web application built to provide an exceptional user experience for coffee lovers. It connects seamlessly with the WaysBean Backend API.

Frontend Overview

• Platform: Web (Single Page Application)
• Framework: React.js (Vite)
• Styling: Chakra UI & TailwindCSS
• State: Redux Toolkit

Features

• ✨ Modern UI: Clean, responsive design using Chakra UI.
• 📱 Mobile First: Optimized for all device sizes.
• 🚀 Fast Performance: Powered by Vite and optimized assets.
• 🛒 Dynamic Cart: Real-time state management for shopping cart.
• 🎨 Animations: Smooth transitions with Framer Motion.
• 🔔 Live Updates: Real-time order status via Socket.io.

Tech Stack

• Core: React, TypeScript, Vite
• UI Context: Chakra UI, TailwindCSS, Framer Motion
• State Management: Redux Toolkit
• Data Fetching: Axios
• Forms: React Hook Form + Zod

Installation

1. Navigate to the frontend directory

   cd Frontend-WaysBeans

2. Install Dependencies

   npm install

3. Environment Setup
   Create a .env file and configure the backend URL.
   See ENVIRONMENT.md.

   VITE_API_BASE_URL="http://localhost:5000/api/v1"

Development Workflow

Start the development server with HMR (Hot Module Replacement):

npm run dev

Open http://localhost:5173 to view it in the browser.

Build & Deployment

To create a production build:

npm run build

See DEPLOYMENT.md for detailed hosting instructions (Vercel, Netlify, etc.).

📚 Documentation

The frontend documentation is organized as follows:

Technical Docs

• System Architecture: Component hierarchy and state flow.
• Style Guide: Component patterns and styling rules.
• Environment Setup: Configuration reference.

Operational Docs

• Deployment Guide: Build and deploy instructions.
• Testing Strategy: Testing tools and plans.

Community & Legal

• Contributing: Guidelines for UI contributions.
• Code of Conduct: Community standards.
• Changelog: Version history.
• Roadmap: Future features.
• Support: Where to get help.
• Disclaimer: Usage terms.
• License: MIT License.

Contribution Guide

1. Fork the repo.
2. Create a feature branch (feat/new-ui-component).
3. Commit changes.
4. Push to branch.
5. Open a Pull Request.

Please Lint your code before committing:

npm run lint

Author

• WaysBean Team
• Contact: frontend@waysbean.com

Built with React & Passion ⚛️