This project was bootstrapped with Create React App.
It recreates a dummy layout of an accommodation platform.
To install the dependencies, including sass & proptypes, run the following command in the directory:
To open the app in the development mode, type:
Which opens http://localhost:3000 to view it in the browser.
src/
|-- App.js
|-- components
| |-- List
| |-- Card
| `-- Spinner
`-- services
`-- Api.js
I followed a provided visual guide, which included fonts, colors, borders and layout structure. The design was planned taken into account a mobile first approach.
For mimicking the elements' arrangement, I used Flexbox.
Since there was a deadline for delivering the project, I run out of time for polishing the use of SASS (there is no variable usage nor mixins, but there's some nesting at least).
I employed LocalStorage to avoid unnecessary API calls.
Data coming from the API service missed a proper Id to comply with React unique keys requirement.
To solve this issue, I decided to extract part of each images' parameter to used them as unique identifiers. The method can be found at the List component.
As alternative workarounds, you can explore using a library like lodash.random to generate a random identifier. Also, there is the option to preprocess the data before setting the state during the fetch method:
const dataWithId = data.homecards.map(item, index) => {
return {...item, id: index});
this.setState({
rooms: dataWithId
})
And then proceeding to use the new property generated:
key={item.id}
Regarding deployment to GitHub Pages, an important remark is that, since its serving via a proxy in package.json, you will only see a mesmerizing spinner made by @lukehass.
React Router, some functionalities, a 404 page with a background gif and many more would may come.
This project is made with a purpose for learning and developing better coding skills, so don't be shy and send some PRs with your improvements. Sharing is caring.
