aryamankha/airbnb-clone

Recreating the Airbnb frontend with Vivid!

Airbnb Clone

Building an Airbnb clone with Vivid - the in-browser styling editor that makes Tailwind CSS even faster.

Hacktoberfest 2022!

Getting Started

Clone the repository, install the necessary dependencies, and then run the application.

git clone https://github.com/aryamankha/airbnb-clone.git
npm install
npm run dev
# or
git clone https://github.com/aryamankha/airbnb-clone.git
yarn
yarn dev

Open http://localhost:3000 with your browser to see the result. Go over the Vivid docs at docs.vivid.lol to get familiar with how in-browser styling works.

Contributing

This repository is beginner friendly! We'll be creating issues for contributors to own components in the frontend, but feel free to propose your own issues! The goal is to make our frontend replicate the [Airbnb site] (https://www.airbnb.com) as closely as possible. We might not actually be building out a backend for this project, but be sure to structure your frontend code in a way that could later be wired to a database. For example, if creating a component to represent an individual listing, don't hardcode every single text field - those should be passed in through props.

Code organization

We'll be using React, Next, and Typescript for our frontend with Tailwind for all styling. Any new sections created should be added to the "components" folder, with components put together to create full pages.

What is Vivid?

Vivid is an in-browser styling we've developed (check out www.style.vivid.lol). It's still in alpha, but it allows you to style with Tailwind directly from your browser. Check out our docs to learn how it works! If you find any bugs in Vivid, feel free to create issues in this repository so we can address them. Would love your feedback!

Designs

We haven't created Figma designs for this project, but the live Airbnb site is the best reference point!