WORK IN PROGRESS... Only compatible with a 1080p desktop atm. Responsiveness coming later. Demo at : https://ask0ldd.github.io/VStreamService/

Description & Technical Challenges :

This Application has been designed with Figma and built using | . My goal was to merge the most useful features of Amazon Prime and IMDb into one website. Most datas used to populate the pages have been scraped using a tool I built with the help of : https://github.com/ask0ldd/ScrapIMDB. Some others come from the Omdb API.

All the Components / Services have been tested using , with a 100% coverage being reached. Doing so was especially tricky since adding some new custom features to the popular JSDOM library was needed in order to test my more complex components.

--- THE HOME PAGE ---

The Home page is displaying three types of custom slideshows :

• The top one has some big banners in a rotation, using React and CSS. Nothing fancy.

• The second one is more advanced, featuring cards that open and display a video asynchronously when hovered over. Additionally, the cards automatically center themselves to ensure the video is never cut off.

• The third one displays cards that open vertically, accompanied by a countdown of the remaining time for the user to finish watching the movie.
  

  ---

  

• Clicking on a card redirects the user to a page dedicated to the selected TV show or movie.

--- THE MOVIE / TV SHOW PAGE ---

• An asynchronous trailer is then loaded and played, with the option to activate sound using a button.

• The user can access more information about their show through a submenu with the following items : Episodes, Cast & Crew, Photos, User Reviews.

  ---

  

• At the bottom of the movie page, a list of episodes is displayed if relevant.

• As the user scrolls down the page, the episodes are loaded asynchronously in a manner similar to Twitter.

  ---

  

--- THE CAST ---

• Multiple elements displaying the cast behind the production of the selected movie.

  ---

  

--- GALLERY & MODALE ---

• A gallery containing some miniatures opening a custom modale when clicked on.

  ---

  

• The modal contains a mini gallery at the top.

• The Keyboard Navigation is obviously supported, for accessibility purposes.