Recreating the Airbnb frontend with Vivid!

Overview

Airbnb Clone

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

Hacktoberfest 2022!

image

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/functionality 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.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!

Pitch Demo

Designs

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

You might also like...

Frontend tech guide and collection of highly recommended materials

Frontend Learning Kit Frontend tech guide and collection of highly recommended materials Show your support by giving a ⭐ to this repo 2022 Frontend De

Jan 7, 2023

Finisterre-frontend - Front end for finisterre ecommerce application.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Nov 2, 2022

Manually curated collection of resources for frontend web developers.

Frontend Development Manually curated collection of resources for frontend web developers. You are viewing a browseable version, split by category in

Jan 1, 2023

Frontend of Inhyped.com written in TypeScript and rewritten in ReScript

From TypeScript To Rescript This is an example of Inhyped frontend codebase initially written in TypeScript and then fully rewritten in ReScript. It's

Sep 29, 2022

Frontend, contracts, and merkle tree generator for use in quickly scaffolding ERC20 token airdrops.

Merkle Airdrop Starter Quickly bootstrap an ERC20 token airdrop to a Merkle tree of recipients. Steps: Generate Merkle tree of recipients by following

Dec 22, 2022

🌕 Frontend for Mangatsu server Written in TypeScript using Nextjs

🌑 Frontend for Mangatsu Server (a storage for doujinshi, manga & other collections). Written in TypeScript using Nextjs.

Nov 4, 2022

A Minecraft launcher written in Rust, with an Electron frontend.

RustMine A Minecraft launcher written in Rust, with an Electron frontend. Why? I thought it would be fun to use two of my most familiar languages, Rus

Oct 16, 2022

This project provides a React-powered web experience using the PokeAPI. It also is a creative space to hone frontend skills.

pokedex-nova This project provides a React-powered web experience using the PokeAPI. It also is a creative space to hone frontend skills. Available Sc

Feb 1, 2022

Second-challinge - Frontend Mentor - Social proof section

Second-challinge - Frontend Mentor - Social proof section

Frontend Mentor - Social proof section Welcome! 👋 Thanks for checking out this

Feb 8, 2022
Comments
  • Listing page - Reviews section

    Listing page - Reviews section

    Screen Shot 2022-10-12 at 4 30 48 PM

    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!

    good first issue hacktoberfest up-for-grabs 
    opened by aryamankha 2
  • Listing page - Date picker

    Listing page - Date picker

    Screen Shot 2022-10-12 at 4 30 04 PM

    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!

    good first issue hacktoberfest up-for-grabs 
    opened by aryamankha 0
Owner
Aryaman Khandelwal
Aryaman Khandelwal
This project is an attempt at recreating the WebGL animation featured in the 2021 Linear release page.

Linear Vaporwave Three.js scene This project is an attempt at recreating the WebGL animation featured in the 2021 Linear release page. Demo Head over

Maxime Heckel 31 Dec 28, 2022
A demo repository to play around with Vivid! Styled with Tailwind CSS

vivid-demo A demo repository to play around with Vivid! Mess around with a copy of our landing page to see how Vivid works! Learn more about Vivid at

Aryaman Khandelwal 5 Dec 15, 2022
The backend for our Airbnb App, built using Sanity.io.

AirBnb Sanity.io Backend This repository is to support my tutorial on how to build an AirBnb Clone with strucutred content using Sanity.io and Next.js

Ania Kubow 73 Dec 28, 2022
AirBnb Javascript Style Guide'ının Türkçe diline çevrildiği repository

Airbnb JavaScript Stil Kılavuzu() { JavaScript'e büyük ölçüde mantıklı/makul bir yaklaşım Not: Bu kılavuz sizin Babel kullandığınızı varsayar ve babel

Gökhan Kandemir 71 Dec 29, 2022
Airbnb-like project

Solution for a challenge from Devchallenges.io. Demo | Challenge Table of Contents Built With How to use Contact Built With NextJS Styled Components H

Pablo Winck Winter 14 Jul 24, 2022
📆 The modern, open source "Airbnb style" date picker.

Date Picker A pretty, modern date picker. Coming soon. ?? Get Started wip wip ?? Testing pnpm test ?? Changelog Please see our releases page for more

Open Web Foundation 8 Oct 11, 2022
A boilerplate for ExpressJs projects configured with ESLint, Prettier & Airbnb Setup. The boilerplate utilises RESTful architecture and uses Mongodb.

ExpressJs-Boilerplate An ExpressJs boilerplate configured with ESLint, Prettier & Airbnb Setup. The boilerplate utilises RESTful architecture and uses

Hammas bin Farrukh 4 Mar 8, 2023
O objetivo dessa aplicação era criar um frontend feito totalmente em Javascript, sem nenhum arquivo HTML ou CSS pré-criado. Além disso, esse projeto também é o frontend da minha API 100% NodeJS.

Projeto HTML 100% Javascript Front-end feito "sem HTML" Conteúdos ➜ Sobre o projeto ➜ O que aprendi ➜ Como usar ?? Sobre o projeto Voltar ao topo O ob

João Victor Negreiros 19 Aug 3, 2021
This is my portfolio GitHub clone website. The frontend is build using NextJS and TailwindCSS.

Github Clone Portfolio Website Tech Stack used: NextJS Tailwind CSS The contact form in this website is connected to Notion. If you want to integrate

Unnati Bamania 22 Oct 5, 2022
frontend for my website

personal portfolio How to install? yarn install yarn dev Note: make sure to be using Node 14 and up. BIG THANKS TO @alii for letting me use his websit

acn 3 Jan 5, 2022