Skip to content

Latest commit

 

History

History
executable file
·
165 lines (115 loc) · 5.4 KB

README.md

File metadata and controls

executable file
·
165 lines (115 loc) · 5.4 KB
Raw

In this project, let's build a Prime Video by applying the concepts we have learned till now.

Refer to the video below:



Design Files

Click to view

Set Up Instructions

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

Completion Instructions

Functionality to be added

The app must have the following functionalities

  • Action Movies List and Comedy Movies List should be displayed using React Slick

  • The App is provided with moviesList. It consists of a list of movieItem objects with the following properties in each movieItem object

    Key Data Type
    id String
    thumbnailUrl String
    videoUrl String
    categoryId String

  • When the next button is clicked in any of the sliders, the next movie items thumbnail in the corresponding moviesList should be displayed

  • When the previous button is clicked in any of the sliders, the previous movie items thumbnail in the corresponding moviesList should be displayed

    movie slider buttons

  • When you click on the thumbnail, then the popup should be opened,

    • And corresponding video should be displayed using React player component from react-player
      popup

    - When the close button is clicked, then the popup should be closed
Components Structure
component structure breakdown

Implementation Files

Use these files to complete the implementation:

  • src/components/PrimeVideo/index.js
  • src/components/PrimeVideo/index.css
  • src/components/MoviesSlider/index.js
  • src/components/MovieItem/index.js
  • src/components/MovieItem/index.css

Quick Tips

Click to view 
<Popup
  modal
  trigger={
    //write code here
  }
  className="popup-content"
>
  //write code here
</Popup>

Important Note

Click to view

The following instructions are required for the tests to pass

  • One frame of the slider should have 4 thumbnails
  • The thumbnail images in the app should have alt as thumbnail
  • The close button in the popup should have the data-testid as closeButton
  • IoMdClose from react-icons should be used for Close Icon in the Popup

Resources

Image URLs
Colors
Hex: #000000
Hex: #ffffff
Hex: #231f20

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.