Esign Portal

🎯 Problem Statement

Infrastructure & Deployment PostgreSQL unavailable — Had to switch to SQLite mid-project because PG wasn't installed, requiring database config rewrite No SSH access — Password didn't work for SSH, so we had to use the OpenCode web interface to execute every command manually File transfer failures — 6 different file sharing services failed (temp.sh, transfer.sh, file.io, 0x0.st, catbox.moe, gofile.io) before tmpfiles.org worked Port conflicts — Python app (Pakistan IP Intelligence) took over port 5000, forced us to move eportal to port 5002 and update Caddy PM2 instability — Process list kept getting lost on daemon restart, had to repeatedly restart and resave Backend JWT secret missing — Deployed app.js was missing dotenv.config(), causing "secretOrPrivateKey must have a value" on login Frontend not served — app.js on VPS was missing Express static file serving and catch-all route for React pdf-lib crash — pdf-lib module caused MODULE_NOT_FOUND error when backend tried to start Frontend Wrong import paths — Button, Card, and Input components had ../lib/utils instead of ../../lib/utils Login navigation bug — After successful login, page stayed on login screen because navigate('/') was called before React state flushed; fixed with useEffect-based redirect Browser cache — Old JS/CSS files cached by browsers after deployments; fixed by building with new Vite content hashes Caddy & Networking 502 Bad Gateway — Caddy cached stale proxy connections after backend restarts TLS certificate delays — Let's Encrypt cert took time to provision, HTTPS was broken initially Dist deployment failed — First tarball extraction didn't properly replace old files

🔥 Challenges I Faced

Infrastructure & Deployment PostgreSQL unavailable — Had to switch to SQLite mid-project because PG wasn't installed, requiring database config rewrite No SSH access — Password didn't work for SSH, so we had to use the OpenCode web interface to execute every command manually File transfer failures — 6 different file sharing services failed (temp.sh, transfer.sh, file.io, 0x0.st, catbox.moe, gofile.io) before tmpfiles.org worked Port conflicts — Python app (Pakistan IP Intelligence) took over port 5000, forced us to move eportal to port 5002 and update Caddy PM2 instability — Process list kept getting lost on daemon restart, had to repeatedly restart and resave Backend JWT secret missing — Deployed app.js was missing dotenv.config(), causing "secretOrPrivateKey must have a value" on login Frontend not served — app.js on VPS was missing Express static file serving and catch-all route for React pdf-lib crash — pdf-lib module caused MODULE_NOT_FOUND error when backend tried to start Frontend Wrong import paths — Button, Card, and Input components had ../lib/utils instead of ../../lib/utils Login navigation bug — After successful login, page stayed on login screen because navigate('/') was called before React state flushed; fixed with useEffect-based redirect Browser cache — Old JS/CSS files cached by browsers after deployments; fixed by building with new Vite content hashes Caddy & Networking 502 Bad Gateway — Caddy cached stale proxy connections after backend restarts TLS certificate delays — Let's Encrypt cert took time to provision, HTTPS was broken initially Dist deployment failed — First tarball extraction didn't properly replace old files

💡 What I Learned

Full-Stack Development Building a complete PERN stack app from scratch (PostgreSQL/Express/React/Node) REST API design — auth, CRUD, file upload, verification endpoints JWT authentication with role-based access control (admin, signer, approver, viewer) Database modeling — relationships, associations, migrations via Sequelize File handling — multer uploads, SHA-256 hashing for integrity Frontend React + TypeScript — components, hooks, context API, routing State management — AuthContext, ToastContext patterns UI/UX design — dark theme with Tailwind CSS, glass-morphism, animations Responsive design — mobile sidebar, grid/list toggles, skeleton loading DevOps & Deployment VPS management — connecting, transferring files, diagnosing issues without SSH Reverse proxy — configuring Caddy with auto TLS (Let's Encrypt) Process management — PM2 for Node.js process persistence Port management — resolving port conflicts between multiple apps DNS configuration — wildcard domains, subdomain routing Problem-Solving Debugging login flow — state timing issues with React navigation Caching issues — browser cache busting with Vite content hashes Module errors — fixing import paths, missing dependencies Caddy troubleshooting — 502 errors, TLS delays, stale proxy connections Alternative approaches — falling back to SQLite, using web terminal when SSH failed Real-World Lessons Things break between dev and production Multiple deployment attempts often fail before one works Browser caching is a silent enemy Process managers need proper startup configuration Always check which port is already in use

🚀 Future Improvements

uture Improvements — Summary Automate everything: Docker Compose for one-command deployment CI/CD pipeline (Git push → auto-deploy) Bash deploy script instead of manual tarballs Production hardening: Switch SQLite → PostgreSQL Add rate limiting, input validation (Zod/Joi), request logging Health check endpoint + uptime monitoring (Uptime Kuma) Code quality: Integration tests for critical flows Error tracking (Sentry) TypeScript strict mode + fix all types Resilience: Graceful shutdown handling Automated DB + upload backups Fail2ban for SSH security Runbook with restart/deploy commands

🧰 Tech Stack & AI Tools

🤖 AI Reviewer Feedback

You demonstrated strong problem‑solving skills by overcoming many deployment hurdles and delivering a functional full‑stack app. To boost your score, automate environment setup (e.g., dotenv, DB migrations) and add basic tests and documentation so future deployments are smoother.

💬 Leave a Quick Review

Log in to rate and review this project.