“The unit needed a new internal platform for biometric ID card issuance. The design was done. The war moved the team to home office. The usual handoff rhythm broke - and a designer who had never shipped production code built the entire frontend himself.”
Astra is an internal platform for an IDF intelligence unit, handling identity verification, biometric data collection, and ID card issuance across two user roles - operators who run issuance flows and admins who manage the system. It runs on a closed internal network on 1920×1080 workstations with no internet access at runtime. The system manages a five-step issuance wizard, a bulk processing flow, a dedicated biometric acquisition flow, and a full admin module. I designed the complete UX and, for the first time, built the entire React frontend - working from Figma through to a production-ready codebase without a developer in the loop.
How a designer built the frontend.
Designing for the abnormal states
The five-step wizard from identity check to card issuance is straightforward on the happy path. The real design work was in the edge cases: seven distinct abnormal states - no photo in the system, face recognition failure, unpaid fees, fingerprint errors, prohibitions, admin overrides. Each state needed its own flow. Several share a common exclusion modal triggered by an admin code. The design constraint was sharp: make the normal path obvious, make the abnormal path safe. Never allow a wrong action to feel easy. Never make a legitimate override feel blocked. The state map was the design artifact - every screen was a consequence of it.
Biometrics as a two-panel state machine
The biometric acquisition step - fingerprints on the left, face camera on the right - looks simple in a wireframe. In implementation it became a layered state machine: face recognition cycles through idle, scanning, success, and failure; fingerprint capture runs three sequential sets; either side can enter an error state that routes into the shared exclusion flow. Each state had to feel distinct without the operator learning a new mental model for each variation. The visual design was derived from the state map - not the other way around. The face detection circle, the progress ring, the frosted overlay on completion - each one is a direct translation of a state transition, not a styling choice.
The designer as frontend developer
The war moved the team to home office in March 2026. The handoff rhythm that depends on physical proximity - design, spec, hand to dev, wait, review - stopped working. Using Claude Code as the implementation bridge, I set up a CLAUDE.md with the team's standards: React 19 + TypeScript, styled-components in object syntax, Tailwind for layout utilities, RTL Hebrew-first, PR-based GitHub flow. From that foundation I built every screen myself. The dev team kept full ownership of backend - architecture, APIs, security. The frontend stopped being a handoff queue and became a direct responsibility. Every component followed team standards without the dev team needing to review my approach before I could start.
Coding to the team's standard, not just to spec
Before writing a line, I set up a CLAUDE.md file with the dev team's conventions - stack, naming, file structure, Git flow. Everything I built had to meet the same bar as code a senior developer would submit. The team reviewed my PRs the same way they would review any other PR. No special allowances for "designer code." The output had to be indistinguishable from theirs - and it was.
What we shipped.
A complete internal platform: the home screen, regular issuance wizard (5 steps, 7 abnormal states), bulk issuance flow, dedicated biometric acquisition, and full admin system. Delivered as a production-ready React codebase running on a closed internal network. The system handles the full lifecycle from identity verification through biometric capture to card issuance - and every edge case in between.
What it changed.
The war broke the handoff habit. Working from home, with a dev team on a different schedule, waiting for implementation was not an option. The CLAUDE.md file was not a document - it was a contract between me and the codebase. Every component I built followed the team's standards from the first commit. No ping-pong. No visual review cycles. No "the margin is 2px off" comments. The dev team received frontend code that was already correct - by both design and development standards - and could focus entirely on backend. The traditional handoff cycle for a system this size would have taken at least a month of developer time just in visual review, corrections, and re-implementation. That month stayed in the product.
Kidon
A multi-target missile pod, fired from a tablet up to 10 km away