Local-first interview practice with privacy-preserving coaching and optional on-device media analysis.
FairScreen is a browser-based interview practice application built to help candidates improve the substance of their answers without treating facial expressions, gaze, movement, speaking style, or other behavioural signals as evidence of confidence, honesty, personality, or job competence.
Users can prepare from role and job context, practise with typed or recorded answers, review transcripts before analysis, receive question-aware content coaching, save sessions locally, and revisit reports without creating an account or sending practice data to a FairScreen application server.
Open the live demo · Privacy & responsible AI · Technical architecture
Home — the product explains what it measures, what remains optional, and which inferences FairScreen deliberately refuses to make.
Practice setup — configure role and company context, question count, optional résumé input, timing, and media preferences before an interview begins.
Answer review and coaching — review the transcript first, then receive evidence-based feedback focused on the content of the answer rather than appearance or inferred traits.
Saved sessions — completed and unfinished practice sessions persist locally and can be searched, resumed, reviewed, renamed, exported, or deleted by the user.
Role / job context + optional résumé
↓
Question selection
↓
Optional device check
↓
Practice answer
↓
Review the transcript
↓
Deterministic content coaching
↓
Save locally / review / practise again
- Role- and context-aware practice setup
- Local question generation from a deterministic template catalogue
- Optional résumé import with local PDF, DOCX, and text extraction
- Typed-answer mode with no microphone or camera required
- Optional microphone and camera workflows with explicit user control
- Preparation and answer timers with accessibility alternatives
- Multiple attempts and answer review before continuing
FairScreen keeps the reviewed transcript at the centre of coaching. Users can correct recognition errors before analysis, and manual text remains available when speech recognition is unavailable or unwanted.
The deterministic answer-analysis layer looks for useful interview-answer evidence such as structure, specificity, supporting detail, outcomes, role relevance, and missing context. It does not use video observations to change the content assessment.
Sessions are persisted in browser storage through IndexedDB. The saved-session workflow supports completed and unfinished sessions, search and filtering, resuming, reviewing, renaming, export, and deletion. Recordings are saved only when the user explicitly chooses to retain them.
When enabled, FairScreen can use browser media APIs and an on-device MediaPipe Face Landmarker worker to describe limited video-call conditions, such as broad framing, brightness, face presence, and near-camera orientation.
Those observations are deliberately separate from answer-content coaching. Raw frames and face landmarks are transient and are not part of the persistence model.
Browser speech recognition is also optional. Depending on the browser, recognition may use a browser-vendor service, so FairScreen discloses that boundary before use and always provides a manual alternative.
FairScreen is a personal practice tool, not a hiring assessment system. It does not rank candidates or make employment decisions.
The product deliberately refuses to infer:
- emotion or personality
- honesty, deception, or integrity
- confidence or enthusiasm
- employability or job competence
- identity or demographic characteristics
This separation is enforced in both product copy and architecture: answer-content analysis cannot receive video metrics, optional capabilities fail independently, and media data is kept out of the persisted domain model.
React UI
↓
Feature workflows / interview state machine
↓
Domain services + typed ports
↓
Browser and storage adapters
├── IndexedDB
├── MediaDevices / MediaRecorder
├── Web Speech, when explicitly enabled
└── Web Worker → MediaPipe, when explicitly enabled
The MVP is a static application with no FairScreen application server. Practice sessions, reviewed transcripts, preferences, and explicitly saved recordings remain under the user's browser profile by default.
Key architectural constraints include:
- no video metrics in answer-content analysis
- no raw frames, audio buffers, or face landmarks in persistence models
- browser APIs isolated behind typed ports
- recording persistence requires a separate user action
- static and camera-free routes do not request media
- optional media capabilities degrade without blocking text-based practice
Camera and microphone use are optional rather than prerequisites. The application includes keyboard-accessible flows, visible focus handling, skip navigation, responsive reflow, reduced-motion support, forced-colour compatibility, print presentation, adjustable text/timing preferences, and manual transcript alternatives.
Browser smoke tests include axe accessibility scans and 320px viewport coverage for core workflows.
| Area | Implementation |
|---|---|
| UI | React 19 · TypeScript · React Router |
| Build | Vite 8 · Tailwind CSS 4 |
| Validation | Zod |
| Persistence | IndexedDB |
| Local document import | PDF.js · Mammoth |
| Optional video analysis | MediaPipe Tasks Vision · Web Worker |
| Browser media | MediaDevices · MediaRecorder · Web Audio · Web Speech |
| Unit/component testing | Vitest · React Testing Library |
| Browser/accessibility testing | Playwright · axe-core |
| Delivery | GitHub Actions · GitHub Pages |
The main GitHub Actions workflow runs the repository's quality gates on pushes and pull requests:
Format check
↓
Lint
↓
Type check
↓
Unit + component tests
↓
Prohibited-language scan
↓
Secret scan
↓
Dependency + source audit
↓
Production build
↓
Playwright browser smoke + accessibility checks
The browser suite exercises production routes, focus management, responsive layouts, local résumé import, interview state transitions, transcript coaching, IndexedDB behaviour, and the production video-analysis worker.
Use the Node version pinned in .nvmrc.
npm ci
npm run devFor the full repository quality gate:
npm run checkFor production browser tests:
npm run browserBuild the static production bundle with:
npm run buildsrc/
├── app/ routing and application composition
├── domain/ models, ports, interview logic, analysis rules
├── features/ setup, practice, reports, saved sessions, settings
├── infrastructure/ browser, media, analysis, persistence, import adapters
├── pages/ top-level education and policy pages
├── shared/ shared UI and utilities
└── styles/ application styling
tests/
└── browser/ Playwright + accessibility workflows
docs/
└── spec/ product, UX, architecture, privacy, QA, and decision docs
FairScreen includes a deliberately detailed specification set for the product and its safety boundaries:
- Executive brief
- Product requirements
- UX specification
- Technical architecture
- Domain models
- Measurement specification
- Privacy and responsible-AI review
- Testing and QA
- Decision log
FairScreen is a portfolio-scale personal interview-practice application. It demonstrates client-side application architecture, deterministic analysis, privacy-aware media handling, local persistence, document processing, accessibility, browser testing, and responsible boundaries around computer-vision-assisted features.
It is intentionally not an employer screening tool, candidate-ranking system, emotion detector, deception detector, or covert real-time interview assistant.