Stellar
A STAR story formatter that turns messy career stories into clear Situation, Task, Action, Result narratives.
The Problem
Everyone tells you to use the STAR method for interviews, performance reviews, and resume bullets. Situation, Task, Action, Result. Simple enough. But in practice, people dump a wall of text and can't pull apart what happened from what they actually did. The format is easy to understand, hard to do well.
The Insight
This is a good use case for a model because the format is fixed. The job isn't to invent new content, it's to separate a messy story into context, challenge, action, and result. With a tight prompt and a schema, the output stays consistent without sounding canned.
The Solution
Stellar is a single-page app where you paste your raw story and get back a clean STAR narrative. No login, no onboarding. Just a textarea, a formatting pass, and a result you can copy straight into interview prep or review notes.
How It Works
-
Step 01
Paste the messy version
The user drops in the story as they remember it instead of trying to pre-format it by hand.
-
Step 02
Structure the narrative
The model sorts the story into a consistent STAR shape with clear boundaries between context and action.
-
Step 03
Review the sections
The app returns a labeled output that is easy to scan, edit, and reuse in different professional settings.
-
Step 04
Copy the final version
The result is ready to paste into a resume, performance review, or interview prep doc with one click.
Architecture
Frontend
Next.js 16 with React 19, Tailwind CSS 4, and Radix UI, wrapped in a simple single-page interface.
AI Layer
Vercel AI SDK v6 uses a Zod schema to return typed STAR output from OpenAI without extra parsing logic.
API Design
One route, POST /api/format-star, handles the transformation and enforces the expected response shape.
Deployment
Vercel handles deploys and analytics. There is no database, no auth, and no long-lived server state.
Before and After the Formatting Pass
Raw story
A single block of memory, context, and detail where the useful parts are mixed together.
- Context and action are blended together
- The actual result can get buried at the end
- Hard to scan or retell under pressure
Structured STAR output
Build Process
I used v0 to generate the first Next.js shell and UI. After that I tuned the route to use the @ai-sdk/openai provider locally and rewrote the prompt so the output stayed concise while keeping the user's voice.
The whole app is under 300 lines of custom code: three components (page.tsx, story-input.tsx, star-result.tsx) and one API route.
Key Design Decisions
- Structured output over streaming: Using a Zod schema with
Output.object()means the AI always returns valid STAR data. No regex parsing, no broken JSON. - 50-character minimum: A light guardrail that nudges users to add enough detail for the AI to work with.
- Copy-to-clipboard: The main action after formatting. One click copies the full story as plain text, ready to paste into a resume or interview prep doc.
- No login required: Stories stay in memory only. Nothing is stored.
- Serif + sans-serif typography: Playfair Display for headings gives it an editorial feel. Inter for body text keeps things clean.
Tech Stack
Show the tools used on this build
What It Demonstrates
- Structured output: The STAR format is enforced at the schema level, so the result is predictable without post-processing.
- Prompt tuning: The model keeps the user's voice while still producing a clean interview-ready structure.
- Tight product scope: The build solves one clear formatting problem without adding friction around it.
Browse more case studies
Need a focused AI tool for one painful workflow?
Stellar shows the kind of small, sharp tool I like building when one annoying task can be cleaned up with the right prompt and schema.