How kchakhalyan/airbnb-clone works
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: actions Read actions · prismadb.ts Prisma client · page.tsx Listing page · Navbar.tsx Navbar
Components 22
App Router
Server-rendered routes and page-level composition in the Next.js App Router.
- Home feed · Landing page that assembles the main marketplace browse experience.
app/page.tsx - Listing page · Dynamic listing detail route with server data loading and client interaction.
app/listings/[listingId]/page.tsx - Trips · User booking history and trip context.
app/trips/page.tsx - Reservations · Host/user reservation management surface.
app/reservations/page.tsx - Properties · Host property management and owned listings.
app/properties/page.tsx - Favorites · Saved listings view for authenticated users.
app/favorites/page.tsx
API Layer
REST-style route handlers for mutations and entity reads.
- Listings API · Create, read, and update listing records.
app/api/listings - Favorites API · Toggle saved listings for the current user.
app/api/favorites/[listingId]/route.ts - Reservations API · Create and fetch reservation records.
app/api/reservations - Register API · Creates new user accounts.
app/api/register/route.ts
UI System
Reusable client/server presentation components and interactive features.
- Navbar · Top-level navigation, search entry, and user menu.
app/components/navbar/Navbar.tsx - Listing card · Reusable listing preview card used across browse and favorites surfaces.
app/components/listings/ListingCard.tsx - Reservation panel · Shows booking state and reservation actions on the listing detail page.
app/components/listings/ListingReservation.tsx - Modals · Login, register, rent, search, and base modal flow components.
app/components/modals - UI hooks · Shared client-side state for auth modals, search, favorites, and countries.
app/hooks
Data & Auth
Persistence, auth, and server-side read helpers.
- Read actions · Centralized server-side reads for current user, listings, favorites, and reservations.
app/actions - Prisma client · Shared Prisma instance used by server code and API handlers.
app/libs/prismadb.ts - Domain schema · MongoDB-backed model definitions for users, listings, favorites, and reservations.
prisma/schema.prisma - Auth endpoint · 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 · Protects or redirects authenticated routes at the edge.
middleware.ts - ClientOnly · Gates browser-dependent UI such as maps and modal-driven interactions.
app/components/ClientOnly.tsx - Toaster · Global notification provider.
app/providers/ToasterProvider.tsx
Connections 23
- 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.