Skip to content

A modern invoice generator built with Next.js, Tailwind CSS, Auth.js, and Mailtrap. Features include authentication with magic links, invoice creation, PDF generation, email notifications, and reminders. Designed for freelancers and businesses to manage invoices seamlessly with a clean UI and smooth workflow.

License

Notifications You must be signed in to change notification settings

IFTE-13/InvoiceG

Repository files navigation

InvoiceG.

Next.js Tailwind CSS Auth.js Mailtrap Vercel

A modern Invoice Generator built with Next.js 15, Auth.js, Tailwind CSS, and Mailtrap. This project allows businesses and freelancers to create, manage, and send invoices seamlessly with features like email verification, magic links, and custom PDF generation.

Shoutout

Important

A big shoutout to Jan Marshal for this amazing project idea


🚀 Tech Stack

  • Next.js 15 – Framework for building the application
  • Tailwind CSS v4 – For responsive UI and styling
  • Auth.js – Authentication with email magic links
  • Mailtrap (Nodemailer) – Email testing and delivery
  • PDFKit / Custom Template – Generate real PDFs for invoices

✨ Features

Authentication

  • Implemented with Auth.js
  • Email magic links with Mailtrap
  • Custom verification route

Onboarding

  • Collects Name and Address before creating invoices

Dashboard

  • Clean and responsive layout
  • Index route includes analytics with animated charts

Invoice Management

  • Create Invoice

    • Send email to client on completion
    • Custom invoice template (from scratch)
    • Generate a real PDF and attach via link
  • Edit Invoice

    • Send update email to client
    • Custom template via HTML Builder
  • Reminder Emails

    • Send automated reminders via Mailtrap templates
  • Other Invoice Actions

    • Download invoice (PDF)
    • Delete invoice
    • Mark invoice as Paid

Optimizations

  • Streaming with a beautiful skeleton UI

Deployment

  • Deployed on Vercel

🖼 Workflow

image

⚡ Getting Started

1. Clone the repo

git clone https://github.com/IFTE-13/invoiceg.git
cd invoiceg

2. Install dependencies

pnpm install

3. Setup environment variables

Create a .env.local file in the root of your project and add:

AUTH_SECRET=""


EMAIL_SERVER_USER=
EMAIL_SERVER_PASSWORD=
EMAIL_SERVER_HOST=live.smtp.mailtrap.io
EMAIL_SERVER_PORT=
EMAIL_FROM=


DATABASE_URL=""


MAILTRAP_TOKEN=""

4. Run locally

pnpm run dev

📧 Mailtrap Setup

This project uses Mailtrap for testing emails in a safe environment.

  1. Go to Mailtrap and create a free account.
  2. Create a new Inbox (or use the default one).
  3. Inside the Inbox, go to SMTP Settings → choose Node.js (Nodemailer).
  4. Copy the credentials provided (username & password).
  5. Add them to your .env.local file.

Contributing

Contributions are welcome! To contribute:

  1. Fork the repository
  2. Create a new branch (git checkout -b feature/YourFeature)
  3. Make your changes and commit (git commit -m "Add new feature")
  4. Push the branch (git push origin feature/YourFeature)
  5. Open a Pull Request

License

Caution

This project is licensed under the MIT License. Feel free to use and modify the code as per the terms of the license.

About

A modern invoice generator built with Next.js, Tailwind CSS, Auth.js, and Mailtrap. Features include authentication with magic links, invoice creation, PDF generation, email notifications, and reminders. Designed for freelancers and businesses to manage invoices seamlessly with a clean UI and smooth workflow.

Topics

Resources

License

Stars

Watchers

Forks