A full stack finance tracker Software as a Service built with Next.js, React, Tailwind CSS, Neon (PostgreSQL), Drizzle, Plaid, and LemonSqueezy. This project encompasses essential features for a financial budget tracker, including user authentication, transaction recording, account management, category tagging, comprehensive expense and income tracking overview, subscription management for premium plans, and seamless integration with banking services.
Table of Contents
The project focuses on creating a full stack financial expenses tracker SaaS. The frontend is built with Next.js and React, providing a dynamic and responsive user interface. Tailwind CSS is used for styling to achieve a modern and sleek design.
The backend is powered by Neon, an open-source Firebase alternative built on top of PostgreSQL. Neon handles user authentication with migrations done through Drizzle.
The subscription managemet is backed by LemonSqueezy, a Plaid alternative, for monthly payments for a premium plan. Users can connect to their banks through Plaid to view their transactions.
This project aims to provide a comprehensive example of building a production-ready Finance Tracker SaaS, covering key aspects such as authentication, data management, and payment processing.
- ✔️ Develop an interactive financial dashboard
- ✔️ Enabled changeable chart types for better data visualization.
- ✔️ Add account and date filters to customize views
- ✔️ Include a detailed transactions table for comprehensive financial tracking.
- ✔️ Support CSV transaction imports for transaction data integration.
- ✔️ Set up an API using Hono.js.
- ✔️ Manage state using Tanstack React Query.
- ✔️ Ensure user authentication with Clerk (Core 2).
- ✔️ Build the application using Next.js 14.
- ✔️ Style the app with TailwindCSS and Shadcn UI.
- ✔️ Utilize Neon (PostgreSQL) for database management.
- ✔️ Use Drizzle for database migrations.
- ✔️ Integrate premium plan subscription management through Lemon Squeezy.
- ✔️ Connect with banks and import transactions using Plaid.
- ✔️ Deploy the application on Vercel with custom domain from AWS Route53.
Node version 14.x
git clone https://github.com/phammings/Finance-Tracker-SaaS.git
npm i
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
DATABASE_URL=
NEXT_PUBLIC_APP_URL=
PLAID_CLIENT_TOKEN=
PLAID_SECRET_TOKEN=
LEMONSQUEEZY_API_KEY=
LEMONSQUEEZY_STORE_ID=
LEMONSQUEEZY_WEBHOOK_SIGNATURE=
LEMONSQUEEZY_PRODUCT_ID=
npm run db:generate
npm run db:migrate
npm run db:seed
or import Sample.csv
npm run db:studio
npm run dev
Credit Card Number:
4242 4242 4242 4242
For the rest of the payment method details: choose any valid details (i.e. expiry date is in the future).
All Bank Account login details:
Login: user_good
Password: pass_good
Mobile Number Confirmation #: 1234