Full Stack Simple Budget WebApp with Next.js 15

Table of Contents

Overview #

I created this simple budget web application for my personal use. It simply helps me to keep track of expenses in different budget categories.

This is full stack web application built in Next.js 15 framework. It is self hosted with SQLite database and server-side rendering.

Features #

Create, read, update, and delete budget categories for each month.
Add transactions to each budget category.
View total expenses and remaining budget for each category.
Responsive design for mobile and desktop use.
Data persistence using a SQLite database.
Server-side rendering for improved performance.

Tech Stack #

Next.js 15 with the App Router.
TypeScript
SQLite
Drizzle ORM
better-auth for authentication
Tailwind CSS for styling
shadcn/ui for UI components
React Hook Form for form handling
Zod for schema validation

Source Code #

The source code for this project is available on GitHub: https://github.com/singh-ramanpreet/simple-budget

Screenshots #

Screenshot of Simple Budget App - Login Page — Login Page

Screenshot of Simple Budget App - Home Page — Home Page

Screenshot of Simple Budget App - Home Scrolled Down — Home Page Scrolled Down

Screenshot of Simple Budget App - Add Bucket Screenshot — Add Bucket Screenshot

Screenshot of Simple Budget App - Edit Bucket Screenshot — Edit Bucket Screenshot

Screenshot of Simple Budget App - Copy Buckets Screenshot — Copy Buckets Screenshot

Screenshot of Simple Budget App - Add Transaction Screenshot — Add Transaction Screenshot

Screenshot of Simple Budget App - Edit Transaction Screenshot — Edit Transaction Screenshot

Conclusion #

This simple budget application has been a useful tool for managing my personal finances. Building it with Next.js 15 and the associated tech stack has also been a great learning experience. I hope others find it useful as well!