Expense Tracker

This is Expense tracking Next.js project hosted on Vercel using PlanetScale database with Prisma ORM

Roadmap

• Success/error messages (i.e. react-toastify)
• Add category description (perhaps move the form inside a modal/slideover)
• Add expense description, date and amount (perhaps move the form inside a modal/slideover)
• Delete expenses + confirmation popup
• Delete categories + confirmation popup
  • Think about how to delete categories. Can we delete a category that has expenses linked? Do we delete all expenses as well?
• Update expenses (name, description, amount, date)
  • Date will default to today, but user should be able to enter any custom date
• Update categories (name, description)
• Expand collapse all categories
• Custom category icons
• Expense tagging and later tag based filters
• Filter expenses by date (current month, last month, custom range, all time)
  • Each period selected will compare the amounts with previous period
• Currency selection on top
• Social login before you can enter expenses
  • Expenses will be linked and private to the account being used
  • Perhaps a sharable link so that others can collaborate?
• Charts and then more charts

Useful links

• GitHub with code examples is HERE
• PlanetScale + Prisma + Next.js tutorial is HERE
• Prisma docs are HERE

Useful PlanetScale commands

• Open local connection
  • pscale connect YOUR-DB-NAME-HERE main --port 3309
• Connect to mysql shell
  • pscale shell YOUR-DB-NAME-HERE main (You can exit the MySQL shell by typing exit and hitting enter.)
• Promote branch to production
  • pscale branch promote YOUR-DB-NAME-HERE main
• Install PlanetScale CLI by following these steps
• Enable safe migrations
  • pscale branch safe-migrations enable YOUR-DB-NAME-HERE main

Making changes to the database

Step-by-step tutorial is HERE

1. Create a new development branch from main called add-subtitle:
   • pscale branch create YOUR-DB-NAME-HERE add-subtitle
2. Close the proxy connection to your main branch (if still open) and connect to the new add-subtitle development branch:
   • pscale connect YOUR-DB-NAME-HERE add-subtitle --port 3309
3. In the prisma/schema.prisma file, update the model:
   • Add a new subtitle field:
   • subtitle String @db.VarChar(255)
4. Run db push again to update the schema in PlanetScale:
   • npx prisma db push
5. Open a deploy request for your add-subtitle branch, so that you can deploy these changes to main.
   • You can complete the deploy request either in the web app or with the pscale deploy-request command.
   • pscale deploy-request create YOUR-DB-NAME-HERE add-subtitle
   • pscale deploy-request deploy YOUR-DB-NAME-HERE 1

Useful Prisma commands

• Re-generate prisma client with every schema change
  • prisma generate
• Push prisma changes inside prisma.schema to PlanetScale with
  • npx prisma db push
• Run prisma studio in browser
  • npx prisma studio (Opens up in a new browser tab http://localhost:5555/)