https://github.com/travelxml/airbnb-clone-sanity-next-react

Airbnb clone built with Sanity, Next.js, and React. A modern web application demonstrating advanced front-end development and headless CMS integration for seamless property listings and booking management.
https://github.com/travelxml/airbnb-clone-sanity-next-react

airbnb airbnb-clone airbnb-listings clone clone-app clone-coding cloner next nextjs react reactjs sanity-io

Last synced: 7 months ago
JSON representation

Airbnb clone built with Sanity, Next.js, and React. A modern web application demonstrating advanced front-end development and headless CMS integration for seamless property listings and booking management.

• Host: GitHub
• URL: https://github.com/travelxml/airbnb-clone-sanity-next-react
• Owner: TravelXML
• Created: 2021-12-08T12:05:47.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-01-08T14:32:20.000Z (almost 4 years ago)
• Last Synced: 2025-01-21T01:11:13.400Z (9 months ago)
• Topics: airbnb, airbnb-clone, airbnb-listings, clone, clone-app, clone-coding, cloner, next, nextjs, react, reactjs, sanity-io
• Language: JavaScript
• Homepage:
• Size: 251 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# AIRBNB CLONE Using REACT / NEXT / SANITY

![airbnb-clone](https://user-images.githubusercontent.com/8361967/145212233-478dab49-a4d5-49d2-9a0c-f6add21e5f6f.png)

## Airbnb Clone - Create Backend and Frontend for Airbnb App using React, Next, Sanity.io

# Getting Started

Let's first Up the Backend with Sanity CMS then we will go to Frotend, to display structured data's via Sanity SDK and React HOOK

### Sanity

[Sanity](https://www.sanity.io/) is the most flexible platform for building data driven content solutions.

### Next.js

[Next.js](https://nextjs.org/) gives the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

### React.js

[React.js](https://reactjs.org/)  JavaScript library for building interactive user interfaces

## Backend

### Step 1: Download file  >> go to **backend** folder then run the  below commands.

    npm i

### Step 2: Run the development server:

    sanity start

it will up the backend server to create schemas then access those schemas on frontend.

![image](https://user-images.githubusercontent.com/8361967/145203826-02b46513-a38a-4861-b4ec-e6db12fe7f42.png)

Open http://localhost:3333 with your browser to see the result.

![image](https://user-images.githubusercontent.com/8361967/145208392-aa47e7e6-717c-472c-932a-7129752c476d.png)

## Frontend

### Step 3: Now we are good to go ahead with Frontend, Run the below command, install the required packages:

    npm i

### Step 4: Run the server

    npm run dev

    # or

    yarn dev

![image](https://user-images.githubusercontent.com/8361967/145203736-9e9bc700-3970-4953-bd63-b3f641c014b8.png)

Open http://localhost:3000 with your browser to see the result.

![image](https://user-images.githubusercontent.com/8361967/145207531-8bc8e718-1b36-4edd-86b5-4703974f928b.png)

## Help

If you get stuck, the Sanity community I was talking about can be found here on the Sanity Exchange (https://www.sanity.io/exchange) and the Sanity Slack Community (https://slack.sanity.io/).

**Enjoy Coding!**