Debtstracker

Track your debt, plan your freedom.

A multi-tenant SaaS application for tracking debts, managing expenses, and planning for relocation savings. Built with Next.js 15, TypeScript, and designed for a fintech aesthetic with dark mode only.

Features

• Email/Password Authentication - Secure login with bcrypt password hashing
• Multi-Tenant Architecture - Complete data isolation between users
• Debt Management - Track multiple debts with priority levels and currency support
• Dashboard Analytics - View total debt, monthly payments, and savings goals
• Dark Mode UI - Minimalist, data-heavy fintech design
• Lowercase Typography - Unique design constraint for modern aesthetic

Screenshots

Landing Page

The marketing page with call-to-action buttons

Sign Up

User registration with email and password

Login

Secure authentication flow

Dashboard - Empty State

Clean dashboard view for new users

Add Debt Form

Form to add new debt with currency and priority

Dashboard - With Debt

Dashboard showing debt cards with progress bars

Dashboard - Multiple Debts

Full dashboard view with multiple debts tracked

Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v3 + Shadcn UI
• Database: Vercel Postgres / Neon (Serverless PostgreSQL)
• ORM: Drizzle ORM
• Authentication: Auth.js v5 (NextAuth) with Credentials Provider
• Password Security: bcryptjs
• Icons: Lucide React

Database Schema

Multi-tenant architecture with strict data isolation:

• users: Authentication data with hashed passwords
• debts: User-specific debts (userId FK, name, total_amount, current_balance, currency, priority)
• transactions: Payment and expense tracking
• goals: Relocation/savings targets

Installation

1. Clone the repository

   git clone https://github.com/1cbyc/debtstracker.git
   cd debtstracker

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env.local file:

   # Database (Neon or Vercel Postgres)
   POSTGRES_URL=postgresql://username:password@host/database
   
   # Auth.js Secret (generate with: openssl rand -base64 32)
   AUTH_SECRET=your_secret_here

4. Set up the database

   # Generate migration files
   npx drizzle-kit generate
   
   # Push schema to database
   npx drizzle-kit push

5. Run the development server

   npm run dev

6. Open your browser

   Navigate to http://localhost:3000

Test Credentials

For testing purposes, you can create a user or use these example credentials:

Email: demo@debtstracker.app
Password: demo123456

Note: You'll need to sign up first as the database starts empty. Use the credentials above or create your own.

Design Philosophy

UI/UX Rules

1. Minimalist, Data-Heavy: Focus on information density and clarity
2. Dark Mode Only: Slate/Zinc color palette for reduced eye strain
3. Lowercase Typography: All text enforced to lowercase for modern aesthetic
4. Mobile-First: Optimized for quick data entry on mobile devices

Color Palette

• Background: hsl(240 10% 3.9%)
• Foreground: hsl(0 0% 98%)
• Primary: hsl(0 0% 98%)
• Destructive (High Priority): hsl(0 62.8% 30.6%)
• Muted: hsl(240 3.7% 15.9%)

Security Features

• Password Hashing: bcrypt with 10 rounds
• Multi-Tenancy: Strict userId validation on all server actions
• Session Management: JWT-based sessions with Auth.js
• Server Actions: All mutations validated with user ownership checks

Project Structure

debtstracker/
├── app/
│   ├── actions.ts           # Server actions (addDebt, logPayment, etc.)
│   ├── auth-actions.ts      # Authentication server actions
│   ├── api/auth/[...nextauth]/  # Auth.js API route
│   ├── dashboard/           # Protected dashboard routes
│   ├── login/               # Login page
│   ├── signup/              # Signup page
│   └── page.tsx             # Marketing landing page
├── components/
│   ├── ui/                  # Shadcn UI components
│   ├── app-sidebar.tsx      # Dashboard sidebar
│   ├── login-form.tsx       # Client login form
│   └── signup-form.tsx      # Client signup form
├── db/
│   ├── schema.ts            # Drizzle schema definitions
│   └── index.ts             # Database client
├── auth.ts                  # Auth.js configuration
├── middleware.ts            # Route protection
└── drizzle.config.ts        # Drizzle Kit configuration

Development

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linter
npm run lint

# Generate database migrations
npx drizzle-kit generate

# Push schema changes
npx drizzle-kit push

# Open Drizzle Studio (database GUI)
npx drizzle-kit studio

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is open source and available under the MIT License.

Acknowledgments

• Built with Next.js
• Styled with Tailwind CSS
• Database with Drizzle ORM
• Authentication via Auth.js
• UI Components inspired by Shadcn UI

---

Made with ❤️ by 1cbyc