README

Airbnb UK Homepage Clone

A pixel-perfect clone of airbnb.co.uk built with React/TypeScript and Go/GraphQL. The entire UI is composed from 63 independent components following Atomic Design, each with its own Storybook story and CSS Module.

Homepage

Quick Start

bash

# Backend (GraphQL API)
cd backend && go run ./cmd/server        # http://localhost:8080

# Frontend (React app)
cd frontend && npm install && npm run dev # http://localhost:5173

# Storybook (component library)
cd frontend && npm run storybook         # http://localhost:6006

Stack

Layer	Tech
Frontend	React, TypeScript, Vite, CSS Modules, Apollo Client
Backend	Go, gqlgen, hexagonal architecture
Components	63 components across atoms/molecules/organisms/templates/pages
Testing	Vitest (79 unit tests), Playwright (visual regression)
Docs	Storybook v10 with stories for every component

Component Architecture

The UI follows Atomic Design — small, isolated pieces that compose into full pages:

Atoms (27) — Logo, Badge, StarRating, Icons
Molecules (17) — SearchBar, BookingCard, NavTabs, PhotoGrid
Organisms (14) — Header, Footer, ListingCard, InspirationSection
Templates (2) — HomeTemplate, RoomTemplate
Pages (3) — HomePage, RoomDetailPage, MockPage

All styling flows through design tokens in frontend/src/styles/variables.css. Change the brand colour, border radii, or shadows in one file and every component updates.

Documentation

For a detailed walkthrough of the component system with screenshots of every tier, see the Component Architecture Guide.

Project Structure

shell

frontend/src/components/   63 React components (Atomic Design)
frontend/src/styles/        Design tokens and global CSS
frontend/.storybook/        Storybook config
backend/internal/           Go backend (domain/ports/application/adapters)
e2e/                        Playwright tests and screenshot capture
docs/                       Guide and component screenshots