Skip to content

Latest commit

 

History

History
32 lines (16 loc) · 2.14 KB

README.md

File metadata and controls

32 lines (16 loc) · 2.14 KB

expense-tracker

This is an expense tracker created with Next.js. It features a darker theme with the increased popularity of dark mode to allow users to have a better viewing experience.

The website is hosted on Vercel here.

Website Layout

Users will be greeted with a simple landing page with links to my socials. They can then proceed to sign in or sign up by clicking on the "Get Started" button.

Landing Page

Users can then sign in with their credentials or sign up via clicking the underlined text.

Sign In Page

Upon signing in, users will be greeting with a dashboard with charts containing information about the current month's daily expenses and incomes. Users can add transactions by clicking the button on the bottom right of the screen.

Expense Chart Income Chart

Users can also see their transactions by clicking on the appropriate navigation link on the bar. The transactions will be displayed from latest to earliest and also splitting them by months.

Screenshot 2024-08-05 at 12 44 38 PM

Currently, the settings page allows for users to sign out and sign back in.

Tech Stack

Currently, the website is built on Next.js, a popular React framework, combined with TailwindCSS for styling. The backend is built with Supabase, an open-source Firebase alternative with a PostgreSQL database. Drizzle was also used as a lightweight ORM to aid in database queries. Finally, Vercel was used as a hosting platform for the website.