Entertainment web app // Frontend Mentor Project // React and CSS

• see project

• Your users should be able to:

  • View the optimal layout for the app depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Navigate between Home, Movies, TV Series, and Bookmarked Shows pages
  • Add/Remove bookmarks from all movies and TV series
  • Search for relevant shows on all pages
  • The data is in local data.js file
  • The data is saved on the localStorage, so that the user can see the current bookmarked state when come back to the app.

  //https://github.com/steveanthony999/galeria_slideshow/blob/master/src/components/gallery/Gallery.js

@searchForm @reactRouter6 @importData @activeButtons

Comments about the code

• import data from data.js: in order to see the images, in the data.js the images must have require ().default image: require('./assets/thumbnails/beyond-earth/trending/large.jpg').default,

• Challenges

  • BookmarkToggle is working only after page reload
  • Search functionality works but when the searchTerm is deleted, we go back to the initial data (the bookmarked state is lost)

Helpers

• for react-router-dom@6

  • npm install react-router-dom@6
  • tutorial
  • repo