shawntru / rotten-tomatillos Goto Github PK

HTML 4.25% CSS 0.91% JavaScript 73.15% SCSS 21.68%

rotten-tomatillos's Introduction

Rotten Tomatillos - Turing Mod 3 Paired Project

Original Project Spec

Project Overview
Features
Technologies and Tools
Challenges
Wins
ScreenShots and Demos
Roadmap
Credits

Project Overview

Rancid Tomatillos is a movie rating and information site where a user can get trailers and info for new and upcoming films, which are pulled from a heroku API.

It was created as a Module 3 project in the Turing Front End Engineering course.

Features

Random Film Previews on Load - The site gets a random movie from the information pulled from the API and displays the films trailer and information to the user.
Completely Searchable - The site responds in real time to queries using the search bar and displays them to the user
Detailed Movie Information - Each movie can be clicked in order to preview details from the film, such as release date, budget, trailer, and overall rating.
Fast and Responsive - Using React, the site provides a quick and responsive user experience.
Navigation and Bookmarking - Router allows the user to navigate the site using common sense URLs, as well as allowing the ability to bookmark their favorite movies.
Contains Robust Testing - All functionality is complimented by a robust testing suite, enabling easy expansion of the code base.

Technologies And Tools

JavaScript (ES6)
HTML
CSS/Scss/Sass
React
Router
JSX
Jest

Challenges

Integrating async testing
Working with states of React components
Implementing HTML and JavaScript logic in React

Wins

Creating a responsive website with multiple features.

ScreenShots and Demos

Homepage

**Under the Hood**

Homepage:

Homepage is a landing page for users. As you open the website the first thing users will see is a randomly chosen trailer from the library that starts palying automatilly. The sound was disabled for this feature. The trailer conatainer has all necessary informmation about the movie such as: title, release date, genres, and time.

For displaying trailers we used react-player component:

<ReactPlayer
  data-testid={`${this.state.movieTrailer}`}
  className="react-player"
  url={`https:www.https://www.youtube.com/watch?v=${this.state.movieTrailer}`}
  width="100%"
  height="100%"
  controls={false}
  muted={true}
  playing={true}
  loop={true}
  config={{
    youtube: {
      playerVars: {
        disablekb: 1,
        fs: 0,
        iv_load_policy: 3,
        playlist: `${this.state.movieTrailer}`,
        modestbranding: 1,
      },
    },
  }}
/>

Under the trailer users will find the list of all available movies which are clickable. On click the website takes users to a single movie page that contains detailed information about a chosen movie.

The navigation bar on top of the website includes a search bar that allos users to find a specific title of the movie, if the title is not found the page shows nothing.

Search bar demo:

Single Movie Page

**Under the Hood**

Movie Preview Page:

Here the users will find the following information about the chosen movie:

Movie Poster
Rating
Release Date
Runtime
Budget
Revenue
Genres
Overview
Trailer

Users are able to return to the homepage by pressing the closing button in the top right corner.

Roadmap

Future additions to include:

Create alphabetical sorting for the home page movie view
Create user accounts with login
Add watchlist/save movie functionality linked to user accounts

Credits

Olga Morgan GitHub Profile

Shawn Truesdale GitHub Profile

rotten-tomatillos's People

Contributors

Stargazers

Watchers

Forkers

okalimbet

rotten-tomatillos's Issues

Create testing for Navbar

Should be displayed

Create testing for MovieCard

should display title and movie poster

Create single movie layout

When a user clicks a movie, that movie’s details should be rendered
When a movie’s details are displayed, none of the other movies will be visible; it should just be that movie’s details (header/footer/etc can still be visible, of course!)
When a movie’s details are displayed, the user should have a way to return to the main view of all movies