Expense
Expense
Expense is an open-source app to track incomes, expenses, and subscriptions with real-time insights. Built with Next.js, Supabase, and Vercel.
Expense

What Expense.fyi Does

Expense.fyi is an open-source application designed to effortlessly track and manage your incomes, expenses, investments, and subscriptions. It provides a user-friendly interface to log expenses on-the-go, gain data-driven insights into spending habits, identify and reduce overspending, and monitor expenses in real-time.

Main Features

  • Ease of Use:
    Track expenses on-the-go with simple categorization and logging.
  • Data-Driven Insights:
    Gain valuable insights into your spending habits for informed decision-making.
  • Identify Overspending:
    Take control of your finances by identifying and reducing overspending.
  • Real-Time Visibility:
    Monitor your expenses in real-time with a user-friendly interface.

Tech Stack

  • Framework:
    Next.js
  • UI Components:
    Tailwind CSS
  • Database:
    Supabase (Postgres)
  • Hosting:
    Vercel
  • Emails:
    Resend

Development Process

Expense.fyi was built from scratch using Next.js, ensuring a robust and scalable framework for the application. PostgreSQL, used via Prisma ORM, facilitates easy communication with the database for storing user, subscription data, and more. Supabase serves as an open-source alternative to Firebase, offering a Postgres database with encrypted private data and magic link authentication.
For the payment system, LemonSqueezy was implemented due to its simplicity and efficiency.

New Learnings

Supabase

One of the most significant new learnings from this project was Supabase. I explored its various functionalities, including:
  • Authentication:
    Implementing magic link authentication to enhance security and user experience.
  • Database Management:
    Utilizing Supabase's Postgres database for efficient data storage and retrieval.
By integrating Supabase, I gained valuable experience in using an open-source Firebase alternative, which added significant value to the project and broadened my skill set.

This documentation provides a comprehensive overview of Expense.fyi, detailing its purpose, main features, tech stack, development process, and the new learnings acquired during its creation. This structure showcases the project effectively for your portfolio.