Build an Invoice Generator and Tracker With AI in a Weekend

With 92% of builders now using AI tools daily, you can build an invoice generator with AI that handles PDF creation, payment tracking, and automatic reminders in a single weekend. Not a template. A real invoicing system tailored to your freelance or agency workflow, built from scratch with AI doing the heavy lifting.

Most freelancers and small agencies bounce between three or four tools to handle invoicing. One app to create the invoice, another to convert it to PDF, a spreadsheet to track who has paid, and a calendar reminder to follow up on the ones who have not. That is four context switches for something that should be one workflow. This tutorial builds that single workflow.

What You Will Build

By the end of this tutorial, you will have a working invoice generator with five core features. An invoice creation form with line items, tax calculations, and client details. PDF generation that produces clean, professional invoices. A dashboard that tracks payment status across all your invoices. Stripe integration for accepting online payments. And automatic email reminders for overdue invoices.

The tech stack is straightforward. Next.js for the app, a database (Supabase or your preference) for storing invoices, React PDF for generating documents, Stripe for payments, and Resend for email reminders. Your AI coding tool handles most of the implementation. You handle the decisions.

Step 1, Set Up the Project and Database Schema

Start by prompting your AI tool to scaffold the project. Use a prompt like this: "Create a Next.js app with TypeScript, Tailwind CSS, and Supabase. Set up a database schema for an invoicing app with these tables: clients (id, name, email, company, address), invoices (id, client_id, invoice_number, issue_date, due_date, status, subtotal, tax_rate, tax_amount, total, notes, stripe_payment_link), and line_items (id, invoice_id, description, quantity, unit_price, amount). Add row-level security policies so each user can only see their own data."

The AI will generate your project structure, database migration files, and type definitions. Review the schema carefully before running the migration. Make sure the invoice status field supports at least four states: draft, sent, paid, and overdue. Add a reminder_sent_at timestamp field to the invoices table as well, since you will need it for the reminder system later.

Set up your environment variables for Supabase (URL and anon key), Stripe (secret key and webhook secret), and Resend (API key). These three services all have free tiers that are more than enough for a freelancer's invoicing volume.

Step 2, Build the Invoice Creation Form

The invoice form is the core of your app, and it needs to handle dynamic line items. Prompt your AI tool: "Build an invoice creation form with these fields: client selector (dropdown of saved clients), invoice number (auto-generated), issue date, due date, and a dynamic line items section where I can add and remove rows. Each line item row should have description, quantity, unit price, and a calculated amount. Show subtotal, tax (configurable percentage), and total at the bottom. Include a Save as Draft button and a Send Invoice button."

The tricky part here is the dynamic line items. Each row needs to recalculate its amount when quantity or unit price changes, and the totals at the bottom need to update in real time. If your AI generates this with individual state variables for each field, ask it to refactor: "Refactor the line items to use a single array in state with useFieldArray or a similar pattern. Each item should be an object with description, quantity, unitPrice, and a computed amount."

Also build a client management page where you can add, edit, and list clients. This saves you from retyping client details every time you create a new invoice. A simple CRUD interface is fine here. Name, email, company, and address.

Step 3, Generate Professional PDFs

PDF generation is where most DIY invoicing projects stall. There are several approaches, but the most reliable for a Next.js app is using @react-pdf/renderer. It lets you build PDF layouts with React components, which means your AI tool can generate and modify them easily.

Prompt: "Create a PDF invoice template using @react-pdf/renderer. The template should include my business name and logo at the top, the client's billing information, invoice number and dates, a table of line items with columns for description, quantity, unit price, and amount, subtotal, tax, and total at the bottom, and payment instructions. Use a clean professional design with one accent color."

The PDF renderer runs on the server side. Create an API route that accepts an invoice ID, fetches the data from your database, renders the PDF, and returns it as a downloadable file. The route should look something like /api/invoices/[id]/pdf.

Test the PDF output with a real invoice. Check that numbers align properly in the line items table, that long descriptions wrap correctly, and that the total matches what your form calculated. Number formatting issues (currency symbols, decimal places, thousand separators) are common, so verify those early.

Step 4, Add Payment Tracking and Stripe Integration

Payment tracking needs two things: a status system in your dashboard and an actual way for clients to pay. Start with the dashboard.

Prompt: "Build an invoice dashboard that shows all invoices in a table with columns for invoice number, client name, date, amount, and status. Status should be color-coded: gray for draft, blue for sent, green for paid, red for overdue. Add filters for status and a search bar for client name. Show summary cards at the top with total outstanding, total paid this month, and number of overdue invoices."

For Stripe integration, create a Stripe Payment Link for each invoice when it is sent. Prompt: "When an invoice status changes to 'sent', create a Stripe payment link for the invoice total and store the URL in the invoice record. Include the payment link in the invoice email and on the PDF. Set up a Stripe webhook endpoint at /api/webhooks/stripe that listens for checkout.session.completed events and automatically updates the invoice status to 'paid' when payment is received."

The webhook is critical. Without it, you would have to manually check Stripe and update invoice statuses by hand. The webhook automates this entirely. When a client pays through the Stripe link, your app updates the invoice to "paid" within seconds.

Step 5, Automate Payment Reminders

The reminder system is what turns this from a simple invoice generator into a complete tracking tool. You need two pieces: a function that identifies overdue invoices and an email sender.

Prompt: "Create a cron job or scheduled function that runs daily. It should query all invoices where status is 'sent', due_date is in the past, and reminder_sent_at is null or older than 7 days. For each overdue invoice, send a polite payment reminder email using Resend that includes the invoice number, amount due, original due date, and a link to pay. Update the reminder_sent_at timestamp after sending. Also update the invoice status to 'overdue' if it is still 'sent' and past due."

For the email template, keep it short and professional. Three sentences maximum: we are following up on invoice #X, the amount of $Y was due on Z date, and here is the link to pay. Nobody reads long reminder emails.

If you are deploying on Vercel, use Vercel Cron Jobs to trigger the reminder function. If you are on another platform, a simple external cron service (like cron-job.org) hitting your API endpoint works just as well. The important thing is that it runs automatically. The entire point is that you should not have to remember to chase payments.

Deploy and Start Invoicing

Once your features are working locally, deploy the app. If you are using Vercel, connect your GitHub repo and push. Set your environment variables in the Vercel dashboard (Supabase credentials, Stripe keys, Resend API key) and deploy.

Before sending your first real invoice, test the complete flow end to end. Create a test invoice. Send it (to yourself). Click the payment link. Complete a test payment using Stripe's test mode. Verify the webhook fires and the status updates to paid. Wait for the cron job to run and confirm it does not send a reminder for a paid invoice. This full-cycle test catches integration issues that unit tests miss.

After your first weekend, consider adding recurring invoices for retainer clients and a simple reporting page that shows revenue by month.

What This Means For You

You just built a tool that replaces a $20 to $50 per month SaaS subscription, and it does exactly what you need because you defined the requirements.

• If you are a freelancer or solopreneur: You now have an invoicing system that matches your exact workflow. No features you do not need, no limitations on the features you do. The automatic reminders alone will recover revenue you were losing to forgotten follow-ups. Send your first real invoice this week.
• If you are a founder building a product: This project taught you a pattern (form, PDF generation, payment integration, automated emails) that applies to dozens of business tools. Proposals, contracts, receipts, reports. The invoice generator is a template for any document-heavy workflow your product might need.