kaitvan/pocket-minder

Pocket Minder

About the Project

Nearly every month, I create a budget with detailed amounts for each category. At the beginning of the month, I have every intention of sticking to that budget, but I usually end up spending the nearly all of it by week 3 and then I spend the last week waiting for the month to be over, so that I can enjoy my life again! This is why I wanted to build Pocket Minder. I wanted to create a budgeting app that would help me break out of this negative pattern and encourage saving over spending.

Instead of thinking about how much money you have for a category over the entire month, Pocket Minder is designed to break down your monthly spending goals into daily targets that keep you on track throughout the month. You'll even earn awards for sticking to your budget and no-spending streaks!

Note: This project is currently in development! Not all features have been completed yet. Check out the live site now to see my progress.

Technologies

This project was built with functional components in React along with TypeScript for better type safety. I used a Firebase relational database to store user data and implement OAuth.

Figma

I began building this application by first outlining my vision for the project in Figma. This Figma link shows the original vision for the project and although most things remained the same, you'll notice some small changes in development. By outlining all pages and the general layout first, I had a clear blueprint to work from when building out features.

Planned Features

• User authentication
• CRUD functionality for budget categories
• CRUD functionality for individual expenses
• Progress page includes overall trends and awards
• Filter feature on expense log
• Search feature on expense log
• Calendar with color-coded key

Lessons Learned

Here, I'll be keeping a record of issues I ran into while developing this project and how I resolved them.