Using only a screenshot of the actual Airbnb Experiences page, I took on the challenge of recreating the site using Create-React-App. Rather than hard coding the data, it is stored as a JSON file within the project and the various fields of the experiences are populated from that file to have consistent styling. The next step for this project is user upload so that more card can be generated to demonstrate the use-cases of creating something like this.
Date Started
October 4, 2021
Technologies Used
React, Vercel, Node.js
Inspired to learn React from building projects rather than following bite-sized code tutorials led me to a site called Scrimba. On this extremely detailed yet concise site, I found a full React course that had just been posted for FREE. The first two projects were relatively simple, building static pages like you would with HTML & CSS, but instead using the conventions of React components and rendering. Then came the third project, an Airbnb Experiences clone (which I later renamed to Firebnb).
The Challenges
How do you build a dynamic page based on a screenshot of a static page?
First, I had learn about something called props (properties). Anyone who has worked with React probably doesn't even think about the concept anymore, it comes naturally. But for me, this was something that I just couldn't wrap my head around. The basic idea is creating a base component with customizable data fields, kind of like those little things put into the holes of their crocs. It seems simple enough, but combining that with data structure methods to process data programmatically is where part 2 of my struggle begins.
Crocs with Jibbetz aka Component with Props
I had to take an piece of data, a JSON (JavaScript Object Notation) file, import it, restructure the nested data fields to be sent to another component, populate a general card component with those dynamic fields with some conditional rendering, then use an array method to render as many cards as needed dynamically. That didn't end get me to part where everything had to be styled, trying to mimic the look and feel of the actual website.
It was. A lot. However, after you do it once it all falls into place and you realize just how many possibilities there are for dynamic sites to be built using these two concepts. For example, if you wanted to watch everything that is uploaded to YouTube in a hour, it would take close to 100 years. Although they have close to unlimited resources, there's no team of developers making sure every upload looks good on the site with custom thumbnails, video length, titles, tags, etc. That's all done with props that are uploaded to YouTube servers when a creator fills out the necessary fields required to upload a video. Those fields are sent off to a server which sends a request to YouTube to display a new card with those custom fields the creator filled out as props.
.png)
.png)
.png)