Airbnb clone with REACT

A copy of the Airbnb app to learn and improve coding skills with the React framework. (Next.js, Tailwind CSS, Mapbox, Calendar & Date Picker)

Setting up Tailwind CSS in a Next.js v12 project:

yarn create next-app --example with-tailwindcss <Project Name>

# Run the application:
npm run dev

What I have learned in this project are:

1. Using Next.JS image component instead of regular <img /> element because of a variety of built-in performance optimizations _{Read More...}
2. Learning Flex css _{Read More...}
3. Using React Date Range, a date library agnostic React component for choosing dates and date ranges _{Read More...}
4. Using Next/Router to access the router object inside any function component in our app, we can use the useRouter hook _{Read More...}
5. Using bar of progress _{Read More...}

Dependencies

• Tailwind @heroicons/react link
• Tailwind Scrollbar Hide link
• React Date Range link
• Bar Of Progress link
• React Map GL link

Note

While we are using a Next.JS image component with a hostname in src, we need to add that hostname in next.config.js like this: _{Read More...}

module.exports = {
  images: {
    domains: ['links.papareact.com']
  }
}

DISCLAIMER:

This code is developed for learning purposes only. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this code for education purposes.