ExpenseFlow is a modern, responsive expense tracking web application designed to help users manage their finances efficiently.
With a clean, elegant dark-themed UI and smart features like analytics, goals, and an AI-powered chatbot, ExpenseFlow makes money management simple and intuitive.
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
- 🛡️ Setup & Security
- ⚙️ Getting Started
- 🐛 Report a Bug
- ✨ Request a Feature
- 📊 Smart Dashboard – Displays total balance, income, expenses, and recent activity
- 💰 Expense & Income Management – Add, edit, or delete transactions easily
- 🎯 Goal Tracking – Set financial goals and monitor progress visually
- 📈 Analytics View – Understand spending patterns through insights
- 🤖 Finance Chatbot – Get instant help, tips, and app guidance
- 🌙 Dark Mode UI – Sleek, eye-friendly dark-themed interface
- ⚙️ Responsive Design – Works seamlessly on desktop and mobile
- 🔐 PWA Ready – Offline access using service workers and manifest
- 📊 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 frontend-focused expense tracker built using HTML, CSS, and JavaScript.
It is ideal for beginners and intermediate developers who want hands-on experience building real-world, data-driven web applications.
The project emphasizes:
- User-centric UI/UX design
- Financial data visualization
- Clean and scalable project structure
- Easy future backend integration
ExpenseFlow includes an interactive chatbot to enhance user experience and accessibility.
- 🧭 Guide users on how to use the app
- 💬 Answer common finance-related questions
- 📊 Explain dashboard data and features
- 🎯 Help users understand goal tracking
- ❓ Provide instant assistance without leaving the page
The chatbot improves usability by acting as a virtual finance assistant, making ExpenseFlow more beginner-friendly and engaging. 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 | GitHub Pages |
| PWA Support | manifest.json, service worker |
| Deployment | Vercel (Frontend), Railway/Heroku (Backend) |
| PWA Support | manifest.json, sw.js |
ExpenseFlow/
│
├── public/ # Frontend static files
│ ├── index.html # Main HTML layout (Homepage)
│ ├── 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
│ ├── Expense.js
│ ├── Budget.js
│ ├── Goal.js
│ ├── Receipt.js
│ ├── Notification.js
│ ├── CurrencyRate.js
│ ├── SyncQueue.js
│ ├── CategoryPattern.js
│ ├── AnalyticsCache.js
│ ├── MerchantDatabase.js
│ └── RecurringExpense.js
│
├── routes/ # API route handlers
│ ├── auth.js
│ ├── expenses.js
│ ├── budgets.js
│ ├── goals.js
│ ├── receipts.js
│ ├── notifications.js
│ ├── analytics.js
│ ├── currency.js
│ ├── export.js
│ ├── groups.js
│ ├── splits.js
│ ├── recurring.js
│ └── sync.js
│
├── middleware/ # Express middleware
│ ├── auth.js
│ ├── rateLimit.js
│ ├── rateLimiter.js
│ ├── sanitization.js
│ ├── socketAuth.js
│ ├── uploadMiddleware.js
│ ├── analyticsValidator.js
│ ├── categorizationValidator.js
│ ├── recurringValidator.js
│ └── securityMonitor.js
│
├── services/ # Business logic services
│ ├── analyticsService.js
│ ├── budgetService.js
│ ├── categorizationService.js
│ ├── currencyService.js
│ ├── emailService.js
│ ├── exportService.js
│ ├── fileUploadService.js
│ ├── notificationService.js
│ ├── recurringService.js
│ ├── securityMonitor.js
│ └── cronJobs.js
│
├── 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
├── CONTRIBUTING.md # Contribution guidelines
├── CODE_OF_CONDUCT.md # Code of conduct
└── LICENSE # MIT LicenseFollow these simple steps to set up and view the project on your local machine 👇
git clone https://github.com/Renu-code123/ExpenseFlow-expensetracker.git
cd ExpenseFlow-expensetracker
Simply open the expenseTracker.html file in your browser.
Or run a live development server using:
npx live-server
Or using Docker prerequisites (Docker Desktop)
To build the Image:
docker build -t expenseflow .
To Run the Container:
docker compose up -d
Stop the container
docker compose stop
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
💖 Thanks to all the amazing contributors who are helping build and improve ExpenseFlow!
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
| Name | Role |
|---|---|
| Renu Kumari Prajapati | Project Admin |
| Harshit Singh | Mentor |
“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 💜