ExpenseFlow is a modern and responsive full-stack expense tracking web application designed to help users manage their finances efficiently. With a clean and elegant dark-themed UI, it allows users to monitor spending, analyze balance, and achieve their financial goals effortlessly.
The application features a robust Node.js/Express backend with MongoDB database, real-time synchronization, advanced analytics, and comprehensive security measures.
- 🚀 Live Demo
- 📚 Backend Documentation
- 🗄️ Database Documentation
- ⚙️ Getting Started
- 🐛 Report a Bug
- ✨ Request a Feature
- ✨ Features
- 🖥️ Overview
- [🤔 Why to use ExpenseFlow?](#-Why to use ExpenseFlow?)
- 🛠️ Tech Stack
- 📂 Folder Structure
- 🚀 How to Run Locally
- 📸 Screenshots
- 🧩 Future Enhancements
- 🎯 Learning Outcomes
- 🤝 Contributing
- 🧾 License
- 👩💻 Author
- 💬 Quote
- 🌟 Show Some Love
- 📊 Smart Dashboard – Displays total balance, spending trends, and updates.
- 💰 Expense & Income Management – Add, edit, or remove transactions easily.
- 🎯 Goal Tracking – Set saving targets and measure progress.
- 📈 Analytics View – Track your financial health visually.
- 🌙 Dark Mode UI – Sleek and eye-comfortable dark theme.
- ⚙️ Responsive Design – Optimized for desktop and mobile devices.
- 🔐 PWA Ready – Manifest and service worker support for offline usage.
- 🔄 Real-time Sync – Cross-device synchronization with Socket.IO ✅
- 💱 Multi-currency Support – Automatic currency conversion and exchange rates ✅
- 📱 Receipt Management – OCR-powered receipt scanning and storage ✅
- 🔔 Smart Notifications – Budget alerts, goal reminders, and security notifications ✅
- 🤖 AI Categorization – Machine learning-powered expense categorization ✅
- 📊 Advanced Analytics – Detailed spending insights and trends ✅
- 🔒 Security First – Rate limiting, input sanitization, and security monitoring ✅
- 📤 Data Export – Export financial data in multiple formats ✅
- 👥 Group Expense Management – Create groups and manage shared expenses ✅
- 💸 Expense Splitting – Split expenses among group members with payment tracking ✅
ExpenseFlow is a comprehensive full-stack expense tracking application built with modern web technologies. It combines a responsive frontend with a powerful backend API, providing users with a complete financial management solution.
- Frontend: HTML5, CSS3, JavaScript (Vanilla JS) with PWA capabilities
- Backend: Node.js/Express.js with RESTful API design
- Database: MongoDB with Mongoose ODM
- Real-time: Socket.IO for live synchronization
- Security: Helmet, rate limiting, input sanitization, and monitoring
- File Storage: Cloudinary integration for receipt uploads
- Notifications: Multi-channel notification system (email, push, SMS)
The app emphasizes:
- User-centered design
- Visual representation of financial data
- Scalable architecture for future enhancements
- Security and performance optimization
- Cross-platform compatibility
ExpenseFlow is designed to simplify personal finance management by providing a clean, intuitive, and distraction-free interface. It helps users track expenses and income efficiently while gaining better visibility into their spending habits.
Whether you are a student, beginner, or someone learning frontend development, ExpenseFlow serves as:
- A practical tool for daily expense tracking
- A beginner-friendly project to understand real-world UI logic
- A scalable base for adding backend, authentication, and analytics features
By using ExpenseFlow, users can build financial awareness while developers can strengthen their frontend and project-structuring skills.
- Expense tracking & splitting
- Budget goals
- AI-based categorization
- Email notifications
- Real-time sync
- Receipt management
| Category | Technology Used |
|---|---|
| Frontend | HTML5, CSS3, JavaScript (Vanilla JS) |
| Backend | Node.js, Express.js |
| Database | MongoDB with Mongoose ODM |
| Real-time | Socket.IO |
| Authentication | JWT (JSON Web Tokens) |
| File Storage | Cloudinary |
| Security | Helmet, Rate Limiting, Input Sanitization |
| OCR | Tesseract.js |
| Nodemailer | |
| Styling | Tailwind CSS / Custom CSS |
| Version Control | Git, GitHub |
| Deployment | Vercel (Frontend), Railway/Heroku (Backend) |
| PWA Support | manifest.json, sw.js |
ExpenseFlow/
│
├── public/ # Frontend static files
│ ├── index.html # Main HTML layout
│ ├── expensetracker.css # Styling and UI components
│ ├── trackerscript.js # Core JavaScript functionality
│ ├── manifest.json # PWA manifest
│ ├── sw.js # Service Worker for offline caching
│ ├── sw-notifications.js # Push notification service worker
│ ├── AboutUs.html # About page
│ ├── PrivacyPolicy.html # Privacy policy page
│ ├── terms_service.html # Terms of service
│ └── finance-tips.html # Financial tips page
│
├── models/ # MongoDB data models
│ ├── User.js # User authentication model
│ ├── Expense.js # Expense transaction model
│ ├── Budget.js # Budget management model
│ ├── Goal.js # Financial goals model
│ ├── Receipt.js # Receipt storage model
│ ├── Notification.js # Notification system model
│ ├── CurrencyRate.js # Currency exchange rates
│ ├── SyncQueue.js # Real-time sync queue
│ ├── CategoryPattern.js # AI categorization patterns
│ ├── AnalyticsCache.js # Analytics data cache
│ ├── MerchantDatabase.js # Merchant information
│ └── RecurringExpense.js # Recurring transactions
│
├── routes/ # API route handlers
│ ├── auth.js # Authentication routes
│ ├── expenses.js # Expense management routes
│ ├── budgets.js # Budget management routes
│ ├── goals.js # Goal tracking routes
│ ├── receipts.js # Receipt upload routes
│ ├── notifications.js # Notification routes
│ ├── analytics.js # Analytics routes
│ ├── currency.js # Currency conversion routes
│ ├── export.js # Data export routes
│ ├── groups.js # Group expense routes
│ ├── splits.js # Expense splitting routes
│ ├── recurring.js # Recurring expense routes
│ └── sync.js # Real-time sync routes
│
├── middleware/ # Express middleware
│ ├── auth.js # Authentication middleware
│ ├── rateLimit.js # Rate limiting
│ ├── rateLimiter.js # Advanced rate limiting
│ ├── sanitization.js # Input sanitization
│ ├── socketAuth.js # Socket authentication
│ ├── uploadMiddleware.js # File upload handling
│ ├── analyticsValidator.js # Analytics validation
│ ├── categorizationValidator.js # Category validation
│ ├── recurringValidator.js # Recurring expense validation
│ └── securityMonitor.js # Security monitoring
│
├── services/ # Business logic services
│ ├── analyticsService.js # Analytics processing
│ ├── budgetService.js # Budget calculations
│ ├── categorizationService.js # AI categorization
│ ├── currencyService.js # Currency conversion
│ ├── emailService.js # Email notifications
│ ├── exportService.js # Data export
│ ├── fileUploadService.js # File upload handling
│ ├── notificationService.js # Notification management
│ ├── recurringService.js # Recurring transactions
│ ├── securityMonitor.js # Security monitoring
│ └── cronJobs.js # Scheduled tasks
│
├── server.js # Main server entry point
├── package.json # Node.js dependencies
├── .env.example # Environment variables template
├── .gitignore # Git ignore rules
├── README.md # Project documentation
├── BACKEND.md # Backend documentation
├── DATABASE.md # Database documentation
├── TODO.md # Development tasks
├── CONTRIBUTING.md # Contribution guidelines
├── Code_of_conduct.md # Code of conduct
└── LICENSE # MIT License
Follow these simple steps to set up and view the project on your local machine 👇
git clone https://github.com/Renu-code123/ExpenseFlow-expensetracker.gitcd ExpenseFlow-expensetrackerSimply open the expenseTracker.html file in your browser.
Or run a live development server using:
npx live-server
Smart Money Management – Take control of your finances with our intuitive expense tracker.
- 🔗 Add backend for real-time data persistence (Firebase or Node.js)
- 📊 Integrate charting tools like Chart.js for expense visualization
- 🧾 Introduce login/authentication system
- 💡 Add category filters for detailed analysis
- 📱 Improve PWA support for full offline functionality
By building this project, you’ll learn:
- 🎨 Responsive UI design using CSS
- 🧠 DOM manipulation using vanilla JavaScript
- 📂 Managing and displaying dynamic user data
- ⚙️ Working with manifests and service workers
- 🏗️ Structuring a scalable frontend project
Contributions are always welcome! If you’d like to improve ExpenseFlow, follow these steps 👇
-
Fork the repository
-
Create a new branch
git checkout -b feature-name
-
Commit your changes
git commit -m "Added a new feature" -
Push to your branch
git push origin feature-name
-
Open a Pull Request
This project is licensed under the MIT License – see the LICENSE file for details.
Renu Kumari Prajapati 🎓 Information Technology Student | 💻 Frontend Developer | 🌍 Open Source Enthusiast
📫 Connect with me:
- GitHub: @Renu-code123
“Smart money management begins with awareness — track it, plan it, and grow it with ExpenseFlow.”
If you found this project useful, don’t forget to ⭐ Star the repository! Let’s build smarter tools for financial awareness together 💜