HomeSpend Dashboard

Modern SaaS dashboard for managing household finances built with Next.js 14, TypeScript, and Tailwind CSS.

Getting Started

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

3. Open http://localhost:3000 in your browser.

Available Scripts

• npm run dev - Start the development server.
• npm run build - Create a production build.
• npm run start - Serve the production build.
• npm run lint - Lint the project with Next.js defaults.

Tech Stack

• Next.js 14 (App Router)
• TypeScript
• Tailwind CSS with custom design tokens
• next-themes for dark/light mode (dark enabled by default)
• Heroicons React icons

Project Structure

app/                # App Router entry points and layouts
components/         # Reusable UI components for the dashboard
lib/data.ts         # Static dashboard data used for the mock UI
public/             # Static assets (favicon)

The design implementation follows the specification in docs/design.md, including the metric hero cards, trend chart, category donut, recent transactions table, alerts, goals, and the add-expense modal.

Notes

• The current charts are rendered with handcrafted SVG paths to avoid external dependencies.
• Replace the placeholder data in lib/data.ts with live data or API calls when integrating with a backend.
• Tailwind is configured for a dark-first theme; integrate the ThemeProvider when adding a light mode toggle.