Invoice Generator with Node.js and Express

Creating an Invoice Generator involves building a Node.js and Express backend to handle the generation of invoices based on user input. Below is a step-by-step guide to create a basic Invoice Generator using Node.js, Express, and a templating engine (such as EJS).

Step 1: Set Up Your Project

Create a new project folder:

 mkdir invoice-generator
 cd invoice-generator

Initialize a new Node.js project:
```
 npm init -y
```
Install necessary dependencies:
```
 npm install express ejs body-parser
```

Step 2: Create Your Folder Structure

Create the following folder structure:

invoice-generator/
|-- src/
|   |-- views/
|       |-- index.ejs
|   |-- routes/
|       |-- invoice.js
|   |-- app.js
|-- server.js
|-- package.json
|-- .gitignore

Step 3: Set Up Express Server

In app.js, set up an Express server and configure the templating engine:

const express = require('express');
const bodyParser = require('body-parser');
const invoiceRoutes = require('./routes/invoice');

const app = express();
const PORT = process.env.PORT || 3000;

app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
app.use('/invoice', invoiceRoutes);

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Step 4: Create Invoice Routes

In routes/invoice.js, set up routes for the invoice generator:

const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
  res.render('index', { invoice: null });
});

router.post('/generate', (req, res) => {
  // Get user input from the form
  const { clientName, itemName, quantity, rate } = req.body;

  // Calculate total amount
  const totalAmount = quantity * rate;

  // Prepare invoice data
  const invoiceData = {
    clientName,
    itemName,
    quantity,
    rate,
    totalAmount,
  };

  // Render the invoice template with data
  res.render('index', { invoice: invoiceData });
});

module.exports = router;

Step 5: Create EJS Template

In views/index.ejs, create the EJS template for the invoice:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Invoice Generator</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }
    table {
      width: 50%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <h1>Invoice Generator</h1>
  <form action="/invoice/generate" method="post">
    <label for="clientName">Client Name:</label>
    <input type="text" id="clientName" name="clientName" required>
    <br>
    <label for="itemName">Item Name:</label>
    <input type="text" id="itemName" name="itemName" required>
    <br>
    <label for="quantity">Quantity:</label>
    <input type="number" id="quantity" name="quantity" required>
    <br>
    <label for="rate">Rate:</label>
    <input type="number" id="rate" name="rate" required>
    <br>
    <button type="submit">Generate Invoice</button>
  </form>

  <% if (invoice) { %>
    <h2>Generated Invoice:</h2>
    <table>
      <tr>
        <th>Client Name</th>
        <td><%= invoice.clientName %></td>
      </tr>
      <tr>
        <th>Item Name</th>
        <td><%= invoice.itemName %></td>
      </tr>
      <tr>
        <th>Quantity</th>
        <td><%= invoice.quantity %></td>
      </tr>
      <tr>
        <th>Rate</th>
        <td><%= invoice.rate %></td>
      </tr>
      <tr>
        <th>Total Amount</th>
        <td><%= invoice.totalAmount %></td>
      </tr>
    </table>
  <% } %>
</body>
</html>

Step 6: Run Your Application

In server.js, use the exported app to start the application:

const app = require('./src/app');

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Start the server:

node server.js

Visit http://localhost:3000/invoice in your browser to see and interact with the Invoice Generator.

Congratulations! You've created a basic Invoice Generator using Node.js, Express, and EJS. You can further enhance this app by adding more features, styling, and customization based on your specific requirements.