An application to display trending movies, TV shows, and other information such as rating, description, poster, cast, etc.
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.
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 TeenFlixIt 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.
To install the required packages, navigate to the project directory and run the following in the shell:
$ npm installTo begin the server, run the following in the shell:
$ npm startThe server will run at http://localhost:3000/
To run tests, navigate to the project directory and run the following in the shell:
$ npm testTo 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.
The application contains four pages for Movies, Series, Trending and Search present within their respective directories in ./src/Pages.
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.
The application contains the useGenre hook present in ./src/hooks.
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 deployAnswer the questions in the shell, and the app is ready!
You can find more information here and here.
- React
- JavaScript
- HTML
- CSS
The application also makes use of the MovieDB API. You can find more information about the API here.