BizBalance

• 

  Logo

About the Project

Inspiration

Small businesses often struggle to keep track of their expenses and sales in a clear, organized way. Many existing tools are either too complex or too generic, making it hard for business owners to quickly understand where their money is going. I wanted to create a simple yet professional expense tracker that helps businesses visualize their financial data and make smarter decisions.

What I Learned

During this project, I deepened my understanding of front-end development with React and state management. I also gained experience integrating charting libraries like Chart.js to create dynamic, interactive visualizations. Handling user authentication with localStorage taught me about simple client-side persistence and user experience design. Additionally, I practiced designing a clean, professional UI with a consistent color palette to improve usability.

How I Built It

I built the app using React for the UI and React Router for navigation between pages. User data and expenses are stored in the browser's localStorage to keep things simple and fast without a backend. The app has three main pages: a login/signup page, an expense tracker page where users can add and view entries, and an analytics page that displays a bar chart summarizing expenses by category. The color palette was chosen to convey professionalism and clarity, using navy blue, teal, and light gray.

Challenges Faced

One challenge was managing state and data persistence without a backend, which I solved by carefully using localStorage keyed by username. Another was designing an intuitive flow for users to add entries and view analytics seamlessly. Integrating Chart.js and customizing the chart styles to match the app’s theme took some trial and error. Lastly, balancing feature completeness with the tight 4-hour hackathon deadline required prioritizing core functionality and a clean UI.

Built With

• React – Front-end UI library
• React Router – Client-side routing
• Chart.js – Data visualization library for bar charts
• JavaScript (ES6+) – Programming language
• HTML5 & CSS3 – Markup and styling
• LocalStorage – Browser storage for user data persistence

Built With

• css3
• html5
• javascript
• localstorage
• react