Back to Projects

Fynix - Finance Management

Finance Management is a modern Next.js (App Router) web app for organizing personal or small‑business finances. It lets you track wallets, invoices, and transactions, and visualize insights with KPIs and charts using a reusable shadcn/radix-based UI and Tailwind v4 styling.

Tech Stack:
NextJS
Typescript
TailwindCSS
Shadcn UI
Source Code Live Demo
Dashboard page
Transaction page
Wallet page
Invoice page
Report page

Overview

Finance Management is a modular web app for tracking wallets, invoices, transactions, and generating financial reports. It ships with a reusable UI system and mock data so you can prototype quickly, then evolve toward real persistence (e.g., Prisma + PostgreSQL) and auth.

Core Objectives

  1. Centralize financial records (invoices, transactions, wallet balances).
  2. Provide quick visual feedback via summary cards, charts, and tables.
  3. Offer a scalable UI pattern using composable components
  4. Serve as a starter/learning reference for finance dashboards.

Tech Stack

  • Framework: Next.js 16 (App Router)
  • Language: TypeScript-UI: Radix UI + shadcn/ui patterns, Lucide icons
  • Styling: Tailwind CSS v4 (`@tailwindcss/postcss`), CSS variables
  • Charts: Recharts
  • Dates: date-fns, react-day-picker
  • Tooling: ESLint, PostCSS

Features

  • Wallet management: balances, deposits, withdrawals, and transfers.
  • Invoice tracking: list, filter, and summary stats (extendable to CRUD).
  • Transaction center: categorized records with filterable tables and details.
  • Reporting dashboard: KPI cards, date range picker, and charts.
  • Charts & insights: Recharts for cashflow, income/expense, and breakdowns.
  • Reusable UI system: shadcn/radix primitives under `components/ui/*`.
  • Mock data powered UI via `data/mock-data.ts` for instant prototyping.
  • Responsive layout with `AppSidebar` + `Navbar` and mobile tweaks (`hooks/use-mobile`)

Advantages

  • Modular Next.js App Router structure that scales with features.
  • Reusable UI primitives ensure consistent patterns across pages.
  • Rich visuals via Recharts and KPI cards for quick insights.
  • TypeScript-first codebase improves maintainability and DX-Tailwind v4 styling with CSS variables for flexible theming.
  • Mock data enables instant prototyping without backend setup

Disadvantages

  • No persistence; data resets on reload (requires DB integration).
  • No authentication/authorization in place.
  • Reporting/export features are basic; lacks CSV/PDF.
  • Accessibility/i18n need further work and auditing.
  • No test suite included (unit/e2e not set up)

Design Reference

UI/UX inspiration: [AI Finance Management SaaS Dashboard](https://www.behance.net/gallery/234937291/AI-Finance-Management-SaaS-UX-UI-DashboardDesign) — referenced for layout hierarchy, card density, color accents, and data visualization composition.