Full-Stack - lesson 3 | HackIndia Skills

Full-Stack - lesson 3 | HackIndia Skills | HackIndia

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>
  );
}

Talk to your own API

One real connection

What counts

Pick one route

Next.js example

Use AI carefully

Common mismatch

Do this now

Quick check