Budgetless

Breaking down the “how” and “why” of budgeting to educate teens through their real world experiences.

Comment

Inspiration

Our inspiration roots from personal experiences surrounding budgeting. As young adults, we did not have much knowledge on how to manage our finances optimally. There are multiple budgeting apps in the market but none of them cater towards inexperienced people. Therefore, to budget with ease, we developed a webapp on the basis of simple, educational and intuitive design.

What it does

  1. Monthly budget planning
  2. Set a total monthly budget.
  3. Allocate the budget across categories (Rent, Utilities, Groceries, Entertainment, Transport, Other).
  4. See how much you have allocated vs your total monthly budget.
  5. Save a monthly snapshot for use in the dashboard time series.
  6. Add daily transactions with date, category, amount, and an optional description.
  7. See how much is spent and left for each category within the month.
  8. View a list of recent transactions.
  9. Create reminders for: upcoming bills (e.g., rent, utilities), budget warnings or general notes, and reminders are stored in-app (no real notifications, demo only)
  10. Dashboard: -> budget distribution (Pie chart) – shows how your monthly budget is allocated across categories, -> monthly performance (Line chart) – shows budget vs actual spending per month: - Months over budget are highlighted in red. - Months under budget are highlighted in green.
  11. Settings: edit basic profile info (name, email, currency), toggle dark mode / light mode, accessibility notes (high contrast, clear labels, keyboard focus) and log out button.

How we built it

Tech Stack Frontend: React (Vite) Charts: react-chartjs-2 + Chart.js Styling: Inline styles + base CSS State management: React hooks (useState, useMemo, context for theme)

Challenges we ran into

The data analysis section, understanding the users' reviews, their pain points and then pivoting our main focus to a younger audience was instrumental, however, took us longer than anticipated.

The UI design is an important part of this project, but due to a shift in targeted audience and the time limitations on web development we could not really explore our true capacities.

The web development took longer than anticipated due to limitations on the tech stack and the lead dev's VSCode setup.

Accomplishments that we're proud of

  1. We were able to deliver code and compete the figma designs.
  2. The teamwork!!!!

What we learned

  1. What goes into project management?
  2. Working with people in different specialties.

What's next for Budgetless

  1. Resource Page: hosts simple breakdowns of financial terms, explanation of different budgeting strategies, and relating purchase totals to everyday items such as “You spent x burgers this month”.
  2. User Return Incentive: additional color themes, variable sizing and accessible fonts (such as Lexend), adding screen reader functionality, and track spending within the budget,
  3. Subscription tracking: keeping track of different reward points.

Built With

Share this project:

Updates