SmartEMI Frontend – AI Powered Loan Advisory Dashboard

Frontend for SmartEMI, a fintech SaaS web application that helps users analyze student loans using EMI calculations, affordability analysis, financial health scoring, and AI-driven financial advice.

This project provides a modern dashboard UI with charts, reports, authentication, and AI insights.

---

Live Application

https://smart-emi-frontend.vercel.app

🚀 Features

Authentication UI

• User registration page
• Login page
• JWT based authentication
• Protected routes
• Logout functionality

EMI Calculator UI

Users can enter:

• Loan amount
• Interest rate
• Tenure

System displays:

• EMI
• Total interest
• Total payment

Affordability Dashboard

Displays:

• Debt to income ratio
• Savings ratio
• Financial risk level
• Affordability score

AI Financial Advisor UI

Displays AI response:

• Risk level
• Recommendations
• Budget tips
• Financial insights

Charts Dashboard

Visualizations:

• Income vs Expenses vs EMI
• Savings vs Expenses

Loan History UI

Features:

• Loan history table
• Risk indicators
• Delete records
• Loading states
• Empty states

PDF Report Export

Users can download a financial report containing:

• EMI data
• Affordability score
• Financial health score
• AI advice

---

🛠 Tech Stack

Frontend

• React
• TypeScript
• Vite

UI

• TailwindCSS
• Lucide Icons

State Management

• React Context API

Charts

• Chart.js

API Communication

• Axios

PDF Generation

• jsPDF
• html2canvas

---

📁 Project Structure

client/
│
├── src/
│   ├── pages/
│   │   ├── Landing.tsx
│   │   ├── Dashboard.tsx
│   │   ├── Calculator.tsx
│   │   ├── History.tsx
│   │   ├── Login.tsx
│   │   ├── Register.tsx
│   │
│   ├── components/
│   │   ├── Navbar.tsx
│   │   ├── Sidebar.tsx
│   │   ├── Charts.tsx
│   │   ├── AICard.tsx
│   │   ├── LoanTable.tsx
│   │
│   ├── services/
│   │   ├── api.ts
│   │   ├── authService.ts
│   │
│   ├── context/
│   │   ├── AuthContext.tsx
│   │
│   ├── hooks/
│
│   ├── types/
│
│   ├── utils/
│
│   ├── App.tsx
│   ├── main.tsx
│
├── public/
├── package.json
├── vite.config.ts

---

⚙️ Installation

Clone repository

git clone https://github.com/YOUR_USERNAME/SmartEMI-frontend.git

Enter folder

cd SmartEMI-frontend

Install dependencies

npm install

Setup environment variables

Create:

.env

Add:

VITE_API_URL=http://localhost:5000/api

Run development server

npm run dev

Frontend runs on:

http://localhost:5173

---

🔌 API Integration

Frontend communicates with backend using Axios.

Example base URL:

VITE_API_URL=http://localhost:5000/api

Axios handles:

• JWT token attachment
• 401 handling
• API error handling

---

🔐 Authentication Flow

Login flow:

User logs in → JWT received → Stored in localStorage → Axios attaches token → Protected routes accessible.

Header format:

Authorization: Bearer TOKEN

Logout clears token.

---

🌍 Deployment

Frontend prepared for:

• Vercel deployment

Build command:

npm run build

Output folder:

dist

Production environment variable:

VITE_API_URL=https://your-backend-url/api

---

🎨 UI Improvements Implemented

• Fintech SaaS style dashboard
• Sidebar navigation
• Gradient hero sections
• Responsive layout
• Loading indicators
• Reusable card components
• Clean typography

---

📊 Future Improvements

Planned:

• Dark mode
• Advanced charts
• AI chat interface
• Financial goal tracker
• Credit score integration
• Mobile optimization

---

👨‍💻 Author

Dinesh Chaudhary

Full Stack Developer | MERN | Fintech | AI Integration

LinkedIn: https://linkedin.com/in/dinesh-chaudhary-81b928228/

GitHub: https://github.com/Dinesh-chaudhary1406

Portfolio: https://my-portfolio-website-mauve-psi.vercel.app

---

⭐ Project Value

This project demonstrates:

• Modern React architecture
• API integration patterns
• Authentication flows
• Financial dashboard UI
• Data visualization
• Production frontend structure

---

📜 License

MIT License