DEV Community

Cover image for 🚀 Deploying My Full-Stack App: From Localhost to Live
Karan
Karan

Posted on

🚀 Deploying My Full-Stack App: From Localhost to Live

#fullstack #mongodb #node #beginners

Hey everyone! 👋
Picking up right from where we left off — both the frontend and backend of my project were working beautifully on my local system.
All that was left was to deploy everything to the real world… where the real magic (and bugs 😅) happen.

🌐 Deployment Setup

Frontend (GitHub Pages)
I took the straightforward route and deployed my frontend using GitHub Pages. The process was smooth, and the site was up and running almost instantly. No major issues here since it was a static frontend.

The real challenge? The backend.

☁️ Backend Deployment (Render)

I used Render to deploy my backend because:

  • It’s beginner-friendly
  • Free to use
  • I had prior experience with it

Initially, my backend was connected to local MongoDB (Compass).
Once deployed, everything stopped working.

🐛 The Problem (Symptoms)

Clicking Generate did absolutely nothing:

  • No new quote
  • No background change
  • No errors on the UI

That meant one thing:

quotes was empty, so newQuote() exited immediately.

if (quotes.length === 0) return;
Enter fullscreen mode Exit fullscreen mode

So the real question became:

Why was fetchQuotes() no longer populating data?

🔍 Debugging the Issue

Here’s the logic trail I followed:

  1. Frontend now points to Render backend
  2. Render backend CANNOT access local MongoDB (the part I had missed)
  3. API returns an empty response
  4. Frontend correctly refuses to render empty data

So technically… nothing was “broken”.
The system was doing exactly what it was told to do.

✅ The Real Fix: MongoDB Atlas

The solution was to move from local MongoDB to a cloud-based database. I:

  • Set up MongoDB Atlas
  • Created a new cluster
  • Seeded the database with sample quotes
  • Connected Atlas to Render using environment variables

MONGO_URI = mongodb+srv://quoteAdmin:YOUR_PASSWORD@.../quoteGeneratorDB
PORT = 5000
Then I updated the frontend API_URL:

let API_URL = "http://localhost:5000";
Enter fullscreen mode Exit fullscreen mode

⬇️⬇️⬇️

let API_URL = "https://YOUR-RENDER-URL.onrender.com";
Enter fullscreen mode Exit fullscreen mode

🐛 Debugging (The Second Heartbreak💔)

After connecting MongoDB Atlas, Render, and updating all the environment variables, I was confident everything should work.

But… clicking Generate still did nothing.
Same symptom. Same silence. Honestly, it was heartbreaking.

At this point, I had no idea what was wrong because everything was technically correct.

To dig deeper, I directly visited my API endpoint in the browser:
https://quote-generator-5qei.onrender.com/quotes

I saw the words Cannot GET and assumed it was an error and something was wrong with my code, but after repeatedly checking my console and recieving no errors -
That’s when it finally clicked.

There was nothing wrong with my code, deployment, or API.
I had simply forgotten to seed data into MongoDB Atlas. All my quotes were still sitting in my local database.

A painful but valuable lesson:

Sometimes, the bug isn’t in the code — it’s in the data.

🎉 Final Result

And… voilà! 🎉
Once the database was seeded with sample quotes and connected properly:

  • Quotes started loading
  • Generate button worked
  • Categories functioned perfectly
  • Full-stack data flow was live

This felt like the moment the project officially became real.

🔮 What’s Coming Next

Next up:

  • 🧠 AI integration ideas (brief planning)
  • ✨ Generating original quotes
  • 🎯 Personalization & scalability

See you in the next post — stay tuned! 🚀

Top comments (0)