Documentation
Low-code
Low-code
  • What is Agua?
  • Quick Start
    • AirBnb: Tutorial
      • Component: Button
      • Component: Card
        • Card's Tag
        • Card's Images
        • Card's Info
      • Home Header
        • 1. Banner
        • 2. Divider
        • 3. Desktop Menu
          • 3.1. Site Menu | Elements
          • 3.2. Site Menu | Style
          • 3.3. Search | Elements
          • 3.4. Search | Style
        • 4. Tablet Menu
          • 4.1. Menu | Elements
          • 4.2. Menu | Style
  • Daily Use
    • Basics
      • Initial Setup
      • Project structure
        • .agua folder
      • Project persistence
        • Saving your project
        • Deploy Locally
  • Help and Community
    • Support
    • Latam Community
    • Global Community
Powered by GitBook
On this page
  • Basic Setup:
  • 1. Fork and clone GitHub Repo
  • 2. Open your Repo folder in Agua
  • Your will Create:
  • A. Component: Button
  • B. Component: Card
  • C. Home Screen: Header
  1. Quick Start

AirBnb: Tutorial

Discover what you can do in Agua!

PreviousWhat is Agua?NextComponent: Button

Last updated 1 year ago

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

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

Basic Setup:

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

1. Fork and clone GitHub Repo

Repo URL:

2. Open your Repo folder in Agua

Sign in URL:

2.1. Register with your Google Account.

2.2. Open the Editor.

  • [Click] the Open Editor button.

2.3. Create a project.

  • [Click] the Open folder button.

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

2.4 Locate your folder.

-Inside your File Explorer-

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

2.5. Grant files permission.

-Inside the Chrome permission prompt-

  • [Click] the Edit files button.

2.6. Access your project.

Your will Create:

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

C. Home Screen: Header

Click here and create an Airbnb Header in 30 minutes!

-Inside the -

-Inside your -

-Inside the -

Agua works only in .

-Inside your project -

A.

and create an Airbnb button in 5 minutes!

B.

and create an Airbnb card in 15 minutes!

https://github.com/Agua-for-devs/agua-airbnb-demo
https://auth.agua.app/signin/
Sign in
Dashboard
Editor
Google Chrome
Editor
Component: Button
Click here
Component: Card
Click here
Airbnb
button
card
header
Airbnb Demo | Agua
Logo