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

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

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. What is Next PDF export for invoices Email delivery via Nodemailer Recurring invoices Payment gateway integration Try It and Star the Repo Live app: https://invoxa-eta.vercel.app If this helped you, star the repo on GitHub and drop a comment below GitHub: https://github.com/Carter254g/invoxa javascript node react webdev

Read full story →

Comments

Loading comments…

Related