ExactFitResume
Resume-builder UI demo: live preview and wizard. AI, PDF, auth, and billing are simulated.
- Role
- Frontend Product Engineering
- Type
- Frontend product demo
- Client
- Personal · Portfolio Demo
- Status
- Public demo
Outcome
Shipped a credible SaaS-shaped editor without implying a production AI/PDF/billing backend.
A real resume SaaS needs auth, CRUD, models, PDF, and billing. For a portfolio piece the job was to prove product thinking and a split-pane editor without pretending local state is a platform.
App Router routes under src/app; page UIs under src/views so Next never treats them as Pages Router. Session state is React local state. “AI” actions flip loading UI only — no model calls.
- Frontend
- src/app for routes/layout/SEO; src/views for full-page UIs.
- Backend
- None.
- Databases
- None.
- Auth
- Simulated in the UI.
- Deployment
- Vercel frontend only.
- Marketing landing (features, how-it-works, FAQ, CTAs)
- Template gallery and in-session dashboard CRUD
- Split-pane editor: live preview, design tokens, target-job panel, mobile edit/preview switch
- Four-step profile wizard
- Metadata, sitemap, robots; labels, focus-visible, live regions
Challenge
Polished SaaS feel without lying about backends.
Decision
Document real vs mocked in the product and in this write-up.
Implementation
Demo copy in the UI. AI, PDF, payments, and cross-refresh persistence are simulated.
Result
A recruiter can use the editor and still know what is fake.
Challenge
Form state and live preview had to stay in sync on desktop and mobile.
Decision
One session tree; no dual sources of truth.
Implementation
Single useState model; preview renders from it. Mobile uses an explicit switcher instead of a cramped dual pane.
Result
Preview cannot diverge from the form in a given session.
Challenge
Dependency bloat and Pages Router collisions from view folders.
Decision
Delete unused UI dumps; keep views out of src/pages.
Implementation
Removed unused shadcn dump and heavy deps (~102 kB shared first-load JS in that production build). Page UIs in src/views/.
Result
Smaller first load; Next does not treat views as pages.
No Redux / React Query / server actions
There is no server. Extra libraries would imply architecture that is not there.
Alternative. Fake an API with MSW or a tiny backend.
Tradeoff. Refresh loses data. Honest for a demo; wrong for a real product.
- BuiltEntire frontend demo: routes, editor, marketing pages, SEO/a11y basics
- Personal portfolio demo — not client work. Not an AI product.
Public source and live demo. First-load JS was reduced by removing unused deps in that repo. No user metrics.