xdelmo/airbnb-clone

This is a solution to Airbnb Clone project on Scrimba

Scrimba - Airbnb Clone solution

This is a solution to the Airbnb Clone project on Scrimba. Scrimba helps you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • Requirements
  • Screenshot
  • Links
  • Getting Started with Create React App
• My process
  • Built with
  • Useful resources
• Author

Overview

Requirements

• Data array in a separate .js file
  • Title, description, price, cover image, rating, review count, location, open spots
• Use .map() and props
• Style & polished
• Mobile designed

Screenshot

Links

• Solution URL: @GitHub

Getting Started with Create React App

This project was bootstrapped with Create React App.

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• React.JS
• Flexbox

Useful resources

• ReactJS - How to set up a local development environment on your computer
• Developer Mozilla - Array.prototype.map()
• StackOverflow - How to reference a local image in React
• W3Schools - PX to EM converter
• Developer Mozilla - Spread in object literals

What I Learnt

// required to display local imgs in src folder
<img src={require(`../images/${props.img}`)} />

// badgeText has no value because I need in the conditional rendering

let badgeText;
if (props.openSpots === 0) {
  badgeText = "SOLD OUT";
} else if (props.location === "Online") {
  badgeText = "ONLINE";
}

// Conditional rendering
// If badgeText has something assigned (means badgeText is truthy) card--badge div will be displayed corrisponding badgeText

{
  badgeText && <div className="card--badge">{badgeText}</div>;
}

Author

• Website - Emanuele Del Monte