A full-stack web application built with Next.js and Node.js that allows users to create, save, download, and email professional invoices.
https://automated-invoice-generator.vercel.app/
- Dynamic Invoice Creation: An intuitive, single-page form to create detailed invoices with client information, itemized lists, and payment terms.
- Real-time Calculations: Subtotals, taxes, and grand totals are calculated instantly as you add or edit items.
- PDF Generation: Download a professionally styled, print-ready PDF of any invoice with a single click.
- Database Storage: Save your invoice drafts to a MongoDB database for record-keeping.
- Email Invoices Directly: Send the generated PDF invoice directly to your client's email address from within the app.
- Dark & Light Mode: The user interface is fully responsive and supports both dark and light themes.
This project is a monorepo containing a separate frontend and backend.
Frontend:
- Framework: Next.js (with App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI: React (with Hooks for state management)
Backend:
- Runtime: Node.js
- Framework: Express.js
- Database: MongoDB with Mongoose ODM
- PDF Generation: Puppeteer
- Email Service: Nodemailer
Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
- Node.js (v18 or later recommended)
- MongoDB installed and running on your local machine, or a connection string from MongoDB Atlas.
-
Clone the repository:
git clone [[https://github.com/swetankan/invoice-app](https://github.com/Swetankan/Automated-Invoice-Generator).git] cd invoice-app -
Install Frontend Dependencies:
cd frontend npm install -
Install Backend Dependencies:
cd ../backend npm install
Before running the application, you need to set up your environment variables for the backend.
- Navigate to the
backenddirectory. - Create a new file named
.env. - Add the following configuration variables, replacing the placeholder values with your own:
# Your local MongoDB connection string MONGODB_URI=mongodb://localhost:27017/invoice-app # Email Configuration (using Gmail App Password) EMAIL_HOST=smtp.gmail.com EMAIL_PORT=587 EMAIL_USER=your-email@gmail.com EMAIL_PASS=your-16-digit-google-app-password
You will need to run the frontend and backend servers in two separate terminals.
Terminal 1: Start the Backend Server
cd backend
npx ts-node-dev index.ts