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!

airbnb-clone's Issues

Listing page - Date picker

Implement calendar section using Vivid! In the browser, command-click on any component to edit its code and hit Command-K to quickly preview styles. Command-Shift-K will let you add new empty components!

Add CODE_OF_CONDUCT.md

Hey @aryamankha assign this issue to me and I will add code of conduct and also add hacktoberfest tag

Home - Listing Grid

Implement listing grid using Vivid! In the browser, command-click on any component to edit its code and hit Command-K to quickly preview styles. Command-Shift-K will let you add new empty components!

Home Page

App currently just displays the default NextJS index page.
A home page should be made to start adding the UI components into.

Home - Individual Listing Component

Implement individual listing component using Vivid! In the browser, command-click on any component to edit its code and hit Command-K to quickly preview styles. Command-Shift-K will let you add new empty components!

App won't compile because of error useContext

useContext is used wrongly. Error is seen as below.

Listing page - Reviews section

Implement reviews section using Vivid! In the browser, command-click on any component to edit its code and hit Command-K to quickly preview styles. Command-Shift-K will let you add new empty components!

aryamankha/airbnb-clone

link this project at [email protected] thanks

Listing page - description

Implement listing description on listing page using Vivid! In the browser, command-click on any component to edit its code and hit Command-K to quickly preview styles. Command-Shift-K will let you add new empty components!

Add Dockerfile for local development.

Dockerize app for faster start in local-development

Broken link

This link docs.vivid.lol/functionality from README should be replaced or removed because it leads to a broken page

Tailwind configuration

Edit the Tailwind config file to include the Airbnb color palette, Airbnb fonts, and other Airbnb-specific styling options.

Home - Filters modal

Implement filters modal using Vivid! In the browser, command-click on any component to edit its code and hit Command-K to quickly preview styles. Command-Shift-K will let you add new empty components!

This modal comes up when you click "filters" in the top right corner of the homepage.

Listing page - pricing component

Implement pricing component on individual listing page using Vivid! In the browser, command-click on any component to edit its code and hit Command-K to quickly preview styles. Command-Shift-K will let you add new empty components!

Add .prettierrc and .editorconfig & typedoc

Add .prettierrc & .editorconfig for any standardize styling and typedoc for code documentation .

Listing page - Gallery

Implement gallery on listing page using Vivid! In the browser, command-click on any component to edit its code and hit Command-K to quickly preview styles. Command-Shift-K will let you add new empty components!

Listing page - Amenities

Implement amenities section using Vivid! In the browser, command-click on any component to edit its code and hit Command-K to quickly preview styles. Command-Shift-K will let you add new empty components!

Add CODE_OF_CONDUCT.md

Hey @aryamankha assign this issue to me and I will add a code of conduct and also add hacktoberfest tag

Listing page - top bar

Implement top bar on any individual listing page using Vivid! In the browser, command-click on any component to edit its code and hit Command-K to quickly preview styles. Command-Shift-K will let you add new empty components!

Home - Sticky Nav Bar

Implement sticky nav bar using Vivid! In the browser, command-click on any component to edit its code and hit Command-K to quickly preview styles. Command-Shift-K will let you add new empty components!