All Your Finances. One Dashboard.
A modern personal finance dashboard built with React + Vite + Tailwind CSS — track insurance, SIPs, loans, and bank accounts in one clean interface.
| Dashboard | Insights | Reminders |
|---|---|---|
 |
 |
 |
- 📊 Dashboard – See all your finances in one place with charts & summaries
- ➕ Add/Edit Records – Manage financial records easily with validation
- 🔔 Reminders – Get upcoming due date alerts & overdue badges
- 📈 Insights – View analytics and trends using interactive charts
- 💾 Local Storage – Data persists safely on your device
- 🎨 Responsive UI – Clean, minimal design built with Tailwind & shadcn/ui
- ⚙️ Fully TypeScript-Based – Safer, cleaner, and scalable code
| Category | Tools Used |
|---|---|
| Framework | React 18 (Vite) |
| Language | TypeScript |
| Styling | Tailwind CSS, shadcn/ui |
| Routing | React Router |
| Charts | Recharts |
| Icons | Lucide React |
| Storage | Browser LocalStorage |
1️⃣ Login Page
– Enter any credentials or click Continue as Guest
– Data is stored locally for simplicity
2️⃣ Dashboard
– See a summary of insurance, SIPs, loans, and bank data
– View pie chart distribution by type
– Tap a record to edit
3️⃣ Add/Edit Record
– Add a new record with name, type, amount, and due date
– Update or delete existing entries
4️⃣ Reminders
– Filter by All, Overdue, This Week, Next Week, This Month
– Quickly check what payments are coming next
5️⃣ Insights
– Analyze your total, averages, and trends
– Interactive bar and pie charts for visualization
- Node.js ≥ 16
- npm (or yarn)
# Clone the repository
git clone https://github.com/ka0913560-hub/FinSync.git
# Navigate to project folder
cd FinSync/web
# Install dependencies
npm install
# Start development server
npm run dev