Full-Stack - lesson 3 | HackIndia Skills

Key point

One real connection

A full-stack repo needs your UI to talk to code you wrote on the server side.

For a weekend project, one useful API route is enough. It can list events, save feedback, check a coupon, or return a user profile.

What counts

Do not call only a public API from the browser and call it full-stack. That can be a good feature, but it does not prove you built a backend.

Your own API route should sit inside your repo. The frontend should fetch it. The page should show data that came from that route.

Your to-do

Pick one route

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Choose one screen that needs data, like projects, notes, orders, or feedback.
Name the route with a noun, like /api/projects or /api/feedback.
Start with GET if you only need to display data.
Use POST only if the user submits something.
Keep the response small so it is easy to debug before submission.

0 of 5 done

Example

Next.js example

In Next.js App Router, place your route at app/api/projects/route.js. Your page can then call /api/projects from the browser.

This is enough to prove the UI is talking to your own backend route.

// app/api/projects/route.js
export async function GET() {
  const projects = [
    { id: 1, name: "Mess Menu", status: "Live" },
    { id: 2, name: "UPI Splitter", status: "Building" }
  ];

  return Response.json({ projects });
}

// app/page.js
"use client";

import { useEffect, useState } from "react";

export default function Home() {
  const [projects, setProjects] = useState([]);

  useEffect(() => {
    async function loadProjects() {
      const res = await fetch("/api/projects");
      const data = await res.json();
      setProjects(data.projects);
    }

    loadProjects();
  }, []);

  return (
    <main>
      <h1>Campus Builds</h1>
      <ul>
        {projects.map((project) => (
          <li key={project.id}>
            {project.name} - {project.status}
          </li>
        ))}
      </ul>
    </main>
  );
}

Tip

Use AI carefully

You can ask ChatGPT or Gemini to write the fetch code for your stack. Give it your folder structure and the exact route name.

Check three things in the answer: the route file is in the right folder, the HTTP method matches your use case, and the frontend reads the same JSON keys that the API sends.

Common mistake

Common mismatch

Beginners often return one shape and read another. For example, the API sends { projects: [...] } but the UI tries data.items.

Open the browser console and the Network tab. Click your API request. Check the response body before changing random code.