hmjatt / Airbnb-Experiences-ReactJS

Creating a clone of Airbnb Experiences page using ReactJS

Airbnb-Experiences-ReactJS 🌌

Creating a clone of Airbnb Experiences page using ReactJS

Live Preview

About ℹ️

A clone of Airbnb Experiences page, created to practice ReactJS. It comprises of some static images and a list of Experiences created dynamically from data in an array. While creating this project I learned about React Props, Creating Components from an Array, using Mapping Components, etc. After creating the project, deployed it to github-pages 🐦 Feel free to reach me at Twitter 🌊

Technologies Used 💻

         

Includes the following features/components ⚙️

- NPM
- ReactJS
- Custom Components
- create-react-app
- Figma
- github-pages

Usage 🤓

cd airbnb-experiences

npm install

npm start

Steps I followed to complete this project 🪜

1. Initialize Project 🎍

   • Initailize the project using npx create-react-app airbnb-experiences which will create a complete React App pre-configured and pre-installed with all the dependencies.
   • Import Poppins font from google fonts.

2. Organize components 🗄️

   • Create a components folder inside src directory.
   • Create custom components inside components folder.
   • Create an images folder inside src directory and move images/logos inside it.

3. Clean directory🧹

   • Delete unnecessary files from directory and format code with Prettier.

4. Navbar Component 🧩

   • Create Navbar component and basic JSX elements for it.
   • Add appropriate classNames to elements in Navbar component.
   • Add airbnb.svg image to Navbar component.
   • Import Navbar component inside App component.
   • Style Navbar component.

5. Hero Component 🧩

   • Create Hero component and basic JSX elements for it.
   • Add appropriate classNames to elements in Hero component.
   • Add photo-grid.png image to Hero component.
   • Import Hero component inside App component.
   • Style Hero component.

6. Card Component 🧩

   • Create Card component and basic JSX elements for it.
   • Add appropriate classNames to elements in Card component.
   • Add photo-grid.png image to Card component.
   • Import Card component inside App component.
   • Add basic style to Card component.

7. Footer Component 🧩

   • Create Footer component and basic JSX elements for it.
   • Import Footer component inside App component.
   • Style Card component.

8. Pass Props To Card Component🎴

   • Hardcode the props for Card component and pass props to Card.

9. Map Experiences Data Into Components 🗺️

   • Create a file called data.js, which contains an array of objects. It reperesents the data that will be used inside Card component.
   • Import images for Card component.
   • Use .map to iterate over array of objects inside data.js to create Card components.
   • When we .map over array of objects in App component, Add key prop 🗝️ (key={item.id}) when passing props to Card components. This will get rid of this warning :

   ⚠️ react_devtools_backend.js:4026 Warning: Each child in a list should have a unique "key" prop.
   Check the render method of `App`. See https://reactjs.org/link/warning-keys for more information.
   at Card (http://localhost:3000/main.5c1f9e47e1f13a06e783.hot-update.js:27:18)
   at App
   
   

10. Make App Responsive 🎨

    • Add flexbox style to Card component.
    • App is responsive upto this point. 😃

11. Sold Out/Location Badge 〰️

    • Add a Sold Out badge element for Card component and style it.
    • Use condititonal rendering in Card component to render SOLD OUT badge only if openSpots: 0 and if location: "Online" render ONLINE instead. Comapare against keys inside array of objects in data.js.

12. Pass object as props(Option #1) 📟

    • Pass entire object when we .map over array of objects in App component using item as key and array of objects as its value.
    • Access the object that is passed as prop in Card component, where item is key and array of objects are its values.

13. Spread object as props(Option #2) 📼

    • We can make use of {...item} Spread in Object Literals, which takes properties of our object and create a separate prop for each key in object. Value of props can be accessed using props.key syntax, where key is an actual key in data.js. This is an alternate to instead of creating our own prop called item to which we pass our entire object, Pass object as props(Option #1) is used in this project.

14. Prepare for Deployment 🪢

    • Add More than 3 items inside Card component by updating data.js.
    • Delete unnecessary files from directory and format code with Prettier.
    • Test for Responsiveness and make changes if need be.
    • Add links to Live Preview and screenshots.

15. Deploy 📤

    • Use Official Documentation(link) to push project to GitHub Pages 🎆🎆🎆

Links to content that helped me with this project 🔗

1. The Odin Project

   • React Introduction
   • React State & Props

2. Figma Design

   • Digital Business Card

3. Scrimba

   • Learn React

4. React Official Documentation

   • React Hello World Example
   • Introduction To JSX
   • Rendering Elements In React
   • Components and Props
   • Deployment to gh-pages

5. YouTube

   • ReactJS Basics Video Series From Academind
   • ReactJS Tutorial Video Series From Codevolution
   • React & Webpack 4 From Scratch - No CLI from Traversy Media
   • The introduction to React you've been missing - Kent C. Dodds(explains how React works under the hood)

6. FreeCodeCamp

   • React Props Cheatsheet(Article by Reed Barger)

7. MDN

   • Spread in Object Literals

Quote ✒️

“A ship in port is safe, but that’s not what ships are built for.”
— Grace Hopper

⚓ 🖥️ 🛣️