🧠 Going Full Stack: Building the Backend & REST API

Source: Dev.to

Hey fellow developers! 👋
In my last post I focused on upgrading the frontend UI and UX. It looked much better, but it still lacked the full‑stack feel of a real application. This post is all about the backend — where things actually started getting serious.

Why Adding a Backend Was Necessary

Initially I wanted a backend to practice and improve my backend skills. 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 have been messy and unrealistic. With a backend the solution becomes clean and manageable.

Backend Setup & Structure

Stack

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

Project Structure

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

Schema Creation

The core of the backend is the quote schema:

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

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 and author are sent back.
5. The quote is displayed to the user.

Connecting Backend to Frontend

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

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

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

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

fetchQuotes();

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

Final Result (Locally)

Everything works perfectly on my local system:

• Quotes are fetched from the backend.
• Categories are filtered correctly.
• No more hard‑coded data.

All that’s left is 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

Stay tuned for the next update! 😄🔥