Skip to content

Latest commit

 

History

History
200 lines (142 loc) · 6.06 KB

README.md

File metadata and controls

200 lines (142 loc) · 6.06 KB
Raw

Fiannce Tracker SaaS


Full Stack Finance Tracker SaaS

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
  1. About The Project
  2. Roadmap
  3. Instructions

About The Project

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.

Live Demo 🔗

(back to top)

Built With

  • Next.js
  • React
  • Tailwind CSS
  • Hono
  • Neon
  • Drizzle
  • PostgreSQL
  • Plaid
  • LemonSqueezy
  • Vercel

(back to top)

Roadmap

  • ✔️ 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.

(back to top)

Instructions

Prerequisites

Node version 14.x

Cloning the repository
git clone https://github.com/phammings/Finance-Tracker-SaaS.git
Install packages
npm i

Setup .env file from .env.example

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=

Run the migrations

npm run db:generate
npm run db:migrate

Populate the database with mock data

npm run db:seed
or import Sample.csv

Open the local Drizzle database GUI

npm run db:studio

Start the app

npm run dev

Testing with LemonSqueezy Payment

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).

Testing with Plaid

All Bank Account login details:

Login: user_good
Password: pass_good

Mobile Number Confirmation #: 1234

(back to top)