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 container building, environment configuration, authentication, and troubleshooting, see ENVIRONMENT_SETUP.md.

Quick Start

1. Prerequisites

   • Docker Desktop installed and running
   • VS Code with Remote - Containers extension
   • GitHub account with Personal Access Token (PAT)

2. Setup Steps

   • Clone this repository
   • Copy .devcontainer/.env.example to .devcontainer/.env and add your GitHub PAT
   • Open in VS Code and select "Reopen in Container" when prompted

Database Setup

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

1. Create a .env file in the project root with your database connection string:

   DATABASE_URL="postgresql://username:password@localhost:5432/finance"
   

2. Run database migrations:

   npx prisma migrate dev
   

3. Seed the database with initial data (optional):

   npx prisma db seed
   

4. 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.