💰 Personal Finance Tracker

A modern, full-stack personal finance tracking application built with cutting-edge web technologies. Take control of your finances with intuitive expense tracking, beautiful data visualizations, and secure user authentication.

✨ Features

• 🔐 Secure Authentication - JWT-based login/register system with bcrypt password hashing
• 💸 Transaction Management - Add, view, and delete income/expense transactions
• 📊 Data Visualization - Beautiful charts powered by Recharts for financial insights
• 📱 Responsive Design - Fully responsive across all devices
• 🎨 Modern UI - Clean interface with styled-components and gradient themes
• 🔄 Real-time Updates - Instant transaction updates with optimistic UI
• 🛡️ Secure API - Protected routes with JWT token validation
• 🚀 Production Ready - Environment variables, error handling, and deployment configs

🏗️ Tech Stack

Frontend ⚛️

• React 19 - Latest React with concurrent features
• Vite - Lightning-fast build tool and dev server
• TypeScript - Type safety and better developer experience
• styled-components - CSS-in-JS styling with theme support
• Recharts - Modern charting library for data visualization

Backend 🚀

• Node.js - JavaScript runtime
• Express - Fast, minimalist web framework
• MongoDB - NoSQL document database
• Mongoose - Elegant MongoDB ODM
• JWT - Secure token-based authentication
• bcryptjs - Password hashing and validation

🚀 Quick Start

Prerequisites 📋

• Node.js (v18 or higher) - Download here
• MongoDB - Local installation or MongoDB Atlas

Installation 🔧

1. Clone & Navigate

git clone <your-repo-url>
cd personal-finance-tracker

2. Install Dependencies

# Install frontend dependencies
npm install

# Install backend dependencies  
npm run install:backend

3. Environment Setup 🔐

# Copy the example environment file in the backend directory
cp backend/.env.example backend/.env

# Edit backend/.env with your configuration:
# - Set MONGODB_URI to your MongoDB connection string
# - Set JWT_SECRET to a secure random string
# - Adjust PORT and FRONTEND_URL if needed

Development 💻

Start both frontend and backend:

npm run dev:full

Or start them separately:

Frontend (http://localhost:5173):

npm run dev

Backend (http://localhost:3001):

npm run backend

Production Build 🏭

npm run build        # Build frontend
npm run preview      # Preview production build

🔌 API Endpoints

Authentication 🔐

• POST /api/auth/register - Create new user account
• POST /api/auth/login - User login with JWT token

Transactions 💸 (Protected Routes)

• GET /api/transactions - Get user's transaction history
• POST /api/transactions - Create new income/expense transaction
• DELETE /api/transactions/:id - Delete specific transaction

Health Check ⚡

• GET /api/health - API server health status

📁 Project Structure

personal-finance-tracker/
├── src/                    # 🎨 Frontend source
│   ├── components/         # ⚛️ React components
│   ├── pages/             # 📄 Page components  
│   ├── services/          # 🔗 API services
│   ├── hooks/             # 🪝 Custom hooks
│   ├── types/             # 📝 TypeScript types
│   └── main.tsx          # 🚀 App entry point
├── backend/               # 🚀 Backend source
│   ├── models/           # 📊 MongoDB models
│   ├── routes/           # 🛣️ Express routes
│   ├── middleware/       # 🛡️ Custom middleware
│   └── server.js         # 🖥️ Server entry point
└── package.json          # 📦 Root package.json

🔮 Future Enhancements

Ready to take your finance tracker to the next level? Here are some exciting features you can add:

• 📊 Enhanced Dashboard - Visual spending summaries and trends
• 🏷️ Smart Categories - Custom transaction categories with icons
• 💰 Budget Management - Set and track monthly/yearly budgets
• 📈 Advanced Analytics - Detailed insights with Recharts visualizations
• 📤 Import/Export - CSV/Excel data import and export functionality
• 🔍 Smart Search - Advanced filtering and transaction search
• 🔄 Recurring Transactions - Automated monthly bills and income
• 🎯 Financial Goals - Savings goals with progress tracking
• 📱 Mobile App - React Native companion app
• 🤖 AI Insights - Smart spending recommendations

📚 Learning Resources

Expand your knowledge with these excellent resources:

• 🔥 React 19 Documentation - Latest React features
• ⚡ Vite Guide - Fast build tooling
• 💅 styled-components - CSS-in-JS styling
• 📊 Recharts Documentation - React charting library
• 🚀 Express.js Guide - Node.js web framework
• 🍃 Mongoose Documentation - MongoDB object modeling

🛡️ Security Features

• ✅ JWT Authentication - Secure token-based authentication system
• ✅ Password Hashing - bcrypt with salt rounds for password protection
• ✅ CORS Protection - Configured cross-origin resource sharing
• ✅ Input Validation - Server-side validation for all API endpoints
• ✅ Environment Variables - Secure storage of sensitive configuration
• ✅ Route Protection - Middleware-based authentication for protected routes

---

Made with 💖 using modern web technologies

Ready to transform your financial life? Start tracking today! 🚀