A modern, interactive web application for visualizing and planning your financial future. Built with Next.js 15, TypeScript, and shadcn/ui components.
- Interactive visualization with real-time chart updates
- Multiple compounding frequencies (Annual vs Monthly)
- Risk scenarios with variance analysis (+/- rate adjustments)
- Baseline comparison showing savings without interest
- Professional tooltips with detailed breakdowns
- Responsive design that scales beautifully across all devices
- Comprehensive inputs for home price, down payment, rates, and terms
- Detailed cost breakdown including property tax, insurance, and HOA
- Amortization schedule with monthly/yearly views and interactive charts
- Extra payment analysis to visualize savings from pre-payments
- Smart validation to ensure realistic financial projections
- Real-time exchange rates powered by FxRatesAPI
- Live historical trends visualized with custom interactive SVG charts
- Smart caching and debounced updates for performance
- Min/Max/Avg statistics for selected currency pairs
- Popular currency pairs dashboard with live updates
- Clean, intuitive interface built with shadcn/ui components
- Dark/light theme support using CSS variables
- Smooth animations and hover effects
- Mobile-first responsive design
- Professional typography with optimized fonts
- Node.js 18+ and npm/yarn/pnpm/bun
- Docker (optional, for containerized deployment)
-
Clone the repository
git clone https://github.com/your-username/finance_visualizer.git cd finance_visualizer/finance-dashboard -
Setup environment variables
Copy
.env.exampleand create.env.local:NEXT_PUBLIC_FX_RATES_API_KEY=your_api_key_here
-
Install dependencies and run
npm install npm run dev
Quick Start:
# Using Docker Compose (recommended)
docker-compose up
# Or using Docker CLI
docker build -t finance-dashboard .
docker run -p 3000:3000 --env-file .env.local finance-dashboardEnvironment Variables:
- The
docker-compose.ymlautomatically loads.env.local - For production, use cloud platform environment configuration (Google Cloud Run, AWS, etc.)
- Never commit API keys to version control
Multi-Stage Build: The Dockerfile uses a 3-stage build optimized for production:
- Stage 1 (deps): Production dependencies only
- Stage 2 (builder): Builds the application with all dev dependencies
- Stage 3 (runner): Minimal production image (~150MB) with non-root user
See .dockerignore for excluded files from the build context.
The project uses Vitest for robust unit testing to ensure calculation accuracy.
# Run tests
npm test
# Run tests with UI
npm run test:ui- Next.js 15 - React framework with App Router
- TypeScript - Type-safe JavaScript
- React 19 - UI library with latest features
- Tailwind CSS - Utility-first CSS framework
- shadcn/ui - High-quality React components
- Radix UI - Accessible component primitives
- Lucide React - Beautiful icon library
- Recharts - Composable charting library
- Vitest - Blazing fast unit test framework
- ESLint - Code linting and formatting
- PostCSS - CSS post-processing
- Geist Font - Modern typography
finance-dashboard/
├── app/ # Next.js App Router
│ ├── pages/ # Page components
│ │ └── landing/ # Landing page sections
│ ├── globals.css # Global styles
│ └── layout.tsx # Root layout
├── components/ # Reusable components
│ ├── ui/ # shadcn/ui components
│ └── helper_functions/ # Utility components
├── lib/ # Utility functions
└── public/ # Static assets
Development:
npm run dev- Start development server with Turbopacknpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint checksnpm test- Run tests with Vitestnpm run test:ui- Run tests with Vitest UI
Docker:
docker-compose up- Build and run with Docker Composedocker-compose down- Stop and remove containersdocker build -t finance-dashboard .- Build Docker image
This project is licensed under the MIT License - see the LICENSE file for details.
- shadcn for the excellent UI component library
- Vercel for Next.js and deployment platform
- Tailwind Labs for the utility-first CSS framework
- Recharts for the powerful charting library
If you have any questions or suggestions, feel free to reach out or open an issue on GitHub.
Get rich together.