Finance Track

Finance Track is a Next.js application for managing password-protected project workspaces, tracking income and expenses, and reviewing financial performance with charts, summaries, and exports.

Overview

The app is built around project-based workspaces. From the landing page, you can create a new workspace or authenticate into an existing one, then manage income and expense records inside a dedicated dashboard.

Features

• Password-protected project workspaces
• Income and expense entry forms
• Edit and delete flows for existing records
• Financial summary cards and live stats
• Charts for visualizing project performance
• Search, filtering, and pagination for income records
• CSV export for income and expense data
• Privacy toggle to hide or reveal amounts
• Razorpay contribution flow for payment verification

Tech Stack

• Next.js 15
• React 19
• TypeScript
• Tailwind CSS
• Supabase
• Radix UI components
• Recharts
• Razorpay

Getting Started

Prerequisites

• Node.js 18 or newer
• npm, pnpm, yarn, or bun
• A Supabase project
• Razorpay credentials if you plan to use the contribution flow

Installation

npm install

Environment Variables

Create a .env.local file in the project root and add the following values:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
NEXT_PUBLIC_RAZORPAY_KEY_ID=
RAZORPAY_KEY_SECRET=

Run Locally

npm run dev

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

Available Scripts

• npm run dev - start the development server with Turbopack
• npm run build - create a production build
• npm run start - start the production server

Application Structure

• Landing page for creating or accessing projects: app/page.tsx
• Project dashboard: app/project/[projectName]/page.tsx
• API routes: app/api
• UI components: components
• Shared utilities: lib

API Routes

The app exposes several server routes for project and financial operations:

• GET /api/projects - list available projects
• POST /api/projects - create a new project
• POST /api/projects/authenticate - authenticate into a project
• GET /api/projects/:projectId/stats - fetch project summaries
• GET|POST /api/projects/:projectId/income - read or create income entries
• GET|POST /api/projects/:projectId/expenses - read or create expense entries
• PUT|DELETE /api/projects/:projectId/income/:incomeId - update or remove income entries
• PUT|DELETE /api/projects/:projectId/expenses/:expenseId - update or remove expense entries
• GET /api/projects/:projectId/export/income - export income data
• GET /api/projects/:projectId/export/expenses - export expense data
• POST /api/contributions/create-order - create a Razorpay order
• POST /api/contributions/verify-payment - verify a Razorpay payment

Notes

• Project authentication is stored in browser session storage and expires after 24 hours.
• Supabase credentials are required for all project data operations.
• Razorpay variables are only needed if the contribution/payment flow is enabled.

Deploying

The application can be deployed like a standard Next.js app. Make sure the production environment is configured with the same environment variables used locally.