Skip to content

Prime Video React Slick, React player and React Popup 3rd party packages are Used

Notifications You must be signed in to change notification settings

NagaphaneendraManne/Prime-Video-React

Repository files navigation

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.

About

Prime Video React Slick, React player and React Popup 3rd party packages are Used

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published