Track My Funds

Track My Funds is a full stack personal finance application that uses Next.js, TypeScript, MongoDB, Tailwind CSS, and Next-Auth. It offers a sleek interface and valuable insights to empower users in managing their finances effectively.

I. Getting started

Prerequisites

In addition to an IDE you must have the following:

Installation

How to install and run the application.

Clone the repository from GitHub.

git clone https://github.com/LadyBluenotes/track-my-funds

Install Node packages

npm install

Copy the .env.example file and input the environment variables.
Run the application

npm run dev

II. About

Built with

My choices for the foundational technologies of this application were guided by my familiarity and their inherent robustness. The trio of Next.js, MongoDB, and the open-source Next-Auth solution for authentication were the building blocks.

Next.js was my preferred choice due to its built-in API capabilities. This feature eliminated the necessity for additional frameworks or libraries I had previously used, such as Express, thus simplifying the development process.

MongoDB was selected as the storage solution due to its scalability and efficiency. It assisted with an easy setup, storage, and retrieval of data in a format that integrates well with the JavaScript ecosystem - and was familiar to me.

Next-Auth, an open-source authentication solution, was new to me for this project. I wanted to use something that was recommended by a tech I used, as well as one that supported the other technologies I was going to use. I integrated it into the application to manage user sessions securely and, with Next.js and MongoDB, it was able to support my goal for this project.

To enhance the user interface, I brought in TailwindCSS. It helped in creating a visually appealing and intuitive interface with a focus on user-friendliness. This allowed me to take the focus off writing the CSS myself so I could focus more on the function of this application.

In addition to the technological choices, the project also emphasized the importance of Clean Code principles. By adopting KISS (Keep It Simple, Stupid), DRY (Don't Repeat Yourself), and prioritizing readability over conciseness, I ensured that the codebase was maintainable and expandable. Components were crafted for easy modifications, variables and functions were appropriately named, and redundancy was minimized, contributing to a rewarding development experience.

This project served as a valuable platform to explore the interplay of various technologies in a full-stack context, each chosen for their specific strengths and compatibility with my vision. It further helped me solidify the importance of how technologies interplay with one another.

III. Motivation

The creation of this project was rooted in my personal need for an effective, user-centric expense tracking application. My experiences with various financial tracking platforms left me craving a new one as they didn't cater to my specific needs. This led me to harness my abilities in APIs and Next.js to create a solution that was tailor-made for my requirements.

With a history of separately developing APIs and front-end applications, I recognized the opportunity to merge these domains into a comprehensive full-stack application. My regular usage of spreadsheets for expense tracking provided the vision for this project: an application that not only replaces spreadsheets but enhances the experience through features like user authentication and a dashboard for data visualization. Beyond meeting my personal needs, my goal extended to provide this tool to others who might find it useful.

IV. Key takeaways

Discoveries and reflections

As with most of my projects, there were many commonalities because I tend to follow a steady approach, introducing only a few technologies at a time. Despite the similarities, this project was a significant learning curve, helping me to deepen my understanding of several aspects of full-stack development, including:

Abstraction: This project showed me the importance of reusable code. By abstracting away intricate details and complexity, I created a more streamlined codebase that was not only visually cleaner but also easier to manipulate. The uniformity showed across the UI and the data display ensured a consistent user experience. Moreover, the time efficiency gained when needing to implement changes was invaluable. Instead of changing numerous sections of the code, modifications were made in one location, thereby improving the maintainability of the project.
Simplicity: This project was a practical exercise in appreciating simplicity. While the allure of new frameworks and libraries was tempting, the focus remained on achieving the desired functionalities with minimal effort, code, and third-party dependencies. The more elements introduced into the codebase, the higher the probability of errors and complexities during debugging. This project underscored the value of simplicity, reinforcing the principle that less is indeed more.
Testing: Though this project did not incorporate a dedicated testing framework, it emphasized the importance of writing robust and defensive code. Through careful TypeScript coding practices, I was able to preempt potential errors and ensure the reliability of the application, enhancing its resilience against unexpected behaviors.

Technical growth

Understanding Full-Stack Development

This project provided a deep dive into the interplay of front-end and back-end technologies with a full-stack context. By integrating Next.js and MongoDB, and managing user authentication with Next-Auth, I better understood how these technologies work together.

Next.js and Built-in API Capabilities

The use of Next.js's built-in API capabilities was a key highlight. This eliminated the need for additional frameworks and provided a simpler, more streamlined approach to handling API calls. This experience highlighted the power of Next.js as a comprehensive framework that can cater to both front-end and back-end requirements.

User Authentication with Next-Auth

Implementing user authentication using Next-Auth proved to be the most challenging aspect of this project. The integration process with Next.js and MongoDB was a complex endeavor, involving several intricate details. One particular challenge was ensuring the correct permissions and protections were in place for different pages, preventing unauthorized navigation and access. Furthermore, guaranteeing the accurate storage and retrieval of user-specific information to and from their accounts presented its own set of obstacles. Despite the hurdles, this process provided me with invaluable insights into the intricacies of secure user session management in web applications, an experience I am profoundly grateful for.

Data Display and Manipulation

The handling, manipulation, and visual representation of data was a critical part of this project. A key objective was to provide an overview of the users' financial status, displaying their total expenses. Additionally, users needed the ability to easily modify this information as their financial circumstances changed or errors could be present. One of the challenges was ensuring data consistency and accuracy throughout these manipulations. Enhancing the flexibility of data editing, while maintaining a user-friendly interface, was also an important learning aspect. Beyond merely displaying figures, the goal was to make the data meaningful and understandable, thereby providing a clear picture of financial standing.

TypeScript for Error Prevention

By using TypeScript, this project highlighted the importance of type safety in JavaScript applications. Writing TypeScript code in a way that catches potential errors during the compilation stage reduces runtime errors and improves code quality.

Clean Code Principles

Using Clean Code principles provided a practical perspective on how these principles enhance code quality, readability, and maintainability. It was a clear demonstration of how these principles could shape and guide coding practices in a positive manner.

V. Acknowledgements

As with many development projects, the documentation for the technologies used proved to be indispensable. The resources, both official and community-contributed, provided the necessary insights and guidance to navigate through complex parts of the project.

Although there were instances when I tapped into my network for assistance, the majority of the project leaned on the wealth of information available in documentation. This experience further emphasized the importance of well-documented technologies in facilitating self-reliance and problem-solving during the development process.

This project reaffirmed the significance of the developer community and the shared knowledge it offers. It was a powerful reminder that no developer is ever truly alone in their endeavors, thanks to the abundance of resources and collective wisdom available.

VI. Additional Information

My ambitions for this application extend beyond its current state, with plans to introduce additional features and improvements aimed at refining the user experience and expanding its capabilities. It serves as a reminder that in the realm of software development, there's always room for growth and evolution.

Known Issues

Can be found here (opens in a new tab).

Feature Improvements

Sorting transactions based on selected filters.
Graphs to show income and expense trends, averages, etc.
Track savings - savings goals, savings progress, etc.
Export data to CSV.

Welcome to Space Budget Buddy API