Overview
LoanLink is an enterprise-grade, full-stack loan management and underwriting ecosystem split across two completely independent repositories: a modern React 19 + Vite client (AH-Muzahid/LoanLink) and a high-throughput Express + MongoDB REST API (AH-Muzahid/LoanLink-backend). Rather than a tightly coupled monorepo, each repository owns its independent Git lifecycle, CI/CD pipeline, and serverless deployment target.
The platform eliminates manual paperwork by automating every stage of the lending lifecycle: dynamic EMI simulation and amortization breakdown, multi-step borrower applications, drag-and-drop underwriting Kanban triage via @hello-pangea/dnd, instant PDF sanction generation via jsPDF, Stripe fee processing, in-app notification feeds, and an interactive AI loan advisor powered by Groq and Google Gemini.
Decoupled Multi-Repo Architecture
LoanLink is architected across two dedicated GitHub repositories (Frontend SPA & Serverless Express Backend) communicating over CORS-secured REST APIs with HTTP-only JWT cookie authentication, role-based route guards (Borrower, Manager, Admin), and automated serverless MongoDB connection pooling.
LoanLink interactive borrower portal with real-time loan discovery, EMI calculation, and application workflow.
Tech Stack
- •React 19 with Vite 6 (ES Modules & SWC)
- •Tailwind CSS v4 + DaisyUI for responsive dark-first financial UI
- •@tanstack/react-query for optimistic mutations and server state cache management
- •@hello-pangea/dnd for interactive drag-and-drop loan triage boards
- •Firebase Authentication with Google OAuth and Email/Password flows
- •Recharts for visual financial analytics and repayment distributions
- •jsPDF & jsPDF-autotable for on-the-fly legal loan sanction & receipt generation
- •PapaParse for 1-click CSV report exports
- •Framer Motion, AOS, and Lenis for smooth UI reveals and buttery scrolling
- •Lucide React for consistent financial icon typography
Feature Breakdown
Drag-and-Drop Underwriting Pipeline
Interactive Kanban board powered by @hello-pangea/dnd enabling loan managers to triage applications between Pending, Under Review, Approved, and Disbursed.
AI Financial Advisor & EMI Engine
Intelligent conversational assistant backed by Groq and Gemini AI coupled with an interactive monthly EMI & amortization schedule generator.
Client-Side PDF Sanction Generation
Instant on-the-fly creation of legally formatted loan sanction letters, amortization tables, and payment receipts using jsPDF with zero server overhead.
Stripe Payment Gateway & RBAC
End-to-end Stripe payment intent workflow for application fees paired with strict 3-tier Role-Based Access Control (Borrowers, Managers, Admins).
Interactive EMI Calculator with dynamic compound interest computation, principal-to-interest breakdown, and repayment schedule dialog.
Platform Interface & Live Telemetry
LoanLink Hero Portal Interface
Welcome to LoanLink borrower home & financial solutions portal.
LoanLink Multi-Category Available Loans Catalog
All available loan schemes across Education, Healthcare, Business, Vehicle, and Agriculture with real-time search.
LoanLink Loan Officer & Manager Dashboard
Manager analytics dashboard: Real-time loan portfolio value (৳92.8L), approval breakdown, and monthly volume tracking.
LoanLink Interactive EMI Calculator
Real-time loan amount, tenure, and interest rate calculation sliders with principal breakdown chart.
LoanLink Amortization Repayment Schedule Modal
Comprehensive monthly compound amortization schedule breakdown with 1-click legal PDF download.
Architecture
User Journey
Registration & Identity Provisioning
The user registers via Firebase Auth (Email/Password or Google OAuth) and receives a secure, HTTP-only JWT session cookie for subsequent API calls.
Loan Discovery & EMI Simulation
Borrowers browse loan schemes (Personal, Business, Education) and simulate tenure, interest rates, and monthly repayments with the interactive EMI calculator.
Application Submission & Document Attachment
A structured multi-step application form captures income details, requested amounts, guarantor info, and upload references before dispatching to the API.
Manager Review & Kanban Triage
Loan Managers review borrower profiles, drag cards across status columns (Pending → Under Review → Approved/Rejected), and record notes in real-time.
Stripe Fee Processing & PDF Generation
Borrowers complete processing fees securely through Stripe and download their official PDF loan sanction agreement with one click.
LoanLink decouples client UI interactions from server data workflows. The React SPA communicates with the Express REST API via authenticated cookies, delegating identity to Firebase Auth, payments to Stripe, and natural language advice to Groq/Gemini AI.
Loan requests submit to POST /applications, get validated, and enter the pending queue. Managers evaluate creditworthiness, mutate status flags via PATCH /applications/:id, and upon approval, trigger automated notification records in MongoDB.
5-Stage Financial Underwriting & Disbursement Pipeline
Complete lifecycle from initial EMI simulation to legal sanction letter download.
Loan Simulation & Amortization Breakdown
Borrowers adjust loan principals, interest percentages, and tenures. The engine computes monthly compound EMIs and total payable interest.
KYC & Multi-Step Application Ingestion
Borrowers submit verified income details, employment documents, and collateral information into the secure pending queue.
Manager Kanban Underwriting & Risk Scoring
Loan officers triage applications on the drag-and-drop board, verifying credit history and updating status flags in real-time.
Stripe Processing Fee Settlement
Borrowers finalize application processing charges through Stripe Payment Intents with real-time webhook confirmation.
Automated Legal PDF Agreement Issuance
Upon manager approval, jsPDF dynamically draws official legal sanction letters with repayment schedules directly in the browser.
Financial Security & RBAC Guard Rails
Financial data requires comprehensive identity boundaries and payment tampering safeguards.
3-Tier Role-Based Access Control (RBAC)
Strict route guards segregate Borrowers (own loans only), Managers (approval board), and Admins (system revenue & user roles).
Serverless MongoDB Connection Caching
Connection handles are cached globally across serverless lambda executions to prevent database connection spikes and memory leaks.
Stripe Webhook Idempotency
Payment receipts are keyed by Stripe paymentIntent ID, preventing duplicate charge records or double loan disbursements.
Financial Platform Benchmarks
Real-world operational speed across critical financial customer touchpoints.
Client-side PDF compilation with jsPDF (zero server CPU load).
Backend session creation to frontend checkout component mount.
Instant mathematical amortization recalculation on input slider change.
PDF Agreement Architecture: Client-Side jsPDF vs Server-Side Puppeteer
Why LoanLink chose in-browser PDF generation over serverless Chromium rendering.
| Dimension / Feature | Client-Side jsPDF Engine | Serverless Puppeteer / Chromium |
|---|---|---|
| Server Memory Footprint | 0 MB (Runs in browser RAM) | 500MB+ per Chromium process |
| Generation Latency | Instant (< 120ms download) | 3,000ms - 6,000ms cold boot |
| Infrastructure Cost | $0 (Zero server compute costs) | Requires dedicated high-RAM lambda |
| Offline Availability | Generates without server network call | Fails when backend connection drops |
API Endpoints
| Resource | Mount point | Purpose |
|---|---|---|
| Auth | POST /jwt, POST /logout | Issue and clear secure HTTP-only JWT cookies with 7-day lifespan |
| Applications | GET, POST, PATCH /applications | Submit multi-step loan applications, fetch borrower history, and triage approval statuses |
| Loans Catalog | GET, POST, PUT, DELETE /loans | Manage lending schemes, category definitions, interest rates, and loan limits |
| Payments | POST /create-payment-intent, /payments | Stripe payment intent creation, processing fee verification, and transaction ledger |
| Analytics | GET /admin/stats, GET /manager/stats | Aggregated financial insights, loan volume totals, and revenue metrics |
| Notifications | GET, PATCH /notifications | Activity feeds, status change alerts, and payment receipt notifications |
Project Structure
Getting Started
Environment Variables
VITE_API_URL=http://localhost:5000 VITE_FIREBASE_API_KEY=AIzaSy... VITE_FIREBASE_AUTH_DOMAIN=loanlink-auth.firebaseapp.com VITE_FIREBASE_PROJECT_ID=loanlink-auth VITE_FIREBASE_STORAGE_BUCKET=loanlink-auth.appspot.com VITE_FIREBASE_MESSAGING_SENDER_ID=... VITE_FIREBASE_APP_ID=1:... VITE_STRIPE_PUBLISHABLE_KEY=pk_test_... VITE_GROQ_API_KEY=gsk_... VITE_GEMINI_API_KEY=AIzaSy...
Running Locally
Requires Node.js 18+, npm/yarn, MongoDB Atlas, Firebase Project, and Stripe API keys.
git clone https://github.com/AH-Muzahid/LoanLink.git cd LoanLink npm install npm run dev # launches on http://localhost:5173
Deployment
- Frontend (Vercel) — Git linked to AH-Muzahid/LoanLink with single-page app rewrite routes.
- Backend (Vercel) — Git linked to AH-Muzahid/LoanLink-backend with serverless Express handler and cached MongoDB Atlas pooling.
Frequently Asked Questions
See it in action
Experience the loan application pipeline, interactive EMI calculator, and manager dashboard at the Live Application.
