Expense Tracker

Finance Tracker Web Application developed with Tailwind and Python (flask), user can register and login into their dashboard and track their finances, view reports on the chart and date..

Project Report: Finance Tracker Web Application

Technologies Used:

• Python Flask: Served as the server-side web framework, handling routing, requests, and responses, integrating with the backend database, and rendering the server-side templates.
• HTML: Used to structure the web application content, creating forms for user inputs, lists for displaying expenses, and other structured content.
• CSS: Tailwind CSS, a utility-first CSS framework, was utilized to style the application, ensuring responsive design and an appealing user interface.
• JavaScript: Employed for client-side logic, such as dynamically updating the content of the web page without the need for a full page refresh, form validation, and interaction with the Chart.js library.
• Chart.js: Integrated for visualizing expense data through interactive charts, enhancing the user experience by displaying trends and patterns.
• MySQL: The chosen database system to persist user data, expense records, and other necessary data, interacted with via SQLAlchemy as the ORM.
• Jinja: Templating engine used in conjunction with Flask to dynamically generate HTML pages with server-side data.

Features Implemented:

• User Authentication: Registration and login functionality with secure password handling and session management.
• Profile Management: Users can manage their profile information after registration.
• Expense Tracking: Functionality for users to add, categorize, and delete their expenses.
• Budget Setting: Users can set monthly budgets for various categories.
• Data Visualization: Using Chart.js to provide visual feedback on expenses and budget utilization.
• Responsive Design: The application is optimized for various screen sizes and devices.

Challenges Encountered:

• Data Serialization: We faced issues with JSON serialization, particularly the "TypeError: Object of type Expense is not JSON serializable" when trying to pass SQLAlchemy objects to JavaScript through Jinja.
• JavaScript Integration: Ensuring that Chart.js integrates smoothly with dynamic data from Flask and updates charts without reloading the page.
• Responsive Design: Maintaining a responsive design across different devices, which required careful consideration of CSS and media queries.
• User Feedback: Implementing an intuitive way to provide user feedback, such as success or error messages, without disrupting the user experience.

Potential Improvements for the Future:

• Advanced Reporting: Implement more sophisticated reporting features that allow users to filter and sort expenses, compare budget goals to actual spending over time, and export reports.
• Machine Learning: Introduce predictive analytics to help users anticipate future spending and budget needs based on historical data.
• User Customization: Allow users to customize the dashboard view, including the layout and the type of charts displayed.
• Enhanced Security: Implement two-factor authentication and improve session management for increased security.
• Mobile App: Develop a dedicated mobile app to improve accessibility and user engagement.
• Internationalization: Localize the application for different languages and currencies to cater to a global audience.
• Cloud Integration: Move the application to a cloud platform to improve scalability and reliability.

Conclusion: The finance tracker web application stands as a testament to modern web development practices, utilizing a full stack of technologies to deliver a robust user experience. While challenges were encountered along the way, each was overcome through meticulous debugging and iterative improvements. As the application continues to evolve, the focus will remain on enhancing user features, improving security measures, and ensuring scalability to meet the growing needs of its user base.