Frontend Engineering · 2026
Airbnb Clone
A desktop-first recreation of an Airbnb property listing interface developed from a supplied visual reference. The implementation covers the primary listing experience, image gallery, Photo Tour, full-screen lightbox, navigation states, and accessibility-focused interaction behavior.
ROLE
Frontend development · UI recreation · Interaction engineering · Accessibility
STACK
Next.js · React · TypeScript · Tailwind CSS · Playwright · axe-core · Vercel
OUTCOME
Recreated a complex production-style interface from a visual reference while preserving layout accuracy and interaction quality. Built a complete Photo Tour and 43-image lightbox experience with keyboard navigation, focus management, accessibility handling, and automated Playwright testing.
PROBLEM
What needed solving
Reproducing an established production interface requires more than matching colors and typography. Layout proportions, image presentation, interaction states, keyboard behavior, overlays, focus handling, and navigation all need to behave consistently while remaining maintainable.
APPROACH
How I approached it
I broke the interface into reusable React components and reproduced the page structure, spacing, typography, image layout, and interaction states in Next.js. I then built the Photo Tour and full-screen lightbox as dedicated interaction flows, including previous and next controls, keyboard navigation, Escape handling, focus trapping and restoration, reduced-motion support, and automated accessibility checks.
ENGINEERING
Implementation highlights
KEY DECISIONS
Trade-offs and choices
Component-driven interface
Split the listing experience into reusable components instead of building the entire reference page as one monolithic view.
Dedicated Photo Tour
Separated the expanded gallery experience from the primary listing page to keep navigation and state easier to manage.
Accessible lightbox
Added keyboard navigation, Escape handling, focus trapping, and focus restoration so the image viewer works beyond pointer interaction.
Automated accessibility checks
Used Playwright with axe-core to validate important interaction and accessibility behavior.
Desktop fidelity first
Prioritized accurate reproduction of the supplied desktop reference while maintaining robust browser interactions.
Interaction-aware motion
Added reduced-motion handling so transitions respect user accessibility preferences.
ENGINEERING SUMMARY
What this project is built on.
TECHNOLOGY
Next.js · React · TypeScript · Tailwind CSS · Playwright · axe-core · Vercel
ROLE
Frontend development · UI recreation · Interaction engineering · Accessibility
OUTCOME
Recreated a complex production-style interface from a visual reference while preserving layout accuracy and interaction quality. Built a complete Photo Tour and 43-image lightbox experience with keyboard navigation, focus management, accessibility handling, and automated Playwright testing.
LINKS
NEXT PROJECT
Full-stack application
Compliance Tracker
A responsive compliance workspace for clients, tasks, deadlines, filtering and lightweight analytics.