After countless hours of wrestling with deployment, I've finally settled on a hosting setup that just works. I want to share exactly how I deployed my personal portfolio and other full-stack projects without spending a single rupee.
This isn't theoretical - this is my actual live setup running right now.
My Tech Stack & Hosting Choices
Frontend: Next.js → Vercel
Backend: Express.js (Node.js) → Render
Database: MongoDB → MongoDB Atlas
Here's how everything connects in my specific case.
The Backend: Express.js on Render
I chose Render for my backend API, and it's been surprisingly smooth.
My Render Setup:
My backend lives at: https://personal-portfolio-cyz2.onrender.com
In Render's dashboard, I set these environment variables: - MONGODB_URI: My MongoDB Atlas connection string - PORT: 5000 (Render automatically provides the port, but I set a fallback)
The Cold Start Reality:
Yes, the free instance spins down after inactivity. The first API call might take 30-50 seconds. But once it's warm, it's plenty fast for a portfolio project. I just mention this when sharing my projects so people know what to expect.
The Frontend: Next.js on Vercel
Vercel feels like it was made for Next.js. The integration is seamless.
My Vercel Setup:
My frontend deploys to: https://personal-portfolio-it6tzz8ip-saransh-pachhais-projects.vercel.app/
But I have a custom domain pointing to it: https://www.saranshpachhai.com.np/
The Magic Environment Variable:
In Vercel, I set NEXT_PUBLIC_API_BASE_URL to my Render backend URL: https://personal-portfolio-cyz2.onrender.com
This lets my Next.js frontend know where to send API requests. The NEXT_PUBLIC_ prefix is crucial as it makes the variable accessible in the browser.
The Database: MongoDB Atlas
MongoDB Atlas has a generous free tier that's perfect for development:
512MB storage (plenty for personal projects)
Shared RAM
Easy connection string management
Lessons Learned The Hard Way
CORS is crucial: Don't forget to enable CORS in your Express backend, or your frontend can't talk to it.
Environment variables are case-sensitive: MONGODB_URI vs mongodb_uri matters!
The cold start is real: For important demos, I sometimes "wake up" my backend by hitting the API a few minutes before sharing the link.
Custom domains are worth it: Having saranshpachhai.com.np looks much more professional than the default Vercel/Render URLs.
Is This Setup Production Ready?
For personal projects, portfolios, and small demos? Absolutely.
For a high-traffic SaaS business? Probably not - you'd want the reliability of paid plans.
But for showing what you can build? It's perfect.
Final Thoughts
This setup has let me deploy multiple full-stack projects without worrying about costs. The automatic deployments from GitHub mean I can focus on coding instead of DevOps.
If you're sitting on completed projects that aren't deployed yet, try this stack. It took me maybe 30 minutes to set up the first time, and now I can deploy new projects in under 10 minutes.
What are you waiting for? Get your projects out of localhost and into the world!