🧠 Going Full Stack: Building the Backend & REST API

Hey fellow developers! 👋

In my last post, I mainly focused on upgrading the frontend UI and UX. While it looked much better, it still lacked the full-stack feel of a real application.
So this post is all about the backend — where things actually started getting serious.

❓ Why Adding a Backend Was Necessary

Initially, I wanted to add a backend to practice and improve my backend skills. But from the app’s perspective, a backend was essential for:

• 📚 Large amounts of quote data
• 🤖 Future AI scalability
• 🗂️ Category-based filtering

Handling all of this purely on the frontend would’ve been messy and unrealistic.
With a backend? Clean and manageable.

⚙️ Backend Setup & Structure

I used a simple and efficient stack:

• Node.js + Express → REST API
• MongoDB (Compass locally) → Database
• Render → Backend deployment (more on this next post 👀)

📁 Project Structure
/
├── index.html
├── style.css
├── script.js
├── backend/
│ ├── server.js
│ └── models/
│ └── Quote.js
└── README.md

🧩 Schema Creation

At the core of the backend was the quote schema:

const quoteSchema = new mongoose.Schema({
  text: { type: String, required: true },
  author: { type: String, required: true },
  category: { type: String, required: true }
});

This schema made everything possible.

Here’s how it works:

1. A category button is clicked on the frontend
2. A request is sent to the backend
3. The backend filters quotes by category
4. The text + author are sent back
5. The quote is displayed to the user

This is where the magic of schemas really clicked for me ✨

🔗 Connecting Backend to Frontend

Once the backend was ready, it was time to connect everything.

Inside index.js, I created a fetchQuotes() function:

async function fetchQuotes(category = null) {
  try {
    let url = category
      ? `${API_URL}/quotes/category/${category}`
      : `${API_URL}/quotes`;

    const res = await fetch(url);
    quotes = await res.json();

    usedQuotes = [];
    usedColours = [];
    newQuote();
  } catch (err) {
    console.error("Backend not available:", err);
  }
}

fetchQuotes();

For now, API_URL points to localhost.
Later, this will switch to a deployed backend URL — which leads perfectly into the next post 👇

✅ Final Result (Locally)

And… voila! 🎉
Everything was working perfectly on my local system:

• Quotes fetched from the backend
• Categories filtered correctly
• No more hardcoded data

All that was left was deployment.

🚀 What’s Coming Next

In the next post, I’ll cover:

• 🌐 Frontend deployment → GitHub Pages
• ☁️ Backend deployment → Render
• 🧪 Live-data debugging
• 🔄 MongoDB Compass → MongoDB Atlas

Be stoked for the next update — see you soon! 😄🔥