clonglam / airbnb-clone

This is a fully responible clone of Airbnb website, I try to do the basic layout by Nextjs with tailwinds, I used mapbox and mapgl to do the map feature. you can try it yourself.

Airbnb Clone full responsive with map-gl

This is a fully responible clone of Airbnb website, I try to do the basic layout by Nextjs with tailwinds, I used mapbox and mapgl to do the map feature. you can try it your self.

CLick me to the Demo

it may popout the web is not safe but it is normal, dont worry.

Fully-responsive Mobile First

Mobile first, People have spent more and more time on the internet from mobile ends. The website will show different layout depend on the width of the browser.

map-gl

The Map feature help user to visualize the distribution of the rooms. The map need to pass a initial longitude and latitude, I first use a function to calculate a center point of those rooms, so that we can display a overview.

Dynamic route

I use getStaticProps, but not the getserverside props since there are no realtime data that need to pass back to the server, I used getstaticprops to do the dynamic page. The server will render pages of different rooms first, When the user selected the rooms that they want, It will route the user to the selected page in very low latency.

What Can I do Next?

I think there are some improment, like adding

1. a state management lib somehing like redux is a good idea
2. Third party payment system like strip
3. User login like Auth0