Project Three - Netflix Reimagined

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

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

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

Home Page

Movie Details

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

---

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

Contributors

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