시작 프롬프트

이 프롬프트 하나로 아래 프로젝트가 만들어졌습니다.

budget-tracker — Product Development Request

What I Want to Build

A personal budget tracking app for freelancers. Track income by client, categorize expenses, and see monthly/weekly reports to understand where money goes.

Additional Context

Target users are freelance designers and developers who have irregular income. Must be simple — no accounting jargon. Mobile-friendly responsive design.

Key Features

Dashboard with income/expense overview
Add income by client name
Categorize expenses (food, tools, transport, etc.)
Monthly bar chart report
Export to CSV
Dark mode

Tech Stack Preferences

React, TypeScript, Tailwind CSS, Supabase

Architecture

Frontend: Vite + React 18 + TypeScript
Backend/DB: Supabase (auth + PostgreSQL)
UI: Tailwind CSS + shadcn/ui components
Charts: Recharts for monthly reports
State: Zustand for local state management

Database Schema

profiles — user info (linked to Supabase auth)
transactions — income/expense entries (amount, type, category, client_name, date, note)
categories — preset + custom categories

Routes

/ — Dashboard (summary cards + recent transactions)
/add — Add new transaction
/reports — Monthly bar chart with income vs expense comparison
/settings — Profile, categories, export

Please help me build this product based on the requirements above.

First, review the requirements and ask if anything is unclear.
Propose a technical architecture.
Outline the implementation steps.
Start coding from the first step.

I'll confirm progress at each step before moving to the next.

Documentation Rule

Important: Update this document (located at .pmpt/docs/pmpt.md) at these moments:

When architecture or tech decisions are finalized
When a feature is implemented (mark as done)
When a development phase is completed
When requirements change or new decisions are made

Progress

Project scaffolding (Vite + React + TS)
Supabase project setup + schema
Auth (email login)
Dashboard layout with summary cards
Add transaction form
Expense category system
Monthly bar chart report (Recharts)
CSV export (transactions → download)
Dark mode (Tailwind dark: classes)
Deploy to Vercel

Snapshot Log

v1 - Initial Plan

Defined product idea and core features
Chose tech stack: React, Supabase, Tailwind

v2 - Project Setup + Core Features

Scaffolded Vite + React + TypeScript project
Set up Supabase with auth and database schema
Built dashboard with income/expense summary cards
Implemented add transaction form with category selection
Basic expense categorization working

v3 - Reports + Export

Built monthly bar chart using Recharts (income vs expense side by side)
Added date range filter (last 3/6/12 months)
Implemented CSV export — downloads all transactions as .csv
Fixed mobile layout for dashboard cards (2-column grid on small screens)
Added "this month so far" summary widget on dashboard

2

프로젝트 계획

AI가 프롬프트를 분석해 정리한 개발 계획입니다.

아이디어

A personal budget tracking app for freelancers. Track income by client, categorize expenses, and see monthly/weekly reports to understand where money goes.

핵심 기능

Dashboard with income/expense overview; Add income by client name; Categorize expenses (food, tools, transport, etc.); Monthly bar chart report; Export to CSV; Dark mode

기술 스택

React, TypeScript, Tailwind CSS, Supabase

3

개발 여정

AI 개발 과정에서 기록된 3개 스냅샷의 요약입니다. 프로젝트를 클론하면 전체 기록을 확인할 수 있습니다.

v1 2025:12:01

Initial Setup

· Set up project structure
· Installed dependencies: React, Tailwind

Detail

budget-tracker — Product Development Request

What I Want to Build

A personal budget tracking app for freelancers. Track income by client, categorize expenses, and see monthly/weekly reports to understand where money goes.

Additional Context

Target users are freelance designers and developers who have irregular income. Must be simple — no accounting jargon. Mobile-friendly responsive design.

Key Features

Dashboard with income/expense overview
Add income by client name
Categorize expenses (food, tools, transport, etc.)
Monthly bar chart report
Export to CSV
Dark mode

Tech Stack Preferences

React, TypeScript, Tailwind CSS, Supabase

Please help me build this product based on the requirements above.

First, review the requirements and ask if anything is unclear.
Propose a technical architecture.
Outline the implementation steps.
Start coding from the first step.

I'll confirm progress at each step before moving to the next.

Documentation Rule

Important: Update this document (located at .pmpt/docs/pmpt.md) at these moments:

When architecture or tech decisions are finalized
When a feature is implemented (mark as done)
When a development phase is completed
When requirements change or new decisions are made

Add a "## Progress" section below and keep it updated:

## Progress
- [x] Completed item
- [ ] Pending item

Also, add a "## Snapshot Log" section to record what was built at each checkpoint:

## Snapshot Log
### v1 - Initial Setup
- Set up project structure
- Installed dependencies: React, Tailwind

### v2 - Auth Feature
- Implemented login/signup
- Added JWT authentication

This helps others understand what was built at each version when they import this project.

Files (1)

plan.md