My Finance App

My Finance App is a polished personal finance dashboard built with React, Vite, and Tailwind CSS. It focuses on account overviews, transaction tracking, budget management, report summaries, and a clean dashboard experience for day-to-day money management.

Features

• Dashboard cards for net worth, monthly savings, and budget health.
• CRUD flows for accounts, transactions, and budgets.
• Seed data with localStorage persistence for a simple demo workflow.
• Reports page with summary insights and a downloadable report action.
• Settings page for profile details and notification preferences.
• Shared UI components for forms, tables, cards, and modal-driven workflows.

Tech Stack

• React 18
• Vite 5
• React Router DOM
• Tailwind CSS
• Firebase package included for future integrations

Getting Started

npm install
npm run dev

The development server runs on http://localhost:5173 by default.

Build for Production

npm run build
npm run preview

Project Structure

• src/pages contains route-level screens for dashboard, accounts, transactions, budgets, reports, settings, and auth flows.
• src/components contains shared layout, finance widgets, and reusable UI primitives.
• src/utils contains the localStorage-backed data helpers used by the demo.
• firebase.js stores the Firebase app bootstrap for future backend integration.

Notes

• The current version behaves like a frontend demo and stores changes in the browser through localStorage.
• If you plan to deploy this project publicly, move any environment-specific configuration into .env files before production use.

Author

Allah Ditta