A modern, full-stack loan monitoring and risk management platform built with Next.js 14+, TypeScript, Supabase, and shadcn/ui.
- 📊 Portfolio Dashboard - Track all loans with interactive charts and real-time statistics
⚠️ Risk Assessment - Automated risk scoring based on loan parameters and payment history- 🔔 Smart Alerts - Real-time notifications for overdue payments and high-risk loans
- 💰 Payment Tracking - Record and monitor payment history with detailed analytics
- 🌱 ESG Metrics - Track environmental, social, and governance performance
- 📈 Data Visualization - Interactive charts using Recharts (line, pie, and bar charts)
- 🔐 Secure Authentication - Email/password auth with Supabase and protected routes
- ⚡ Real-time Updates - Live data synchronization using Supabase subscriptions
- 📱 Responsive Design - Mobile-first approach with Tailwind CSS
- 🎨 Modern UI - Beautiful components from shadcn/ui
- 🛡️ Type Safety - Full TypeScript coverage with strict mode
- ✅ Form Validation - Zod schemas for robust input validation
- 🌐 Server & Client Components - Optimized with Next.js App Router
- 🔄 Error Handling - Global error boundaries and toast notifications
- Framework: Next.js 14+ (App Router)
- Language: TypeScript
- Database: Supabase (PostgreSQL)
- Authentication: Supabase Auth
- Styling: Tailwind CSS
- UI Components: shadcn/ui + Radix UI
- Charts: Recharts
- Icons: Lucide React
- Form Validation: Zod
- Notifications: Sonner
- Node.js 18+ and npm
- Supabase account (free tier available)
- Git
- Clone the repository
git clone <your-repo-url>
cd loanguard- Install dependencies
npm install- Set up environment variables
Create a .env.local file in the root directory:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_keyGet these values from your Supabase Dashboard → Project Settings → API
- Set up the database
Run the SQL scripts from DEPLOYMENT.md in your Supabase SQL Editor to create:
- Tables (profiles, loans, alerts, esg_metrics)
- Indexes
- Row Level Security (RLS) policies
- Triggers
- Run the development server
npm run dev- Open your browser
Navigate to http://localhost:3000
loanguard/
├── app/
│ ├── (auth)/ # Authentication routes
│ │ ├── login/ # Login page
│ │ └── signup/ # Signup page
│ ├── (protected)/ # Protected routes
│ │ ├── dashboard/ # Main dashboard
│ │ └── loans/[id]/ # Loan details pages
│ ├── layout.tsx # Root layout with providers
│ ├── page.tsx # Landing page
│ ├── error.tsx # Global error boundary
│ └── not-found.tsx # 404 page
├── components/
│ ├── ui/ # shadcn/ui components
│ ├── Alerts.tsx # Alerts panel component
│ ├── DashboardCharts.tsx # Charts component
│ ├── NewLoanModal.tsx # Create loan modal
│ └── SupabaseProvider.tsx # Supabase context provider
├── lib/
│ └── supabaseClient.ts # Supabase client config
└── .env.local # Environment variables (create this)
| Route | Description | Access |
|---|---|---|
/ |
Landing page | Public |
/login |
User login | Public |
/signup |
User registration | Public |
/dashboard |
Main dashboard | Protected |
/loans/[id] |
Loan details | Protected |
- profiles - User profiles with roles (lender/borrower)
- loans - Loan records with risk scores and payment tracking
- alerts - System alerts and notifications
- esg_metrics - ESG performance metrics (optional)
See DEPLOYMENT.md for complete SQL schema.
# Start development server
npm run dev
# Build for production
npm run build
# Start production server
npm start
# Run linter
npm run lint- TypeScript: Strict mode enabled
- ESLint: Configured with Next.js recommended rules
- Path Aliases: Use
@/for absolute imports
# Add a new shadcn/ui component
npx shadcn@latest add <component-name>See DEPLOYMENT.md for detailed deployment instructions to Vercel.
Required Environment Variables:
NEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEY
- Summary cards (Total Loans, Total Amount, Overdue, Average Risk)
- Loans table with status tabs
- Interactive charts (Line, Pie, Bar)
- Create new loan modal
- Real-time updates
- Full loan information display
- Payment history table
- Add payment functionality
- Update loan status
- Delete loan with confirmation
- Alerts accordion
- ESG metrics (if available)
- Slide-out panel with all alerts
- Real-time notifications
- Mark as read/unread
- Delete alerts
- Navigate to related loans
- Overall ESG score
- Individual scores (Environmental, Social, Governance)
- Carbon footprint tracking
- Add custom or mock data
- ✅ Server-side authentication checks
- ✅ Row Level Security (RLS) on all tables
- ✅ Protected API routes
- ✅ Environment variables for secrets
- ✅ HTTPS in production
- ✅ Input validation with Zod
- ✅ XSS protection with React
- Server Components for reduced bundle size
- Optimized images with Next.js Image component
- Real-time subscriptions only where needed
- Efficient database queries
- Code splitting and lazy loading
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License.
For support, please open an issue in the GitHub repository.
- Next.js - React framework
- Supabase - Backend platform
- shadcn/ui - UI components
- Vercel - Deployment platform
- Tailwind CSS - Styling framework
Built with ❤️ for better loan management