Recspenses App

This is a T3 Stack training project. At least that's how it started.

Tech Stack and Links

• T3 Stack
• Vercel - Deployment
• Next.js - Framework
• Clerk - Authentication
• Drizzle - Database ORM
• Tailwind CSS - CSS Framework
• Sentry - Error Management
• Heroicons - Icons
• Shadcn - UI Components

Development Links (for easy access)

• Documentation - Youtube - Theo t3
• Documentation - Theo's Github Project
• Documentation - Clerk
• Deployment Dashboard - GitHub
• Deployment Dashboard - Vercel
• Development - Clerk
• Development - Sentry
• Development - Public API
• Development - FX API
• Deployed - App
• Local - App
• Local - Drizzle Studio
• Local - Supermaven for code completion

To Do list

• Make sure deployment works
• Connect to DB
• Add authentication
• Scaffold Basic UI
• Read and write from a DB
• Connect authentication with my db
• Error management (w/ sentry)
• Add ShadUI
• Decide on a final database design schema
• Add docker compose for a local database
• Create a script for seeding example data on signup
• Create logic for dumping all the user's data into one single json
  • Send that json to the dashboard page
  • Use that json to export users data from settings page
• Analytics (w/ posthog)
• Ratelimiting (w/ upstash)
• Add color picker for tags
• Limit color choices
• Make sure the colours are consistent on tags and tag types

Todo User Journeys

• In my Editor Tab I can see all my expenses in their original currency
• In my Editor Tab I can add a new expense
• In my Editor Tab I can edit an expense
  • I can add a new Tag to an expense
  • I can delete a Tag from an expense
• In my Editor Tab I can delete an expense
• In my Settings Tab I can Edit my Categories, Sources and Tags
  • I can add a new Category, Source or Tag
  • I can edit a Category, Source or Tag
  • I can delete a Category, Source or Tag
• In my Settings Tab I can see information about me
• In my Settings Tab I can Export all my expenses to a json file
• In my Settings Tab I can Import my expenses from a json file
• In my Dashboard Tab I can see my expenses analytics transformed into one currency
• In my Dashboard Tab I can pick which currency I want to see my expenses in

Development

Setup

1. Clone the repo
2. Run pnpm install
3. Run pnpm dev
4. Open http://localhost:3000 with your browser to see the result.
5. Use VsCode's Task Explorer to run the app and drizzle studio.

Run the database locally with docker compose

1. Start Docker Compose docker compose up
2. Connect to the container docker exec -it local_postgres psql -U postgres -d my_local_db
3. Run SELECT * FROM pg_catalog.pg_tables WHERE schemaname='public'; to see the tables

Drop all tables if you want to start fresh

• Drop all tables in the container: docker exec -it local_postgres psql -U postgres -d my_local_db -c "DROP SCHEMA public CASCADE; CREATE SCHEMA public;"
• Delete the migrations folder: rm -rf drizzle/
• Regenerate the schema: npx drizzle-kit generate
• Migrate the database: npx drizzle-kit migrate
• Or Push the schema: npx drizzle-kit push