Espas.you — interactive prototype

A coded, case-study prototype of Espas.you, a trust-first rental app for the Philippines. Tenants build a Tenant Reliability Score; landlords review verified applicants. Built in React from the Figma hi-fi (Espas.you V2, page Wireframe and Prototype), so the motion, states and data that a static prototype can only fake behave for real here.

Live: espas-you-prototype.vercel.app · Design: Figma file

What's in it

Journey	Screens
Entry	Splash · Start · Sign-in options · Log in · Sign up
Tenant onboarding	Role fork · Location · Preferences & needs · Interests · Notifications · Reliability Score · You're all set
Discovery	Dashboard · Map search · Filters · Active listing sheet · Listing detail
Application	About you · Work & income · Documents · Review & submit · Sent
Inbox & account	Favorites · Applications · Messages · Chat thread · Account · Application status
Landlord	Basic info · Emergency contact · Verify identity + ID scan · Notifications · Trusted tenants · Dashboard · Review applicant · Decision

One shared state, both sides. Apply as Juan in the tenant journey, switch to the landlord journey and he appears on Shiela's dashboard with a New badge. Approve or decline him there, and the decision flows back to the tenant's application status, inbox and account badge. State persists in localStorage; Reset demo data in the side panel clears it.

Motion system

The prototype's own transition conventions, implemented as a small screen-stack navigator (src/nav/Navigator.tsx):

Intent	Transition
Forward / next step	Push left · 350 ms · ease-out (with an iOS-style parallax and dim on the covered screen)
Back	Reverses whatever opened the screen
Lateral tab switch	Smart animate · 300 ms · ease-in-out (shared layoutId elements morph, such as the dashboard search bar into the map search bar)
Overlay / success	Dissolve · 250 ms · ease-out

Microinteractions include segmented progress fills, floating labels and inline validation, a dual-thumb budget slider, a month-paging calendar, chips that re-flow the feed, heart pops with toasts, draggable map and listing sheets, upload progress rings, self-drawing checkmarks, a laser ID scan, a count-up score badge and confetti. Clicking anywhere inert on the phone flashes its hotspots, as in Figma's presentation mode. prefers-reduced-motion is respected.

Stack

React 19 · TypeScript · Vite · Motion · plain CSS with design tokens mirrored 1:1 from the Figma variables (src/styles/tokens.css).

src/
  nav/        screen-stack navigator + transition variants
  state/      shared tenant ↔ landlord store
  data/       mock content (same seed as the Flutter app and Content Data stub)
  components/ chrome, controls, inputs, feed pieces
  screens/    auth · onboarding · tenant · apply · inbox · landlord
  shell/      case-study frame: device, journey switcher, screen index

All imagery and icons are exported from the Figma file into public/figma/ (scripts/fetch-assets.mjs), with rasters converted to WebP (scripts/optimize-images.mjs).

Run it

npm install
npm run dev

npm run build outputs a static site in dist/.