---

Group-Lendr 💸

A modern loan management web application built with React, Vite, and Tailwind CSS, powered by Supabase, React Query, and Context API for efficient state and data management.

---

🚀 Overview

Group-Lendr is designed to simplify group-based lending systems (such as SACCOs, chamas, or microfinance groups). It provides a centralized platform to manage members, loans, repayments, and contributions with real-time insights.

---

🛠️ Tech Stack

• React – Frontend UI library
• Vite – Fast build tool and dev server
• Tailwind CSS – Utility-first styling
• Supabase – Backend (Database + Auth)
• React Query (@tanstack/react-query) – Server state management & caching
• Context API – Client-side auth state management

---

📊 Features

🔐 Authentication

• Secure authentication powered by Supabase Auth
• Auth state managed globally using Context API
• Protected routes (only authenticated users can access pages)

---

📈 Dashboard

• Overview of key metrics:

  • Total loans
  • Active loans
  • Inactive loans
  • Overdue loans
  • Contributions summary

---

👥 Members Management

• List of all members

• Each member includes:

  • Loan records

  • Loan statuses:

    • Active
    • Inactive
    • Overdue

  • Repayment history

  • Monthly contributions

---

💰 Loans Management

• View all loans in the system

• Track:

  • Total amount
  • Amount paid
  • Pending balance
  • Loan status

• Loan details page:

  • Complete repayment history
  • Payment breakdown

---

🧾 Contributions

• View contributions across all members
• Track monthly contributions easily

---

⚡ Data & State Management

• Supabase handles:

  • Database (PostgreSQL)
  • Authentication

• React Query handles:

  • Data fetching
  • Caching
  • Background updates
  • Server state synchronization

• Context API handles:

  • Authentication state
  • User session management

---

📂 Project Structure (Simplified)

src/
│
├── components/       # Reusable UI components
├── pages/           # Dashboard, Members, Loans, Contributions
├── hooks/           # Custom hooks (React Query hooks)
├── lib/api          # Supabase queries & API logic
├── context/         # Auth context (Context API)
├── utils/supabase   # Supabase client setup
└── App.tsx          # App entry point

---

⚙️ Getting Started

1. Clone the repository

git clone https://github.com/jmdotdev/group-lendr.git
cd group-lendr

2. Install dependencies

npm install

3. Setup environment variables

Create a .env file in the root:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

---

4. Run the development server

npm run dev

---

🔒 Security

• Authentication handled via Supabase Auth
• Protected routes using auth context
• Secure session handling

---

🎯 Future Improvements

• Role-based access control (Admin/User)
• Email notifications for overdue loans
• Reports & analytics dashboard
• Export data (CSV/PDF)

---

Group-Lendr helps you manage group lending efficiently with real-time data, secure authentication, and a clean modern UI.