Financial Transaction Manager

A web application for managing financial transactions across multiple bank accounts.

Project Overview

Purpose: Provides a user interface for CRUD operations on financial transactions.
Technology: Built with Astro, TypeScript, and plain CSS, utilizing Astro API routes.
Layout: Features a two-column dashboard design with a sidebar for account selection/actions and a main area for transaction display.
Data Management: Uses Prisma ORM for database operations (src/data/db.service.ts), accessed via API endpoints (src/pages/api/).
Key Features (Implemented & Planned): Account switching, transaction listing, adding, editing, and deleting transactions.

Logs

This app is currently deployed using Cloudflare Pages. The logs can be viewed with the npx wrangler pages deployment tail --project-name finance command.

Development Environment Setup

For detailed setup instructions, including environment configuration and troubleshooting, see ENVIRONMENT_SETUP.md.

Quick Start

Prerequisites
- Node.js (version 18 or higher)
- PostgreSQL (local installation or Docker)
- Git
Setup Steps
- Clone this repository
- Run npm install
- Copy .env.example to .env and configure your database connection
- Run npx prisma migrate dev to set up the database

Database Setup

The project uses Prisma ORM for database operations. To set up the database:

Create a .env file in the project root with your database connection string:
```
DATABASE_URL="postgresql://username:password@localhost:5432/finance"
```
Run database migrations:
```
npx prisma migrate dev
```
Seed the database with initial data (optional):
```
npx prisma db seed
```
To view and manage your data visually:
```
npx prisma studio
```

Path Aliases

This project uses TypeScript path aliases for cleaner imports. Instead of using relative paths like ../../../../data/db.service, use the following aliases:

@/* - Maps to src/*
@components/* - Maps to src/components/*
@layouts/* - Maps to src/layouts/*
@data/* - Maps to src/data/*
@pages/* - Maps to src/pages/*
@styles/* - Maps to src/styles/*
@stores/* - Maps to src/stores/*
@utils/* - Maps to src/utils.ts
@types - Maps to src/types.ts

Example:

// ✅ DO use path aliases like this
import { transactionService } from '@data/db.service';
import type { Transaction } from '@types';

// ❌ DON'T use relative imports like this
import { transactionService } from '../../../../data/db.service';

Enforcing Path Aliases with Biome.js

This project uses Biome.js for code formatting and linting. Biome enforces the use of path aliases instead of relative imports. To run Biome checks:

npm run check

To automatically fix issues:

npm run check -- --apply

The Biome configuration (in biome.json) includes rules for import sorting and path alias enforcement. To customize the rules, edit the biome.json file.

3.1 KiB Raw Blame History