Live demo

Splash

External Libraries:

  • TailwindCSS
  • react-router-dom
  • eslint

Device supported

  • Desktop
  • Tab
  • Mobile

Task

  • Image Gallery Implementation: Develop an image gallery using the Unsplash API.
  • Styling Flexibility: You may choose to use a component library of your preference or plain CSS or TailwindCSS for styling. Preference will be given to the use of TailwindCSS, considering our organisational standards.
  • Homepage Design: Create a homepage that includes a search bar. This page should also feature a random background image sourced from the Unsplash API, which changes with each page reload.
  • Search Functionality: Implement a feature where a search input leads to a display of results in a grid masonry layout, similar to the search results presentation on Unsplash.
  • "Starred" Images Feature: Incorporate a feature that allows users to "star" or bookmark their favourite images.
  • Starred Images Page:
    • Create a dedicated page within the application where users can view all their starred images.
    • This page should maintain the same aesthetic and layout as the main image gallery but exclusively display the user’s starred images.
    • Ensure that the starring mechanism is intuitive and accessible, allowing users to easily add or remove images from their starred collection. (Optional/Bonus)# splash