Skip to content

brendonvan/Netflix-Reimagined

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Project Three - Netflix Reimagined

Netflix-Reimagined-Demo-Compressed

Version 41.8 Prepared by Brendon Van | Nick Duitsman | Sean Buchas

General Assembly SEIR-725ec | Unit 3 Project September 15 2022

Netlify Status https://netflix-reimagined.netlify.app/

Project Description

Netflix Clone but with UI/UX inspired by Jurre Houtkamp & Serge Strokov. Utilized a MERN stack to build a full stack application in 1 week with de-coupled React frontend and Express backend.


Wireframes

User Flow Diagram

UserFlowDiagram

Home Page

Wireframe-HomePage Wireframe-HomePage-TitleClicked

Movie Details

Wireframe-MovieDetails

MVP User Stories

MVP User Stories

  • *As a user, I want to see multiple lists of movies on the home page, that are categorized in different types. *
  • *As a user, I want to see the movie background preview the trailer of the movie I am hovering on with either my mouse or keyboard select. *
  • *As a user, I want to be able to add and remove movies to my Watch List to watch for later. *
  • *As a user, I want to be able to update my display name and profile picture and delete my account. *

Post MVP Stretch Goals

  • *As a user, I can drag and drop my picture to upload as my profile picture *
  • *As a user, when I open up the movie details the screen zooms into the currently played background preview. *
  • *As a user, when I open up the website on my phone the design will be responsive and show up properly for my phone size. *

ERDs

Netflix-Reimagined-ERD


API

The Movie DB API Documentation Open Movie DB API Documentation Youtube API Documentation

Now Playing Response

{
  "adult": false,
  "backdrop_path": "/jsoz1HlxczSuTx0mDl2h0lxy36l.jpg",
  "id": 616037,
  "title": "Thor: Love and Thunder",
  "original_language": "en",
  "original_title": "Thor: Love and Thunder",
  "overview": "After his retirement is interrupted by Gorr the God Butcher, a galactic killer who seeks the extinction of the gods, Thor Odinson enlists the help of King Valkyrie, Korg, and ex-girlfriend Jane Foster, who now wields Mjolnir as the Mighty Thor. Together they embark upon a harrowing cosmic adventure to uncover the mystery of the God Butcher’s vengeance and stop him before it’s too late.",
  "poster_path": "/pIkRyD18kl4FhoCNQuWxWu5cBLM.jpg",
  "media_type": "movie",
  "genre_ids": [
  14,
  28,
  35
  ],
  "popularity": 3643.289,
  "release_date": "2022-07-06",
  "video": false,
  "vote_average": 6.798,
  "vote_count": 3274
}

Videos Response

{
  "id": 431693,
  "results": [
    {
      "id": "5bde0d090e0a26058d016b4c",
      "iso_639_1": "en",
      "iso_3166_1": "US",
      "key": "LSSGHvzMY60",
      "name": "Spies in Disguise | Official Trailer [HD] | Blue Sky Studios",
      "site": "YouTube",
      "size": 1080,
      "type": "Trailer"
    }
  ]
}

Component Hierarchy

Component-Hierarchy

Contributors

  1. Brendon Van Github Profile
  2. Nick Duitsman Github Profile
  3. Sean Buchas Github Profile