Breeze hired me for three contracts over six months, and my role grew each time. I started by building a live PDF resume editor, then designed and built a Chrome extension that wasn't in the original plan, and finally designed the job search and owned the architecture behind it.
- 01Three contracts over six months, each wider in scope than the last.
- 02Contract one: built the live PDF resume editor from the team's Figma designs, with an eleven-point ATS check.
- 03Contract two: designed and built a Chrome extension that wasn't in the original plan, in under three weeks.
- 04Contract three: designed the job search and owned the backend, with nine tables, 143 tests, and job sources behind one swappable interface.
- 05After my handoff the team took the extension to version 1.0, and their later search kept my caching, deduplication, and logging.
Timeline
Mar 2025 → Sep 2025 · Three contract phases
Role
Contract engineer → design & architecture owner
Technology
React Router v7, Supabase, WXT, Gemini
Platform
Web app + Chrome extension
3
Contracts, each wider in scope
9
Database tables designed
143
Backend tests written
The Outcome
How my role grew across three contracts
Breeze helps job seekers build resumes that pass applicant tracking systems, apply faster, and find jobs that fit their resume. Each contract gave me more responsibility than the last.
ImplementationEditor frontend
Phase 1 · Resume editor
Implementation
I built the frontend for a live PDF resume editor from their Figma designs.
ImplementationExtension app
DesignFigma designs
Phase 2 · Chrome extension
Design and implementation
They brought me back to design and build a Chrome extension, which wasn't in the original plan.
ImplementationSearch frontend
DesignSearch design
ArchitectureSchema, scrapers, API
Phase 3 · Job search
Architecture
I designed the search interface and owned the backend: database, scraping architecture, and API.
Resume Editor
Phase 1: a live PDF resume editor
The PDF preview updates as the user types in any section of the form. Templates and themes switch instantly, and an ATS score tracks eleven completeness fields. I organized the codebase with Feature-Sliced Design, which I studied in depth before adopting.
The editor is still the center of Breeze. These screenshots are from the live app today, after the team's later design updates.
Try It
Edit a resume, watch the page change
The editor, reproduced here as a demo. Type in any field and the page re-renders as you go, and the ATS panel re-checks eleven fields as the resume fills in.
Resume editor · live demo
Jordan Rivera
Product Designer
Experience
Product Designer
2023 - Present
Northwind Health
Redesigned appointment booking, cutting drop-off by a third. Built the team's first component library in Figma.
UX Designer
2020 - 2023
Contoso Retail
Led checkout research and shipped a one-page flow used by two million shoppers a month.
ATS Score
Good8/11
- Full Legal Namecomplete
- Phone Numbercomplete
- Email Addresscomplete
- Work Historycomplete
- LinkedIn Linkcomplete
- Career Objectivemissing
- Educationcomplete
- Backgroundmissing
- Skillscomplete
- Certificationsmissing
- Toolscomplete
Extension
Phase 2: a Chrome extension for job applications
Users were already pasting their resumes into ChatGPT to answer application questions. The extension puts that workflow in the browser, using the resume data they already keep in Breeze.
It shows each saved resume and cover letter field by field, each with a copy button. A Generate tab writes answers to application questions from the selected resume, at one, two, or three-plus sentences. When the 14-day trial ends, the tabs give way to an upgrade prompt. Before the high-fidelity designs, I researched each interface pattern (tabs, cards, filters, upgrade prompts) and documented why I chose it.
I built it in under three weeks, and the team took it to version 1.0 after my handoff.
Resumes, Cover Letters, and Generate tabs
Sign-in
An extension with no login screen
The extension borrows the session the user already has in the Breeze web app. The popup injects a small script into an open Breeze tab, reads the session token, and sends it with every request after that. The user never types a password into the extension.
Popup
React · Zustand
Breeze tab
Content script
Supabase
Postgres REST
Edge function
Gemini 2.0 Flash
01Inject a script into the open Breeze tab
extension scripting API
02Hand back the session token
from the signed-in web app
03Fetch resumes and cover letters
Bearer token on every request
04Rows come back and are saved
kept in extension storage
05Send the question, length, and resume
06Return the answer as checked JSON
profanity filter · required fields
- 01
Popup → Breeze tab
Inject a script into the open Breeze tab
extension scripting API
- 02
Breeze tab → Popup
Hand back the session token
from the signed-in web app
- 03
Popup → Supabase
Fetch resumes and cover letters
Bearer token on every request
- 04
Supabase → Popup
Rows come back and are saved
kept in extension storage
- 05
Popup → Edge function
Send the question, length, and resume
- 06
Edge function → Popup
Return the answer as checked JSON
profanity filter · required fields
My first version routed state through a background script over an RPC layer. Once it was clear that state only flowed one way, from the page into storage, I removed that layer and let the popup read and write storage directly.
Job Search
Phase 3: job search, designed and built
I designed the search page in three panels (filters, results, and job details) and then built it. Each listing carries a HIGH, MED, or LOW rating for how well it matches the user's resume, and the detail panel's “Breeze Breakdown” lists the matching keywords. I built the ratings into the interface against mock data. Computing them from a real resume was next when the work stopped.
Trace a Search
Follow one search through the backend
Every search writes its stages to the logs under one trace ID. This is that trace, drawn as a waterfall. Run a search to watch the cache miss and the board get fetched through the proxy, run it again to see the shared cache answer, then ask for the next page to see the read resume where it stopped.
Title
Location
No trace yetRun a search
Pick a title and a location, then search. Run the same search twice, then try the next page.
The order of the stages, the cache rules, the backoff, and the dedupe key follow the code. Timings, which proxy regions get blocked, and the number of listings are simulated.
Architecture
Built so a job source can be swapped out
Every job board sits behind one interface. Past the sources, the caching, deduplication, page cursors, and logging never need to know where a job came from. After my handoff, job boards kept catching the scraping proxies as bots, which made results unreliable no matter how the pages were parsed. The team moved to a commercial job-data API, and because only the source layer had to change, their new search function kept my cache, deduplication, logging, and input validation. Use the toggle to see what carried over.
August 2025: scrapers behind one interface. One board is live; two more are built but switched off.
Sources
Swappable
Contracts
What the core depends on
Shared services
Every source runs through these
Postgres
9 tables
cached searcheslistingslisting detailssearch ↔ listing linkspage cursorssearch historyrecently viewedrecommendationsscrape logs
One per job board
Source
The core depends only on these interfaces. A job board is a class that implements Source; fetching, parsing, and logging come in through the constructor, so each piece can be tested with a fake.
Sketch · what the core depends on
// The core only knows these shapes.
interface Source {
readonly board: string;
search(query: SearchQuery): Promise<Listing[]>;
}
interface Fetcher {
get(url: string): Promise<Page>;
}
interface Logger {
event(name: string, detail?: Record<string, unknown>): void;
}143 backend tests across 18 files cover the sources, parsers, fetcher, logger, and salary parsing. Parsing for the other two boards, listing expiry, and the recommended-jobs feed were still on the list at handoff.
The Stack
What each contract added
React Router v7, shadcn/ui, Tailwind, WXT, and Zustand were all new to me when the work started. I read the documentation for each before writing production code with it.
01 · Resume editor
Built from their designs
- React Router v7Web app, SSR
- shadcn/uiComponent system
- Tailwind CSSStyling
02 · Chrome extension
Designed and built
- FigmaInterface design
- WWXTExtension framework
- ZZustandPersisted state
- GeminiAnswer generation
03 · Job search
Designed, built, and architected
- FigmaInterface design
- SupabasePostgres, edge functions
- Google PlacesLocation normalization
Working Together
Starting with a small project
You can start with a small, clearly defined project and decide from there. With Breeze, the first contract led to design work, and the design work led to owning the architecture. The structure I set up in the first phase also made the third phase easier to manage.