📦 GarFlex Client

Modern Garments Manufacturing & Order Management Dashboard

🌐 Live Site | 🐛 Report Bug | ✨ Request Feature

📋 Table of Contents

🎯 About The Project
✨ Core Features
🛠 Tech Stack
🚀 Getting Started
🔐 Dashboard Roles
📂 Project Structure
🎨 UI/UX Highlights
📸 Screenshots
👨‍💻 Developer

🎯 About The Project

GarFlex Client is a feature-rich React-based web application designed to streamline the garments manufacturing and order management process. It provides a seamless experience for buyers to place bulk orders, managers to oversee production, and admins to manage the entire ecosystem.

The application focuses on speed, security, and user-centered design, featuring real-time order tracking with location-based updates and secure payment gateways.

Why GarFlex?

🎯 Efficient Order Management – Simplified bulk garment ordering process
📍 Real-time Tracking – Live location-based production and delivery updates
💳 Secure Payments – Integrated Stripe payment gateway
👥 Multi-role System – Specialized dashboards for different user types
📊 Analytics Dashboard – Comprehensive statistics and insights

✨ Core Features

🧩 User Experience

✅ Dynamic Product Catalog – Browse garments with advanced filtering and search
✅ Smart Order Placement – Intuitive bulk order form with instant price calculation
✅ Stripe Payment – Secure credit/debit card checkout process
✅ Real-time Tracking – Live status updates with location-based tracking on map
✅ Multi-role Dashboard – Tailored interfaces for Admin, Manager, and Buyer
✅ Order History – Complete transaction and order history with filtering

🔐 Security & Logic

✅ Firebase Auth – Secure login with Email/Password and Google Social Auth
✅ Private Routes – Protected dashboard access based on user roles and authentication
✅ Axios Interceptors – Automated JWT token injection for secure API communication
✅ Form Validation – Robust client-side validation using React Hook Form
✅ Role-based Access Control – Granular permissions for different user types

📱 Additional Features

✅ Responsive Design – Fully optimized for mobile, tablet, and desktop
✅ Interactive Maps – React Leaflet integration for location tracking
✅ Pagination – Industry-standard pagination (15 items per page)
✅ Smooth Animations – Framer Motion for elegant transitions
✅ Dark Mode – Theme switching capability
✅ Toast Notifications – Real-time user feedback

🛠 Tech Stack

Frontend Core

React.js 18 – Component-based UI library
React Router v6 – Declarative routing for SPA navigation
TanStack Query (v5) – Powerful data fetching and state management
Tailwind CSS & DaisyUI – Modern utility-first CSS framework and components

UI & Animation

Motion (Framer Motion) – Smooth UI animations and transitions
React Leaflet – Interactive maps for order tracking
Lucide React & React Icons – Modern iconography
SweetAlert2 – Elegant pop-up notifications
React Hot Toast – Lightweight toast notifications

Tools & Integrations

Stripe SDK – Secure online payment processing
Firebase – Authentication and hosting
Axios – HTTP client with interceptors
React Hook Form – Efficient form management
Vite – Lightning-fast build tool

🚀 Getting Started

🔧 Prerequisites

node >= 18.0.0
npm >= 9.0.0

🪄 Installation

1. Clone the repository

git clone https://github.com/aamamunszone/garflex-client.git
cd garflex-client

2. Install dependencies

npm install

3. Setup environment variables

Create a .env.local file in the project root:

# Firebase Configuration
VITE_apiKey=your_firebase_api_key
VITE_authDomain=your_auth_domain
VITE_projectId=your_project_id
VITE_storageBucket=your_storage_bucket
VITE_messagingSenderId=your_sender_id
VITE_appId=your_app_id

# Stripe
VITE_STRIPE_PUBLIC_KEY=your_stripe_publishable_key

# API
VITE_API_URL=https://garflex-server.vercel.app

4. Run the application

npm run dev

The application will be available at http://localhost:5173

📦 Build for Production

npm run build

🚀 Deploy to Firebase

npm run build
firebase deploy

🔐 Dashboard Roles

👤 Buyer

Permissions:

Browse and search product catalog
Place bulk garment orders
View order history with filtering
Track orders in real-time with map
Make secure payments via Stripe
Cancel pending orders
View personal dashboard statistics

Key Pages:

My Orders
Track Order (with interactive map)
Order History
Profile Settings

💼 Manager

Permissions:

View all orders in the system
Approve or reject pending orders
Update order tracking information
Add production status updates with location
View manager-specific statistics
Manage order lifecycle (Cutting, Sewing, Finishing, QC, Packing, Shipping)

Key Pages:

All Orders Management
Order Tracking Updates
Production Statistics
Approval Queue

🛠 Admin

Permissions:

Full access to all system features
Manage all users (promote/demote roles)
View global statistics and analytics
Manage product catalog (CRUD operations)
Delete any order
Access comprehensive dashboard with charts
System configuration and settings

Key Pages:

Dashboard (with charts and analytics)
User Management
Product Management
Order Management (full access)
System Statistics

📂 Project Structure

garflex-client/
├── src/
│   ├── api/                    # Axios instances and API configurations
│   │   ├── axiosPublic.js     # Public API instance
│   │   └── axiosSecure.js     # Secure API with interceptors
│   ├── components/
│   │   ├── common/            # Reusable components
│   │   │   ├── Container/
│   │   │   ├── Loader/
│   │   │   └── Navbar/
│   │   ├── products/          # Product-related components
│   │   │   └── ProductCard/
│   │   └── dashboard/         # Dashboard components
│   ├── hooks/                 # Custom React hooks
│   │   ├── useAuth.jsx       # Authentication hook
│   │   ├── useAxios.jsx      # Public axios hook
│   │   └── useAxiosSecure.jsx # Secure axios hook
│   ├── layouts/
│   │   ├── MainLayout.jsx    # Public layout
│   │   └── DashboardLayout.jsx # Dashboard layout
│   ├── pages/
│   │   ├── Home/             # Landing page
│   │   ├── AllProducts/      # Product catalog
│   │   ├── Auth/             # Login/Register
│   │   └── Dashboard/        # Role-specific dashboards
│   │       ├── Admin/
│   │       ├── Manager/
│   │       └── Buyer/
│   ├── providers/
│   │   └── AuthProvider.jsx  # Auth context provider
│   ├── routes/
│   │   ├── Routes.jsx        # Main routing configuration
│   │   └── PrivateRoute.jsx  # Protected route wrapper
│   ├── firebase/
│   │   └── firebase.config.js # Firebase initialization
│   ├── assets/               # Images and global styles
│   ├── App.jsx
│   └── main.jsx
├── public/
│   └── products/             # Product images
├── index.html
├── tailwind.config.js        # Tailwind configuration
├── vite.config.js            # Vite configuration
├── .firebaserc               # Firebase project config
├── firebase.json             # Firebase hosting config
└── package.json

🎨 UI/UX Highlights

Design Philosophy

Minimalist & Modern – Clean interface with focus on functionality
Consistent Branding – Cohesive color scheme and typography
Intuitive Navigation – User-friendly routing and breadcrumbs
Accessible – WCAG compliant with proper ARIA labels

Technical Highlights

✅ Responsive Design – Fully optimized for Mobile, Tablet, and Desktop
✅ Skeleton Loaders – Smooth loading states for premium feel
✅ Interactive Charts – Visual representation of statistics (Admin)
✅ Toast Notifications – Real-time feedback for every user action
✅ Smooth Animations – Page transitions and micro-interactions
✅ Optimized Images – Lazy loading and proper image optimization
✅ Error Boundaries – Graceful error handling and fallbacks
✅ Progressive Enhancement – Works without JavaScript where possible

Component Library

Custom Container – Consistent max-width wrapper
Reusable Cards – Product cards, order cards, stat cards
Modal System – Dynamic modals for order details and tracking
Form Components – Validated input fields with error states
Table Components – Sortable and filterable data tables
Badge System – Status indicators for orders and payments

📸 Screenshots

🏠 Landing Page

Hero section with call-to-action
Product showcase with filtering
Feature highlights
Coverage area with interactive map

📦 Product Catalog

Grid layout with product cards
Category filtering
Search functionality
Pagination (15 items per page)

📊 Dashboards

Buyer Dashboard

Order history table
Real-time tracking with map
Payment history
Quick stats overview

Manager Dashboard

Order approval queue
Tracking update form
Production statistics
Status management

Admin Dashboard

Comprehensive analytics
User management table
Product CRUD interface
System-wide statistics

🔧 Configuration Files

Tailwind Config (`tailwind.config.js`)

export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: '#6366f1',
        secondary: '#8b5cf6',
      },
    },
  },
  plugins: [require('daisyui')],
  daisyui: {
    themes: ['light', 'dark'],
  },
};

Firebase Config (`firebase.json`)

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

🚀 Performance Optimizations

Code Splitting – Lazy loading of routes and components
React Query Caching – Optimized data fetching with cache management
Image Optimization – Compressed images and lazy loading
Bundle Size – Tree-shaking and minification
Memoization – useMemo and useCallback for expensive operations
Virtual Scrolling – For large lists (planned feature)

🐛 Known Issues & Future Enhancements

Planned Features

Bug Reports

If you encounter any issues, please create an issue on GitHub.

👨‍💻 Developer

Abdullah Al Mamun
Full Stack Developer | MERN Stack Specialist

📊 Project Stats

Made with ❤️ and 📦 by Abdullah Al Mamun

⭐ Star this repo if you like it!

Name		Name	Last commit message	Last commit date
Latest commit History 59 Commits
.firebase		.firebase
src		src
.firebaserc		.firebaserc
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
eslint.config.js		eslint.config.js
firebase.json		firebase.json
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Folders and files

Latest commit

History

Repository files navigation

📦 GarFlex Client

Modern Garments Manufacturing & Order Management Dashboard

📋 Table of Contents

🎯 About The Project

Why GarFlex?

✨ Core Features

🧩 User Experience

🔐 Security & Logic

📱 Additional Features

🛠 Tech Stack

Frontend Core

UI & Animation

Tools & Integrations

🚀 Getting Started

🔧 Prerequisites

🪄 Installation

📦 Build for Production

🚀 Deploy to Firebase

🔐 Dashboard Roles

👤 Buyer

💼 Manager

🛠 Admin

📂 Project Structure

🎨 UI/UX Highlights

Design Philosophy

Technical Highlights

Component Library

📸 Screenshots

🏠 Landing Page

📦 Product Catalog

📊 Dashboards

Buyer Dashboard

Manager Dashboard

Admin Dashboard

🔧 Configuration Files

Tailwind Config (tailwind.config.js)

Firebase Config (firebase.json)

🚀 Performance Optimizations

🐛 Known Issues & Future Enhancements

Planned Features

Bug Reports

👨‍💻 Developer

📊 Project Stats

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Tailwind Config (`tailwind.config.js`)

Firebase Config (`firebase.json`)