In this practice let's build a Gallery App by applying the concepts we have learned till now.

Refer to images below:

Design Files

Click to view the Design Files

• Extra Small (Size < 576px) and Small (Size >= 576px)
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)

Project Set Up Instructions

Click to view the Set Up Instructions

• Download dependencies by running npm install
• Start up the app using npm start

Project Completion Instructions

Click to view the Functionality to be added

Add Functionality

The app must have the following functionalities

• When the user clicks on a thumbnail then the corresponding image should be displayed.

• The Gallery component consists of the imagesList. It consists of a list of image details objects with the following properties in each object

  Key	Data Type
  id	Number
  imageUrl	String
  thumbnailUrl	String
  imageAltText	String
  thumbnailAltText	String

Click to view the Implementation Files

• Your task is to complete the implementation of
  • src/components/Gallery/index.js
  • src/components/Gallery/index.css
  • src/components/ThumbnailItem/index.js
  • src/components/ThumbnailItem/index.css

Click to view the Components Structure

Components Structure

Important Note

Click to view Important Note Points

The following functionality is required for the tests to pass

• The selected image should have the alt as the value of the key imageAltText from imagesList provided.
• The thumbnail images should have the alt as values of the key thumbnailAltText from imagesList provided.

Quick Tips

Click to view Quick Tips

• You can use the CSS opacity property to set the degree to which content behind an element is hidden. It has a value in the range of 0 to 1 inclusive.

  opacity: 0.5;
  

Resources

Colors

Colors

Hex: #1e293b

Hex: #ffffff

Hex: #64748b

Font-families

• Roboto

Things to Keep in Mind

• All components you implement should go in the src/components directory.
• Don't change the component folder names as those are the files being imported into the tests.
• Do not remove the pre-filled code
• Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.