Financial Dashboard

A smart, secure web app to track income, expenses, and accounts. Visualize trends, import CSVs, and manage your finances in one place—simple, fast, and accessible from anywhere.

Comment

Inspiration

Managing personal finances can be messy and overwhelming. I wanted to build something simple, modern, and effective—a personal finance dashboard that helps users easily track income, expenses, and accounts all in one place. The goal was to create a tool that feels intuitive, secure, and visually insightful—something I personally wished existed.

What it does

The Financial Dashboard is a full-stack web app that allows users to:

  • Sign up and securely log in via Clerk
  • Add, edit, and delete transactions
  • Manage financial accounts and categories
  • View income vs. expense charts and summaries
  • Upload CSV files to bulk import transactions
  • Filter data by date range
  • View everything in a clean, responsive dashboard

How we built it

The project is built with a modern, scalable tech stack:

  • Frontend: Next.js (App Router), React, TypeScript, Tailwind CSS, Shadcn UI
  • Backend: Hono API routes inside Next.js
  • Database: PostgreSQL with Drizzle ORM
  • Authentication: Clerk for secure auth and session management
  • State Management: React Query and Zustand
  • Validation: Zod + React Hook Form
  • Charts: Recharts
  • CSV Parsing: PapaParse
  • Deployment: Vercel (frontend) and Neon (PostgreSQL)

Challenges we ran into

  • Clerk integration across both frontend routes and protected API endpoints
  • Handling user-specific database access securely
  • Validating and mapping CSV data to the database schema
  • Understanding Drizzle ORM deeply for schema and migration design
  • Keeping the UI responsive while dealing with real-time data and large datasets

Accomplishments that we're proud of

  • Built a fully functional, visually polished full-stack app from scratch
  • Implemented real-time chart updates with transaction data
  • Successfully integrated Clerk for a secure and smooth authentication experience
  • Designed reusable, scalable components with accessibility in mind
  • Deployed on Vercel with seamless CI/CD workflow

What we learned

  • Advanced usage of Next.js App Router with TypeScript
  • Real-world integration of Drizzle ORM for database design and operations
  • Best practices in auth protection with Clerk middleware
  • React Query and Zustand for optimized state and data fetching
  • Working with CSV files on the client side with robust validation
  • Clean UI development with Tailwind and component libraries like Shadcn

What's next for Financial Dashboard

  • Add budget planning and spending limit features
  • Enable data export (CSV/PDF)
  • Build mobile-first design for better phone UX
  • Add transaction tagging and advanced filters
  • Implement recurring transaction reminders
  • Add multi-user support for shared accounts

Built With

Share this project:

Updates