July 11, 2025

Overview

Finance Visualizer is a responsive web application built with the Next.js App Router and Tailwind CSS. It empowers users to securely track, categorize, and analyze their personal finances through a clean, user-friendly interface. The goal was to develop an intuitive tool for budget management, visualizing spending trends, and improving financial awareness with powerful data visualization features. The app features protected user authentication via Firebase, a MongoDB backend for storing transaction data, and interactive charts powered by Recharts for meaningful financial insights.

Key Features

• Firebase Authentication: Secure sign-up/sign-in and protected routes with user-specific data.
• Transaction Management: Add, edit, and delete transactions including amount, date, and description.
• Category Tagging: Organize expenses using predefined categories for better clarity.
• Visual Dashboards:
  • Bar Chart of monthly expenses.
  • Pie Chart breakdown of spending by category.
• Budget Tracking: Set and compare monthly category budgets against actual spending.
• Summary Cards:
  • Total monthly expenses
  • Budget vs Actual comparison
  • Recent transaction highlights
• Responsive UI: Clean layout built with TailwindCSS and shadcn/ui, optimized for all screen sizes.

Technologies Used

• Next.js (App Router): For routing, layout composition, and server-side rendering.
• React: To build interactive and stateful components.
• Tailwind CSS & shadcn/ui: For a responsive, consistent design system.
• Firebase Authentication: For secure user authentication and protected access.
• MongoDB: As the backend database to store and query transaction data.
• Recharts: For rendering bar and pie charts to visualize user spending patterns.

Challenges and Learnings

Handling dynamic user-specific data securely across protected routes required careful use of Firebase Auth. Designing intuitive budget features and transaction forms helped reinforce best practices in form handling, client-server communication, and UI feedback. Building reusable components for charts and summary cards taught me how to structure a scalable UI while keeping performance and responsiveness in mind.

Outcome

Finance Visualizer demonstrates my ability to design, build, and deploy a full-stack financial web application using modern technologies. It highlights my strengths in authentication, data visualization, and responsive UI design while showcasing real-world problem-solving in budget and expense tracking.