TeenFlix App

An application to display trending movies, TV shows, and other information such as rating, description, poster, cast, etc.

Table of Contents

• Table of Contents
• About
• Getting Started
  • Prerequisites
  • Installing
  • Running the tests
• Usage
  • Pages
  • Components
  • Hooks
• Deployment
• Built Using
• Authors

About

TeenFlix is a React-based application that displays the top 200 trending movies and TV shows along with their rating, type, poster, release date, trailer' and title.

The short video below shows how the application works.

Users can also search for movies and TV shows separately with options to filter them by multiple genres such as Action, Adventure, Animation, Comedy, Crime, Documentary, Drama, Fantasy, Family, History, Horror, Music, Mystery, Romance, Science Fiction, TV movie, Thriller, War and Western. Multiple filters can be applied to refine the searches.

Users can also search for movies and TV shows by title, and view all results that match the given keyword.

Clicking on each title would show users the movie poster, title, description, movie cast, tagline and a button to view the movie trailer as well.

Getting Started

A live version of the application is deployed on Netlify here.

To download it on your local machine, follow the steps below.

$ git clone https://github.com/Rajeet10/Teenflix.git
$ cd TeenFlix

Prerequisites

It is important to have node and npm installed on your system for running the application locally.

You also need an API key for your application from the MovieDB API. This API Key would be assigned to the REACT_APP_API_KEY in the environmental variables in the .env file.

Installing

To install the required packages, navigate to the project directory and run the following in the shell:

$ npm install

To begin the server, run the following in the shell:

$ npm start

The server will run at http://localhost:3000/

Running the tests

To run tests, navigate to the project directory and run the following in the shell:

$ npm test

Usage

To view the top trending movies and TV shows in order of popularity navigate to the home page of the application or the trending tab.

To view movies individually, navigate to the movies tab and apply filters by clicking on the buttons. All selected filters are applied together.

To view TV shows individually, navigate to the TV Series tab and apply filters by clicking on the buttons. All selected filters are applied together.

To search for movies or TV shows, navigate to the Search tab and enter your query in the search bar.

All the content is paginated, and subsequent pages can be viewed by scrolling to the bottom of the page and selecting the next page.

Pages

The application contains four pages for Movies, Series, Trending and Search present within their respective directories in ./src/Pages.

Components

The application contains many components such as the Carousel, ContentModal, Genres, Header, Pagination, Single Content and Main Navbar which can all be found in their respective directories in ./src/Components.

Hooks

The application contains the useGenre hook present in ./src/hooks.

Deployment

This application has also been deployed on Netlify over here.

In order to deploy this application using Netlify, follow the steps below:

$ cd Teenflix
$ npm run build
$ npm install netlify-cli -g
$ netlify deploy

Answer the questions in the shell, and the app is ready!

You can find more information here and here.

Built Using

• React
• JavaScript
• HTML
• CSS

The application also makes use of the MovieDB API. You can find more information about the API here.

Authors

• @Rajeet10