PaySaPal is a Next.js + Convex + Clerk demo application for tracking and splitting shared expenses. It supports individual and group expenses, multiple split types (equal / exact / percentage), dashboards, settlements, email notifications, and background insights.
- Create expenses with multiple split types
- Group and person management
- Dashboard with balances and monthly summaries
- Settlement creation and payment logging
- Background jobs: monthly spending insights and daily payment reminders
- Seed helper to populate demo data
- Next.js (App Router)
- Convex (server functions and document store)
- Clerk (authentication)
- Inngest (background jobs)
- Resend (email delivery)
- Google Generative API (spending insights)
- Node.js v18+
- npm (or yarn / pnpm)
- Convex CLI
- Clerk account (publishable + secret keys)
- (Optional) Resend API key for email
- (Optional) Google Generative API key for insights
Create a .env.local in the project root with the following keys (do not commit secrets):
NEXT_PUBLIC_CONVEX_URL= CONVEX_DEPLOYMENT= NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= CLERK_SECRET_KEY= CLERK_JWT_ISSUER_DOMAIN= CLERK_JWT_TEMPLATE_NAME= RESEND_API_KEY= # optional (email) GEMINI_API_KEY= # optional (spending insights)
Example .env.example snippet:
NEXT_PUBLIC_CONVEX_URL=http://127.0.0.1:3210
CONVEX_DEPLOYMENT=anonymous:project
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
CLERK_JWT_ISSUER_DOMAIN=https://your-clerk-domain
CLERK_JWT_TEMPLATE_NAME=convex
RESEND_API_KEY=rsnd_xxx
GEMINI_API_KEY=gemini_xxx- Install dependencies
npm install- Start Convex local development
npx convex devEnsure NEXT_PUBLIC_CONVEX_URL matches the URL printed by the Convex CLI.
- (Optional) Seed demo data
npx convex run seed:seedDatabase- Start Next.js
npm run dev- Open the app Visit: http://localhost:3000
- Registered in
app/api/inngest/route.js. spendingInsights— monthly spending summaries (requires GEMINI_API_KEY).paymentReminders— daily debt reminders (requires RESEND_API_KEY).
Configure Inngest and deploy the Inngest functions for production scheduling.
- Build
npm run build- Deploy Next.js to a host of your choice (Vercel, Netlify, etc.).
- Deploy Convex functions using Convex deployment workflow and set environment variables in the host/Convex console.
- Convex client errors: check
NEXT_PUBLIC_CONVEX_URL. - Auth errors: confirm Clerk keys and issuer domain.
- Email failures: verify
RESEND_API_KEY. - Regenerate Convex API files after function changes by running
npx convex dev.
- Frontend:
app/,components/ - Convex server:
convex/(expenses.js,settlements.js,email.js,seed.js) - Inngest:
lib/inngest/andapp/api/inngest/route.js - Auth:
app/layout.js,.env.local
- Install dependencies
npm install- Start Convex local development
npx convex devEnsure NEXT_PUBLIC_CONVEX_URL matches the URL printed by the Convex CLI.
- (Optional) Seed demo data
npx convex run seed:seedDatabase- Start Next.js
npm run dev- Open the app Visit: http://localhost:3000
- Registered in
app/api/inngest/route.js. spendingInsights— monthly spending summaries (requires GEMINI_API_KEY).paymentReminders— daily debt reminders (requires RESEND_API_KEY).
Configure Inngest and deploy the Inngest functions for production scheduling.
- Build
npm run build- Deploy Next.js to a host of your choice (Vercel, Netlify, etc.).
- Deploy Convex functions using Convex deployment workflow and set environment variables in the host/Convex console.
- Convex client errors: check
NEXT_PUBLIC_CONVEX_URL. - Auth errors: confirm Clerk keys and issuer domain.
- Email failures: verify
RESEND_API_KEY. - Regenerate Convex API files after function changes by running
npx convex dev.
- Frontend:
app/,components/ - Convex server:
convex/(expenses.js,settlements.js,email.js,seed.js) - Inngest:
lib/inngest/andapp/api/inngest/route.js - Auth:
app/layout.js,.env.local