# kchakhalyan/airbnb-clone architecture

> Architecture diagram of the GitHub repository kchakhalyan/airbnb-clone, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-24). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/kchakhalyan/airbnb-clone
- Repository: https://github.com/kchakhalyan/airbnb-clone

## Overview

1. This repository is a Next.js 13 “App Router” full-stack marketplace clone modeled after Airbnb. The architecture is split between server-rendered route segments in `app/`, client-side interactive UI components, and a small set of REST-style route handlers under `app/api/`.

2. The core persistence layer is Prisma backed by MongoDB. `prisma/schema.prisma` defines the domain model, while `app/libs/prismadb.ts` provides the Prisma client used by server code and API handlers. All listing, reservation, favorite, and user records flow through this layer.

3. Authentication is handled by NextAuth in the legacy Pages Router endpoint `pages/api/auth/[...nextauth].ts`, with Google and GitHub provider credentials configured via environment variables. This auth boundary is consumed by both server-side data helpers and client-side UI state, and `middleware.ts` likely protects or redirects authenticated routes.

4. The app routes in `app/` represent the main product surfaces: home (`app/page.tsx`), listing detail pages (`app/listings/[listingId]`), user trips (`app/trips`), reservations (`app/reservations`), host properties (`app/properties`), and favorites (`app/favorites`). These pages are composed from server-side data loading plus interactive client components.

5. Data fetching is centralized in `app/actions/` with helpers such as `getCurrentUser`, `getListings`, `getListingById`, `getFavoriteListing`, and `getReservation`. These act as the server-side read layer and reduce duplicated Prisma/auth logic across pages and components.

6. Write operations are exposed through `app/api/` route handlers. There are dedicated endpoints for registering users, creating and reading listings, toggling favorites, and creating or fetching reservations. Dynamic route segments like `[listingId]` and `[reservationId]` map directly to entity-specific operations.

7. The UI is organized into reusable presentation components under `app/components/`, with subdomains for navbar, modals, listings, and form inputs. This includes generic building blocks like `Button`, `Container`, `Heading`, `Loader`, and `EmptyState`, as well as domain-specific pieces like `ListingCard`, `ListingReservation`, and `HeartButton`.

8. There is a strong client/server boundary. Components that depend on browser-only behavior or local interaction are implemented as client components, while data-heavy pages can remain server-rendered. `ClientOnly` exists to safely gate browser-dependent UI such as maps or modal-driven interactions.

9. User-driven flows are managed through custom hooks in `app/hooks/`. `useLoginModal`, `useRegisterModal`, `useRentModal`, `useSearch`, `useFavorite`, and `useCountries` encapsulate cross-component state and side effects, especially for modals, search filters, and favorite toggling.

10. The listing lifecycle is a key subsystem: hosts create listings through the rent modal and form inputs like image upload, category selection, country picker, counters, and calendar. Listings are then displayed through `ListingCard` and detailed views, with reservation state shown via `ListingReservation` and related helpers.

11. Favorites and reservations are first-class workflows. The favorites page and `HeartButton` use the favorites API and server helpers to persist and render saved listings, while trips/reservations pages surface the user’s booking history and host-side reservation context.

12. Global UX and infrastructure are lightweight but important: `app/providers/ToasterProvider.tsx` handles notifications, `app/error.tsx` and `app/loading.tsx` provide route-level boundaries, and styling is driven by Tailwind CSS with `globals.css`, PostCSS, and shared assets in `public/`. TypeScript types are centralized in `app/types/`.

Main entry points: [`app/actions`](https://github.com/kchakhalyan/airbnb-clone/tree/main/app/actions) (Read actions), [`app/libs/prismadb.ts`](https://github.com/kchakhalyan/airbnb-clone/blob/main/app/libs/prismadb.ts) (Prisma client), [`app/listings/[listingId]/page.tsx`](https://github.com/kchakhalyan/airbnb-clone/blob/main/app/listings/[listingId]/page.tsx) (Listing page), [`app/components/navbar/Navbar.tsx`](https://github.com/kchakhalyan/airbnb-clone/blob/main/app/components/navbar/Navbar.tsx) (Navbar)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_grp_app["App Router"]
  node_n_home["Home feed<br/>route page<br/>[page.tsx]"]
  node_n_listing_page["Listing page<br/>route page<br/>[page.tsx]"]
  node_n_trips_page["Trips<br/>route page<br/>[page.tsx]"]
  node_n_reservations_page["Reservations<br/>route page<br/>[page.tsx]"]
  node_n_properties_page["Properties<br/>route page<br/>[page.tsx]"]
  node_n_favorites_page["Favorites<br/>route page<br/>[page.tsx]"]
end

subgraph group_grp_api["API Layer"]
  node_n_listing_api["Listings API<br/>route handlers"]
  node_n_favorites_api["Favorites API<br/>route handlers<br/>[route.ts]"]
  node_n_reservations_api["Reservations API<br/>route handlers"]
  node_n_register_api["Register API<br/>route handler<br/>[route.ts]"]
end

subgraph group_grp_ui["UI System"]
  node_n_navbar["Navbar<br/>navigation UI<br/>[Navbar.tsx]"]
  node_n_listing_card["Listing card<br/>listing UI<br/>[ListingCard.tsx]"]
  node_n_listing_reservation["Reservation panel<br/>listing UI"]
  node_n_modals["Modals<br/>interaction UI"]
  node_n_hooks["UI hooks<br/>client state"]
end

subgraph group_grp_data["Data & Auth"]
  node_n_actions["Read actions<br/>server helpers"]
  node_n_prisma[("Prisma client<br/>db client<br/>[prismadb.ts]")]
  node_n_schema["Domain schema<br/>prisma schema<br/>[schema.prisma]"]
  node_n_nextauth["Auth endpoint<br/>nextauth route<br/>[[...nextauth].ts]"]
end

subgraph group_grp_shared["Shared Runtime"]
  node_n_middleware["Middleware<br/>route guard<br/>[middleware.ts]"]
  node_n_client_only["ClientOnly<br/>boundary component<br/>[ClientOnly.tsx]"]
  node_n_toaster["Toaster<br/>infra UI"]
end

node_n_home -->|"loads listings"| node_n_actions
node_n_home -->|"renders shell"| node_n_navbar
node_n_listing_page -->|"loads detail"| node_n_actions
node_n_listing_page -->|"shares card UI"| node_n_listing_card
node_n_listing_page -->|"shows booking"| node_n_listing_reservation
node_n_trips_page -->|"loads trips"| node_n_actions
node_n_reservations_page -->|"loads reservations"| node_n_actions
node_n_properties_page -->|"loads properties"| node_n_actions
node_n_favorites_page -->|"loads favorites"| node_n_actions
node_n_actions -->|"queries db"| node_n_prisma
node_n_prisma -->|"implements model"| node_n_schema
node_n_nextauth -->|"reads users"| node_n_prisma
node_n_nextauth -->|"secures routes"| node_n_middleware
node_n_register_api -->|"creates user"| node_n_prisma
node_n_listing_api -->|"mutates listings"| node_n_prisma
node_n_favorites_api -->|"toggles favorite"| node_n_prisma
node_n_reservations_api -->|"writes reservations"| node_n_prisma
node_n_navbar -->|"uses state"| node_n_hooks
node_n_navbar -->|"opens modals"| node_n_modals
node_n_modals -->|"controls flows"| node_n_hooks
node_n_listing_card -->|"favorite action"| node_n_hooks
node_n_listing_reservation -->|"browser gate"| node_n_client_only
node_n_client_only -->|"supports UX"| node_n_toaster

click node_n_home "https://github.com/kchakhalyan/airbnb-clone/blob/main/app/page.tsx"
click node_n_listing_page "https://github.com/kchakhalyan/airbnb-clone/blob/main/app/listings/[listingId]/page.tsx"
click node_n_trips_page "https://github.com/kchakhalyan/airbnb-clone/blob/main/app/trips/page.tsx"
click node_n_reservations_page "https://github.com/kchakhalyan/airbnb-clone/blob/main/app/reservations/page.tsx"
click node_n_properties_page "https://github.com/kchakhalyan/airbnb-clone/blob/main/app/properties/page.tsx"
click node_n_favorites_page "https://github.com/kchakhalyan/airbnb-clone/blob/main/app/favorites/page.tsx"
click node_n_actions "https://github.com/kchakhalyan/airbnb-clone/tree/main/app/actions"
click node_n_prisma "https://github.com/kchakhalyan/airbnb-clone/blob/main/app/libs/prismadb.ts"
click node_n_schema "https://github.com/kchakhalyan/airbnb-clone/blob/main/prisma/schema.prisma"
click node_n_nextauth "https://github.com/kchakhalyan/airbnb-clone/blob/main/pages/api/auth/[...nextauth].ts"
click node_n_middleware "https://github.com/kchakhalyan/airbnb-clone/blob/main/middleware.ts"
click node_n_listing_api "https://github.com/kchakhalyan/airbnb-clone/tree/main/app/api/listings"
click node_n_favorites_api "https://github.com/kchakhalyan/airbnb-clone/blob/main/app/api/favorites/[listingId]/route.ts"
click node_n_reservations_api "https://github.com/kchakhalyan/airbnb-clone/tree/main/app/api/reservations"
click node_n_register_api "https://github.com/kchakhalyan/airbnb-clone/blob/main/app/api/register/route.ts"
click node_n_navbar "https://github.com/kchakhalyan/airbnb-clone/blob/main/app/components/navbar/Navbar.tsx"
click node_n_listing_card "https://github.com/kchakhalyan/airbnb-clone/blob/main/app/components/listings/ListingCard.tsx"
click node_n_listing_reservation "https://github.com/kchakhalyan/airbnb-clone/blob/main/app/components/listings/ListingReservation.tsx"
click node_n_modals "https://github.com/kchakhalyan/airbnb-clone/tree/main/app/components/modals"
click node_n_hooks "https://github.com/kchakhalyan/airbnb-clone/tree/main/app/hooks"
click node_n_client_only "https://github.com/kchakhalyan/airbnb-clone/blob/main/app/components/ClientOnly.tsx"
click node_n_toaster "https://github.com/kchakhalyan/airbnb-clone/blob/main/app/providers/ToasterProvider.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_n_home,node_n_listing_page,node_n_trips_page,node_n_reservations_page,node_n_properties_page,node_n_favorites_page toneBlue
class node_n_listing_api,node_n_favorites_api,node_n_reservations_api,node_n_register_api toneAmber
class node_n_navbar,node_n_listing_card,node_n_listing_reservation,node_n_modals,node_n_hooks toneMint
class node_n_actions,node_n_prisma,node_n_schema,node_n_nextauth toneRose
class node_n_middleware,node_n_client_only,node_n_toaster toneIndigo
```

## Components

### App Router

Server-rendered routes and page-level composition in the Next.js App Router.

- [Home feed](https://github.com/kchakhalyan/airbnb-clone/blob/main/app/page.tsx): route page · Landing page that assembles the main marketplace browse experience. · `app/page.tsx`
- [Listing page](https://github.com/kchakhalyan/airbnb-clone/blob/main/app/listings/[listingId]/page.tsx): route page · Dynamic listing detail route with server data loading and client interaction. · `app/listings/[listingId]/page.tsx`
- [Trips](https://github.com/kchakhalyan/airbnb-clone/blob/main/app/trips/page.tsx): route page · User booking history and trip context. · `app/trips/page.tsx`
- [Reservations](https://github.com/kchakhalyan/airbnb-clone/blob/main/app/reservations/page.tsx): route page · Host/user reservation management surface. · `app/reservations/page.tsx`
- [Properties](https://github.com/kchakhalyan/airbnb-clone/blob/main/app/properties/page.tsx): route page · Host property management and owned listings. · `app/properties/page.tsx`
- [Favorites](https://github.com/kchakhalyan/airbnb-clone/blob/main/app/favorites/page.tsx): route page · Saved listings view for authenticated users. · `app/favorites/page.tsx`

### API Layer

REST-style route handlers for mutations and entity reads.

- [Listings API](https://github.com/kchakhalyan/airbnb-clone/tree/main/app/api/listings): route handlers · Create, read, and update listing records. · `app/api/listings`
- [Favorites API](https://github.com/kchakhalyan/airbnb-clone/blob/main/app/api/favorites/[listingId]/route.ts): route handlers · Toggle saved listings for the current user. · `app/api/favorites/[listingId]/route.ts`
- [Reservations API](https://github.com/kchakhalyan/airbnb-clone/tree/main/app/api/reservations): route handlers · Create and fetch reservation records. · `app/api/reservations`
- [Register API](https://github.com/kchakhalyan/airbnb-clone/blob/main/app/api/register/route.ts): route handler · Creates new user accounts. · `app/api/register/route.ts`

### UI System

Reusable client/server presentation components and interactive features.

- [Navbar](https://github.com/kchakhalyan/airbnb-clone/blob/main/app/components/navbar/Navbar.tsx): navigation UI · Top-level navigation, search entry, and user menu. · `app/components/navbar/Navbar.tsx`
- [Listing card](https://github.com/kchakhalyan/airbnb-clone/blob/main/app/components/listings/ListingCard.tsx): listing UI · Reusable listing preview card used across browse and favorites surfaces. · `app/components/listings/ListingCard.tsx`
- [Reservation panel](https://github.com/kchakhalyan/airbnb-clone/blob/main/app/components/listings/ListingReservation.tsx): listing UI · Shows booking state and reservation actions on the listing detail page. · `app/components/listings/ListingReservation.tsx`
- [Modals](https://github.com/kchakhalyan/airbnb-clone/tree/main/app/components/modals): interaction UI · Login, register, rent, search, and base modal flow components. · `app/components/modals`
- [UI hooks](https://github.com/kchakhalyan/airbnb-clone/tree/main/app/hooks): client state · Shared client-side state for auth modals, search, favorites, and countries. · `app/hooks`

### Data & Auth

Persistence, auth, and server-side read helpers.

- [Read actions](https://github.com/kchakhalyan/airbnb-clone/tree/main/app/actions): server helpers · Centralized server-side reads for current user, listings, favorites, and reservations. · `app/actions`
- [Prisma client](https://github.com/kchakhalyan/airbnb-clone/blob/main/app/libs/prismadb.ts): db client · Shared Prisma instance used by server code and API handlers. · `app/libs/prismadb.ts`
- [Domain schema](https://github.com/kchakhalyan/airbnb-clone/blob/main/prisma/schema.prisma): prisma schema · MongoDB-backed model definitions for users, listings, favorites, and reservations. · `prisma/schema.prisma`
- [Auth endpoint](https://github.com/kchakhalyan/airbnb-clone/blob/main/pages/api/auth/[...nextauth].ts): nextauth route · Legacy NextAuth handler with Google and GitHub providers. · `pages/api/auth/[...nextauth].ts`

### Shared Runtime

Cross-cutting infrastructure for state, errors, and app shell.

- [Middleware](https://github.com/kchakhalyan/airbnb-clone/blob/main/middleware.ts): route guard · Protects or redirects authenticated routes at the edge. · `middleware.ts`
- [ClientOnly](https://github.com/kchakhalyan/airbnb-clone/blob/main/app/components/ClientOnly.tsx): boundary component · Gates browser-dependent UI such as maps and modal-driven interactions. · `app/components/ClientOnly.tsx`
- [Toaster](https://github.com/kchakhalyan/airbnb-clone/blob/main/app/providers/ToasterProvider.tsx): infra UI · Global notification provider. · `app/providers/ToasterProvider.tsx`

## Connections

- Home feed → Read actions: loads listings · Home feed uses server-side listing reads to populate browse results.
- Home feed → Navbar: renders shell · Page composes the shared navigation and search entry.
- Listing page → Read actions: loads detail · Listing detail page fetches listing and reservation context on the server.
- Listing page → Listing card: shares card UI · Listing presentation reuses the shared listing preview patterns.
- Listing page → Reservation panel: shows booking · Detail page includes reservation state and booking controls.
- Trips → Read actions: loads trips · Trips surface depends on server-side reservation reads.
- Reservations → Read actions: loads reservations · Reservations surface consumes reservation helpers for host/user context.
- Properties → Read actions: loads properties · Host property view reads the current user's listings.
- Favorites → Read actions: loads favorites · Favorites page resolves saved listings through server helpers.
- Read actions → Prisma client: queries db · All centralized read helpers talk to Prisma.
- Prisma client → Domain schema: implements model · Prisma client is shaped by the MongoDB schema.
- Auth endpoint → Prisma client: reads users · Authentication and session logic rely on persisted user records.
- Auth endpoint → Middleware: secures routes · Auth state feeds route protection and redirects.
- Register API → Prisma client: creates user · Registration writes new user records through Prisma.
- Listings API → Prisma client: mutates listings · Listing endpoints persist entity changes through Prisma.
- Favorites API → Prisma client: toggles favorite · Favorite route updates saved listing state in the database.
- Reservations API → Prisma client: writes reservations · Reservation routes create and fetch booking records.
- Navbar → UI hooks: uses state · Navigation depends on shared client state for search and auth actions.
- Navbar → Modals: opens modals · Navbar triggers login, register, and search flows.
- Modals → UI hooks: controls flows · Modal components are coordinated by custom hooks.
- Listing card → UI hooks: favorite action · Listing previews use favorite state and toggle behavior.
- Reservation panel → ClientOnly: browser gate · Reservation UI can include browser-only elements safely.
- ClientOnly → Toaster: supports UX · Global shell provides notifications around client interactions.