forthebadge

Nicflix is a Netflix website clone designed to showcase the awesomeness of Nicolas Cage. Browse, play, and enjoy Nic Cage's greatest hits, all in one platform.

Backend : Ruby on Rails
Frontend : React-Redux
Database : PostgreSQL
Hosting : Heroku
Inspiration: Nicolas Cage

Highlighted Features and Code

Movie Thumbnail Catalog

Featured movie playback in background
Preview playback and more information on hover

Using a combination of Javascript and CSS, the movie thumbnails expand, play a preview, and show further information about the movie when moused over by the user. This is accomplished by using CSS to enlarge the thumbnail and show the movie's information (runtime, mpaa rating, and genres) while javascript handles the playback, stopping, and muting of the background movie video.

Hover Playback

Javascript

handleEnter(){
    this.idString = "#".concat(this.props.genre).concat(this.props.movie.id)
    let thumbVid = document.querySelector(this.idString);
    thumbVid.play();
    let indexVid = document.querySelector(".index-video");
      if(indexVid){
        if(indexVid.muted===false){
        this.props.forceMute();
      }}
  }

  handleLeave(){
    this.idString = "#".concat(this.props.genre).concat(this.props.movie.id)
    let thumbVid = document.querySelector(this.idString);
    thumbVid.load();
  }

CSS

.movie-thumb-container:hover{
    transform: scale(1.5);
    z-index: 2;
    background-color: #1d1d1d;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

.movie-thumb-container:hover .thumb-info{
    opacity: 1;
}

.thumb-info{
    opacity: 0;
    padding:15px;
    padding-left: 25px
}

Search

Instant search loads thumbnails instanly as user searches
Allows users to search for titles, keywords, genres, and mylist
Searches even with incomplete search terms

Utilizing React Component Routes and passing the search term as the wildcard for the url enables results to show in real time. In searching for matches, the search term is trimmed of spaces and special characters and can be matched with either the genre, a full or partial match with the title, or 'mylist' if it is part of the user-created list of movies.This format saves code rewriting by basically using the same component for three separate features of the app.

React Component Routes for Instant Searching

<ProtectedRoute exact path="/browse/:searchTerm" component={SearchResultsContainer} />

Search logic for matches

//mylist
if(trimmed==='mylist'){
    if(Object.values(list).includes(movie.id)){
        return true;
    }
}
//match with genre
if(movie.genre.name.toLowerCase()===trimmed){
    return true;
}
//match with title
if (trimTitle.match(trimmed)!=null){
    return true;
}

Contact

grmreyes@gmail.com

grmreyes / nicflix

readme