CapitalOne Balance

Inspiration

This project was inspired by the idea of helping users manage their personal finances in a clear and intuitive way. Many people struggle to understand how they spend their money or how small expenses add up over time. The goal of Capital One Balance was to create a web platform that visualizes income, expenses, and savings habits through an elegant and minimalist interface making financial education accessible and actionable.

What it does

It allows users to register, log in, and manage all their income and expenses in one place. The app displays real-time balance updates, spending analytics by category, and provides a clean overview of financial health through minimalist dashboards. Our goal is to make budgeting intuitive empowering people to build savings and financial awareness through simplicity, not complexity.

How we built it

Frontend: React + Vite with a minimalist white-and-blue UI inspired by Capital One’s branding. Components such as Login, Register, Home, and AddExpense handle user flow and transactions smoothly.
Backend: Node.js with Express manages API routes, authentication, and secure data handling using JWT.
Database: MongoDB Atlas stores user information, income/expense records, and transaction categories.
Styling: Custom CSS and responsive layout to make the app feel mobile-friendly.
Tools: GitHub for version control, Postman for API testing, and Figma for UI prototyping.

Challenges we ran into

Ensuring smooth communication between the frontend and backend, especially with asynchronous requests.
Managing user state updates so new transactions instantly refresh without reloading the page.
Fixing Git authentication and merge conflicts when collaborating.
Designing an interface that feels modern and clean while maintaining accessibility and readability.

Accomplishments that we're proud of

Building a fully functional money management system in just a few days.
Designing a UI that looks and behaves like a mobile financial app, despite being web-based.
Implementing secure user authentication and real-time expense tracking.
Creating a foundation for data-driven insights and future AI-based financial coaching.

What we learned

We learned how to integrate a full-stack environment using React, Node.js, and MongoDB, while applying clean UI/UX principles. We deepened our understanding of REST APIs, database modeling, and asynchronous state management in React. Additionally, we gained valuable experience in team collaboration with Git, solving authentication errors, and using consistent commit practices. From a design perspective, we realized how much impact a minimalist layout and color palette can have on user trust and clarity.