Stop 19 · Build Full-Stack Portfolio ProjectsProjects · 5/12

AI-Powered Application

Part of the Full Stack Developer Roadmap

In short

Calling an AI API takes five lines. Building a product around it, with good prompts, streaming answers, cost limits and saved results, is what makes a portfolio project stand out.

An app with a genuine AI feature at its core — not just a wrapper, but something where the AI integration is the actual product value, like a resume reviewer or content summarizer.

The purple blob and a small robot study a page with a magnifying glass while the robot marks it in red.

Think of it like this

A helpful senior with a red pen

You hand your resume to a sharp senior. They read it, mark five fixes in red and hand it back. You didn't need to know how they think, just what to give them and what to ask. Your app plays the middle person.

Watch it happen

A streamed resume review

Browser

Your API

AI model API

Database

POST /api/review

1/6The browser sends the resume text. It never talks to the AI provider directly.

The big ideas

What you need to know

Keys stay on the server

The AI API key lives in a server environment variable. A key in frontend code will be found and misused.

Limit cost per user

Cap input size, max output tokens and requests per day. One script can burn a month's budget overnight.

Stream the answer

Streaming shows the first words in about a second, instead of a spinner for twenty.

The AI must be the point

Pick a narrow job, like resume fixes for freshers, and design the prompt and UI around doing it well.

See it in code

Walk through the code

1import Anthropic from "@anthropic-ai/sdk";2const client = new Anthropic(); // reads ANTHROPIC_API_KEY, server side only3export async function POST(req: Request) {4  const { resume } = await req.json();5  const stream = client.messages.stream({6    model: process.env.AI_MODEL!, max_tokens: 1024,7    system: "You review resumes for Indian freshers. Give 5 specific, kind fixes.",8    messages: [{ role: "user", content: String(resume).slice(0, 20000) }],9  });10  const body = new ReadableStream({ async start(c) {11    stream.on("text", (t) => c.enqueue(new TextEncoder().encode(t)));12    const text = await stream.finalText(); c.close();13    await db.review.create({ data: { text } });14  } });15  return new Response(body, { headers: { "Content-Type": "text/plain; charset=utf-8" } });16}

1/4The SDK reads the key from the server environment. The browser never sees it.

A Next.js route handler that streams a model's answer to the browser and saves the full text at the end. Other providers' SDKs follow the same pattern.

Save yourself the pain