A modern, full-stack web application designed to help users track their income and expenses, categorize transactions, and visualize their financial habits.
- Secure Authentication: Handled by Clerk for easy and secure sign-up and sign-in.
- Dashboard Overview: A comprehensive summary of your financial status, including income, expenses, and net balance.
- Transaction Management: Easily create, view, and manage your income and expense transactions.
- Category Management: Organize your transactions by creating and managing custom categories.
- Interactive Charts: Visualize your spending habits with interactive charts.
- Data Tables: View and filter your transaction history with robust data tables.
- Currency Customization: Select your preferred currency for a personalized experience.
- Dark & Light Mode: Switch between themes for your viewing comfort.
- Framework: Next.js (App Router)
- Language: TypeScript
- Database: PostgreSQL (via Prisma)
- Authentication: Clerk
- Styling: Tailwind CSS & shadcn/ui
- Data Fetching: TanStack Query (React Query)
- Charting: Recharts
- Form Management: React Hook Form & Zod
Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
-
Clone the repository:
git clone https://github.com/AdityaZxxx/budget-tracker.git cd budget-tracker -
Install dependencies:
pnpm install
-
Set up environment variables:
Create a
.envfile in the root of your project and add the following variables. You can copy the.env.examplefile.NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/ NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/wizard NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= CLERK_SECRET_KEY= POSTGRES_PRISMA_URL= POSTGRES_URL_NON_POOLING=
-
Run database migrations:
This will sync your database schema with the Prisma schema.
npx prisma migrate dev
-
Run the development server:
pnpm dev
Open http://localhost:3000 with your browser to see the result.