webactive

Expense Hub

Data-driven personal finance tracker with intelligent categorization, interactive Recharts visualizations, and date-range pattern analysis.

▲Next.js ⚛️React 🔷TypeScript 🎨Tailwind CSS 📊Recharts

Overview

Expense Hub is a Next.js 14 personal finance application featuring interactive expense visualization with Recharts, date-range filtering with date-fns, categorized expense management, and smooth Framer Motion animations. The UI uses Tailwind CSS with a responsive design that works across desktop and mobile.

Key Features

Expense categorization
Interactive charts with Recharts
Date-range filtering
Responsive dashboard
Smooth animations

Technical Details

Entry Point	src/app/page.tsx
Build	npm run build
Run	npm run dev (port 3004)
Architecture	Next.js App Router SPA
Dependencies	12
Docker	No

Architecture & Patterns

Architecture

Next.js App Router SPA

Key Patterns

01Client-side state management

02Recharts data visualization

03Responsive dashboard layout

PreviousMovieMatch

NextDiamond Luxe

Related Projects

RiskPulse

AI-powered fraud detection platform with composable rule engine, LLM-generated investigation narratives, and real-time risk scoring across the full Detect-Investigate-Mitigate lifecycle.

▲Next.js ⚛️React 🔷TypeScript 🎨Tailwind CSS

Coffee Sommelier

Algorithmic recommendation engine using weighted cosine similarity and MMR diversification — zero LLM dependency, sub-50ms latency, serving four independent frontends.

▲Next.js ⚛️React 🔷TypeScript 🎨Tailwind CSS

ResumeTailor

LLM-powered resume optimization using Anthropic Claude — parses DOCX into structured blocks, intelligently tailors content to job descriptions, and re-exports with formatting preserved.

▲Next.js ⚛️React 🔷TypeScript 🎨Tailwind CSS