Project Story: SmartSaver - Your AI-powered Money Tracker

About the Project

The inspiration for this project came from my own struggles with managing my finances. After returning to Australia from a long holiday, I found myself overspending on various items without being able to properly track my expenses. My account balance quickly started to drop, and I was left feeling frustrated because I couldn’t keep track of where my money was going. The bank did provide a transaction summary with each category, but it required me to enter my password every time, which was inconvenient. Plus, opening the app every time I needed to check just added to the frustration.

I realized I needed a more efficient and smart way to manage my finances. That's when the idea for SmartSaver came to life. I wanted to create an app that not only helps me track my spending but also provides daily notifications about my spending habits, income, and savings. The coolest part of the app is the AI integration – allowing users to ask the app whether they should spend a certain amount of money, based on their current financial situation. It calculates savings based on income and helps adjust the app’s settings to fit specific financial goals.

The Tech Stack

My teammates and I have experience with Node.js, Express, and React, and while the MERN stack is a common choice for full-stack applications, we decided to go with MySQL instead of MongoDB. Although this choice might seem unusual, especially since most people lean toward the MERN stack, we were comfortable using MySQL since we had already learned it together in university. We found that it worked perfectly for our project needs, and we enjoyed using it!

What We Learned

This project was a huge learning experience for all of us. It’s our first real project that includes front-end, back-end, and a database, and we were able to see how everything connects together. In previous projects, we worked on separate parts without understanding how everything integrates behind the scenes. This time, we saw firsthand how the front-end interacts with the back-end and how the database plays a crucial role in everything. It was an eye-opening experience that helped me understand the complete flow of building a full-stack project.

Challenges Faced

While designing the app, we put a lot of effort into the UI and created a detailed design in Figma. It looked fantastic there – clean, sleek, and polished. But when we began translating the design into React, we quickly realized that none of us had enough experience with React to bring the design to life in the way we envisioned. We had to scale back on some features and simplify the design. However, we managed to keep it clean and functional, and the app still looks great with the simplified version.

Another challenge was integrating the AI features, which required us to think creatively about how to make the app interact with the user and provide relevant financial recommendations. Despite these hurdles, we pushed through and ended up with a product we're proud of.

Conclusion

SmartSaver has been an exciting and rewarding project to work on. It allowed us to tackle real-world problems while learning and applying new technologies. Though there were many challenges along the way, we grew as developers and learned how to overcome obstacles. I’m excited to continue improving the app and adding new features that will help users manage their finances in smarter ways.

Share this project:

Updates