Expense_Tracker System Requirements Document

Introduction

The Expense_Tracker project aims to develop a modern web application that enables users to efficiently manage their financial transactions. The application will be built using React, Vite, Tailwind CSS, Flask, and PostgreSQL, providing a robust and scalable solution for tracking income and expenses.

System Overview

Expense_Tracker is designed to offer users a seamless experience in managing their financial transactions. The application will allow users to add, edit, and delete transactions, view a comprehensive dashboard with financial summaries, and utilize search and filter functionalities. The system will support both dark and light modes, ensuring a user-friendly interface across devices.

Functional Requirements as Story Points

• As a User, I should be able to add income and expense transactions with fields for amount, category, date, and description.
• As a User, I should be able to edit existing transactions.
• As a User, I should be able to delete transactions.
• As a User, I should be able to view my total balance, total income, and total expenses on a dashboard.
• As a User, I should be able to view recent transactions on the dashboard.
• As a User, I should be able to search transactions by category and date.
• As a User, I should be able to filter transactions by category and date.
• As a User, I should be able to switch between dark and light modes for the UI.
• As a User, I should be able to register and log in to the application.
• As a User, I should receive form validation feedback to ensure data accuracy.
• As a User, I should receive error messages when an operation fails.
• As a Developer, I should be able to implement REST APIs for transaction management.
• As a Developer, I should ensure the application is production-ready with a clean code structure and proper folder organization.

User Personas

• Regular User: Individuals who want to track their personal finances by managing income and expenses.
• Admin: Responsible for maintaining the application, ensuring data integrity, and managing user accounts.

Core User Flows

• User logs in -> adds a new transaction -> views updated dashboard with new transaction.
• User searches for transactions by category -> filters results by date -> views filtered transactions.
• User switches to dark mode -> continues using the application with the new theme.

Visuals Colors and Theme

• primary: #1E3A8A (Deep Blue)
• primary_light: #3B82F6 (Light Blue)
• secondary: #F59E0B (Amber)
• accent: #EF4444 (Red)
• highlight: #FBBF24 (Gold)
• bg: #F3F4F6 (Light Gray)
• surface: rgba(255, 255, 255, 0.8) (White)
• text: #111827 (Dark Gray)
• text_muted: #6B7280 (Muted Gray)
• border: rgba(209, 213, 219, 0.2) (Light Gray)

Signature Design Concept

Interactive Financial Journey

The homepage will feature an interactive financial journey map where users can visualize their financial progress. As users add transactions, a dynamic line graph will animate, showing the flow of income and expenses over time. Hovering over points on the graph will reveal transaction details, and users can drag the timeline to explore past and future financial states. This concept will be implemented using motion/react for smooth animations and interactions.

Landing Hero Motion Brief

The hero section will depict a user's financial journey, starting with a simple input of a transaction. As the transaction is added, the graph line dynamically updates, showing the impact on the user's financial status. The animation will loop every 10 seconds, with interactive elements allowing users to explore their financial data. The reduced-motion state will maintain the graph's static view with clear data points.

Interaction Model & Motion Direction

• Interaction Model: Animated
• The landing page will feature animated transitions and hover effects, with spring physics applied to interactive elements for a polished user experience.

Non-Functional Requirements

• The application must be responsive and accessible on various devices and screen sizes.
• The system should ensure data security and user privacy.
• The application should handle concurrent user sessions efficiently.

Tech Stack

• Frontend: React, Vite, Tailwind CSS
• Backend: Flask
• Database: PostgreSQL

Assumptions and Constraints

• The application will be deployed in a production environment with secure access controls.
• The system will support English language and INR currency by default.

Glossary

• Transaction: A record of income or expense with details such as amount, category, date, and description.
• Dashboard: A visual representation of financial summaries and recent transactions.
• REST API: A set of web services that allow interaction with the backend for transaction management.

This document outlines the comprehensive requirements for the Expense_Tracker project, ensuring a clear understanding of the system's capabilities and design direction.