Overview

Technologies Used

• Frontend:
  Next.js
• Backend:
  Hono.js with Next.js
• ORM:
  Drizzle
• Authentication:
  Clerk
• Styling:
  Tailwind Shadcn UI

Main Features

• CRUD Operations for Categories and Transactions
• List Transactions:
  Display transactions in a table format
• Charts:
  Visualize transactions using pie, area, and line charts

Development Process

Clerk Integration

• Set up Clerk for authentication.
• Implement Clerk middleware in Hono.js.

Backend Development with Hono.js

• Account Post:
  • Utilize Drizzle Zod for schema validation.
  • Implement Hono zValidator middleware for request validation.
  • Create POST endpoint for accounts.
• Transactions Schema:
  • Define schema with fields such as id, amount (integer, rounded to three decimal places), and payee.
  • Establish relationships with accounts and categories.
    • Cascade delete transactions when an account is deleted.
    • Set categoryId to null when a category is deleted.

Frontend Development with Next.js

• Header Component:
  Create a reusable header component.
• Sheet Component:
  Implement
  useMountedState
  hook for state management.
• Zustand:
  Utilize Zustand for global state management.

Data Management

• React Query:
  • Implement mutations for creating accounts.
  • Refresh account list upon mutation.

User Interface

• Data Table:
  Create a data table for listing accounts and transactions.
• Edit Account Form:
  Implement form for editing accounts.
• Account Bulk Deletes:
  Enable bulk deletion of accounts.

API Development

• Categories API + UI:
  Mirror the functionality of accounts for categories.
• Transactions API:
  • Implement GET, POST, PATCH, DELETE endpoints for transactions.
  • Define Zod query for filtering transactions.
  • Utilize joins to fetch related data for categories and accounts.

Transaction Management

• Hooks:
  Create custom hooks for managing transactions.
• Transactions Form:
  Develop a form for adding and editing transactions.
• Transactions Page:
  Design a page to list and manage transactions.
• CSV Import: Implement CSV import functionality using react-papaparse.
  • Default to list mode.
  • Transition to import mode and pass data to
    ImportCard
    .
  • Use bulk create for batch importing transactions.

Dashboard

• Summary API:
  Implement an API for calculating summary data for graphs.
• Dashboard Cards:
  Display total income and total expense using data grids.
• Charts:
  Create pie, area, and line charts for visualizing transaction data.
• Filters:
  Add date and account filters for refined data visualization.

Deployment

• Deploy the application using Vercel.
• Purchase and configure the domain
  namk.dev
  .
• Upgrade to Vercel Pro for enhanced features.

Notes

• Ensure all transactions are listed for the last 30 days by default.
• Implement a demo account for user testing.
• Organize components logically for maintainability.