AirBnb: Tutorial

Discover what you can do in Agua!

In this tutorial, we'll walk through the process of replicating the UI of Airbnb.

---

You will start by building a button, followed by a card, and the site header. By the end of this tutorial, you will have a responsive interface and its React code resembling Airbnb's homepage.

https://airbnb-demo.agua.toolsairbnb-demo.agua.tools

Airbnb | Desktop

Airbnb | Tablet

Airbnb | Mobile

Basic Setup:

Retrieve all necessary Airbnb assets from GitHub and start your project in Agua

---

1. Fork and clone GitHub Repo

Repo URL:

https://github.com/Agua-for-devs/agua-airbnb-demo

2. Open your Repo folder in Agua

Sign in URL:

https://auth.agua.app/signin/

2. Step by Step

2.1. Register with your Google Account.

-Inside the Sign in-

3. Video

2.2. Open the Editor.

-Inside your Dashboard-

• [Click] the Open Editor button.

3. Video

2.3. Create a project.

-Inside the Editor-

• [Click] the Open folder button.

• Agua is supported on any laptop or desktop regardless of OS.

• Agua works only in Google Chrome.

3. Video

2.4 Locate your folder.

-Inside your File Explorer-

• Find your Repo folder an [Click] the Select button.

3. Video

2.5. Grant files permission.

-Inside the Chrome permission prompt-

• [Click] the Edit files button.

3. Video

2.6. Access your project.

-Inside your project Editor-

3. Video

Your will Create:

To understand the basics of Agua, you will build a series of components and sections of the Airbnb UI.

---

A. Component: Button

Component: Button

Click here and create an Airbnb button in 5 minutes!

B. Component: Card

Component: Button

Click here and create an Airbnb card in 15 minutes!

C. Home Screen: Header

Component: Button

Click here and create an Airbnb Header in 30 minutes!