I Built a Full-Stack Invoice App from Scratch. Here's the Complete Breakdown

#react #node #webdev #showdev

Most invoice tools are either too expensive or too complicated. I built my own in one week and deployed it live. Here is every technical decision I made and what I learned.

Live demo: https://invoxa-eta.vercel.app
GitHub: https://github.com/Carter254g/invoxa

What It Does

Invoxa lets you create clients, generate invoices with line items, track payment status, and see your revenue on a dashboard. Multi-currency support included.

The Stack

React on the frontend. Node.js and Express on the backend. PostgreSQL for the database. Deployed on Vercel and Render.

Simple. No unnecessary complexity.

The Part Most Tutorials Skip — Auth Middleware

Every protected route in the API runs through this middleware before the controller even sees the request:

const auth = (req, res, next) => {
  const authHeader = req.headers.authorization;
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return res.status(401).json({ error: 'No token provided' });
  }
  const token = authHeader.split(' ')[1];
  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded;
    next();
  } catch (err) {
    return res.status(401).json({ error: 'Invalid or expired token' });
  }
};

Clean. Reusable. One function protects every route.

Database Migrations on Startup

Instead of manually creating tables, the server runs migrations automatically on startup:

migrate.createTables().then(() => {
  app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
  });
});

Anyone who clones the repo gets a working database in seconds.

The Axios Interceptor That Saved Me Hours

Instead of attaching the JWT token to every API call manually, one interceptor handles it globally:

api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

Write it once. Forget about it.

What Broke in Production

Three things hit me during deployment:

Render requires SSL for PostgreSQL connections. Add rejectUnauthorized: false to your pg Pool config in production or nothing works.
CORS needs to explicitly list your Vercel domain. A wildcard does not work with credentials.
JWT expiry values from environment variables need to be strings. When the value comes back undefined from the env, jwt.sign throws a silent error. Hardcode the fallback.

These cost me two hours. Now they cost you nothing.

The Dashboard Pulls Real Data

The dashboard shows total invoices, total clients, revenue collected, and outstanding balance — all calculated from live database queries on every load.

No fake data. No hardcoded numbers.