Skip to content

FinnaOrganize: Finance Tracker Web App using HTML, Bootstrap, JavaScript, Flask, and SQLite3.

License

Notifications You must be signed in to change notification settings

ChocoCodes/finna-organize

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

56 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

MasterHead

FinnaOrganize: Finance Tracker Web App

A final project for the online course Harvard CS50x 2023 - 2024.

Video Demo: [URL HERE]

Introduction

FinnaOrganize: Finance Tracking System is a web application designed to help users manage their personal finances by tracking income, expenses, and savings, while also setting and monitoring financial goals. Built with Flask for the backend and HTML, CSS, and JavaScript for the frontend, it provides a seamless and user-friendly interface. The system employs CRUD operations, allowing users to create, view, update, and delete financial records and goals, giving them full control over their data. An Entity-Relationship Diagram (ERD) is used to structure the database efficiently, ensuring data integrity and optimal performance. With real-time updates and secure data management, this application offers users the tools needed for effective financial monitoring.

Table of Contents

Technology Stack

Client-Side

html5 bootstrap javascript

Server-Side

html5

Database

html5

Using HTML, CSS, JavaScript, Flask, and SQLite3 as a beginner tech stack is an excellent choice for this project, as is it already taught within the course. HTML provides the foundational structure of web pages, while CSS enhances their visual appeal and layout. JavaScript adds interactivity and dynamic content, making websites more engaging. Flask, a lightweight Python web framework, simplifies backend development, enabling beginners to build and manage web applications efficiently. SQLite3, a lightweight database, allows easy data storage and retrieval without the complexity of setting up a full-fledged database system. Together, these technologies create a cohesive and accessible environment for learning web development fundamentals.


Entity Relationship Diagram

FinnaOrganize Database

An entity-relationship diagram was established to fully visualize and synthesize the database of the system. An ERD is important in a finance tracking system because it helps to identify the key entities involved, such as users, transactions, budgets, and goals, along with their relationships and attributes. By mapping out these elements, an ERD facilitates better understanding and organization of the data structure, ensuring that all necessary information is captured accurately. It also aids in optimizing database design, improving data integrity, and streamlining the development process, ultimately leading to a more efficient and user-friendly application.

The finances table stores each user's financial information. It includes their savings, spendings, and allowance. Each record in this table is linked to a specific user using the userID foreign key. This ensures that financial data is associated with the correct user.

The users table stores information about users. It includes their username, hashed password, and salt for password security. The hashed password is stored securely to prevent unauthorized access. The salt adds an extra layer of security by making it more difficult to crack the password even if the hash is compromised.

The transactions table stores details about financial transactions. It includes the transaction type, date, and amount. This table allows users to track their income and expenses over time. The userID foreign key links each transaction to a specific user, ensuring that transactions are associated with the correct user.

The goal_info table stores information about financial goals. It includes the goal name, description, total amount required, and current deposit. This table helps users set and track their financial goals. The goalID foreign key is used to link goal counts to specific goals, allowing users to track their progress towards each goal.

Finally, the goal_counts table tracks the progress of users towards their goals. It stores the number of times each goal has been achieved. This table allows users to see how close they are to reaching their goals and to stay motivated. The goalID and userID foreign keys link goal counts to specific goals and users, ensuring that progress is tracked accurately.

System Features

login page

The system utilizes CRUD (Create, Read, Update, Delete) operations to provide users with a comprehensive and interactive financial management experience. Each feature of the system is designed to allow users to easily manage their financial information and goals effectively. For instance, users can create new transactions and financial goals, read their current financial summary and transaction history, update existing information, such as account settings or goals, and delete transactions or accounts when necessary, ensuring that users have full control over their financial data and personal information. This CRUD functionality is essential for fostering user engagement and facilitating efficient financial planning and management.

Dashboard Page

dashboard mockup

Financial Summary: The financial summary provides users with a snapshot of their overall financial health at a glance. It aggregates key metrics such as total savings, total spendings, and total allowances, allowing users to quickly assess where they stand financially. This feature serves as a foundation for users to make informed decisions about their budgeting and financial planning.

Transaction History: The transaction history feature maintains a detailed log of all past transactions categorized by type, such as savings, spendings, and allowances. Users can filter and sort this data to easily find specific entries or analyze trends over time. This historical perspective is crucial for users to understand their spending habits and to identify areas where they may need to adjust their financial behavior.

Transaction Submission Form: The transaction submission form simplifies the process of recording new financial activities by allowing users to input details such as the amount and category of the transaction. This user-friendly interface is designed to minimize friction, encouraging users to update their financial records regularly. With a straightforward submission process, users can maintain an accurate and up-to-date representation of their finances.

Real-Time Updates: Real-time updates ensure that any new transactions submitted by the user are immediately reflected in the financial summary and transaction history. This dynamic feature eliminates the need for manual refreshing or waiting periods, enhancing the user experience by providing instant feedback on financial changes. Users can rely on this immediacy to stay informed about their current financial situation.

Profile Page

profile page mockup

Account Information Management - Edit Password or Delete Account: The account information section allows users to manage their credentials by providing options to edit their password or delete their account entirely. This functionality is crucial for maintaining user security and privacy, enabling users to update their passwords if they suspect unauthorized access or simply wish to enhance their account security. Additionally, the option to delete an account offers users control over their data, allowing them to permanently remove their information from the system if they choose to discontinue using the service.

Goal Management - Add, Edit, Delete, or Update goals through dropdown: The goal management feature provides users with an intuitive interface to add, edit, delete, or update their financial goals using a convenient dropdown menu. This functionality enables users to set clear, achievable objectives for their savings and spending, which can motivate them to reach their financial targets more effectively. By allowing users to manage their goals dynamically, the system supports a personalized approach to financial planning, making it easier for individuals to track their progress and make adjustments as necessary.

System Limitations

  • Unresponsive Design for Custom Components: The current system suffers from an unresponsive design, particularly in its custom components, which can lead to a suboptimal user experience on various devices. When users access the dashboard on mobile or tablet devices, the layout may not adjust appropriately, resulting in components that are difficult to navigate or read. This limitation restricts users' ability to interact with the dashboard seamlessly across different screen sizes, potentially diminishing user engagement and satisfaction.
  • Tracking Provides Only Summary Statistics: The tracking feature of the application is limited to providing summary statistics for savings, spendings, and allowances without offering detailed insights or breakdowns. While summary statistics can give users a high-level view of their financial situation, they lack the granularity needed for in-depth analysis of spending habits or savings trends. This limitation may prevent users from fully understanding their financial behaviors, making it challenging to identify specific areas for improvement or informed decision-making.
  • Information Displayed in Tabular Form: The dashboard displays information primarily in tabular format, which can lead to a less engaging and intuitive user experience. While tables can effectively present data, they often lack the visual appeal and interactivity that users expect from modern applications. The absence of custom interfaces, such as graphs, charts, or visual indicators, means that users may find it harder to interpret and interact with their financial data, potentially leading to disengagement or difficulty in recognizing key insights.

How to Use

  1. Create an Account: If you are a new user, visit the registration page to create an account. Once your account is successfully created, you will be redirected to the main dashboard page, where you can start managing your finances.
  2. Start Tracking Allowances: Initially, your dashboard will be empty. To begin tracking your finances, add an allowance to your account. All financial information is dynamically refreshed, so there's no need to manually refresh the page. Additionally, all transactions will be logged in the transactions table for your reference.
  3. Managing Your Account Information: Navigate to the profile page to manage your account settings. Here, you can edit your password by entering your current password followed by your new password. If you wish to delete your account, simply select the delete account option, and confirm your choice; please note that this action is irreversible and will result in the loss of all your data associated with the account.
  4. Managing Your Financial Goals: Access the goal management feature to add, edit, delete, or update your financial goals using the dropdown menu. This intuitive interface allows you to set and modify clear objectives for your savings and spending. By dynamically managing your goals, you can easily track your progress and make necessary adjustments to stay on target.
  5. Logging Out:The Log Out button is accessible via the uppermost right side of the page. Just click on it and it will redirect you to the login screen.

License

See License for more information.

Contact

If you encounter any bugs or have suggestions for improvements, please feel free to contact me via:

Email:

[email protected]

About

FinnaOrganize: Finance Tracker Web App using HTML, Bootstrap, JavaScript, Flask, and SQLite3.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published