Flixx App

Demo Link:   https://flixx-proxy.onrender.com

Movie info application built with vanilla JavaScript that uses version 3 of the TMDB API

It is part of the Modern JS From The Beginning 2.0 Traversy Media Udemy course.

The App includes the most Popular Movies and TV shows with Detail Pages, a Search box for movies and shows with Full Pagination and a Slider for movies that are currently playing in theaters and trending TV shows. The slider uses the Swiper library.

From the original version of the application built like a classic website, we used Webpack as a module bundler and turned it into a Single Page Application (SPA). We also built a Proxy Server using Node JS and Express JS to Store the api key and Routes for fetching data from the API.

Usage

API KEY

Just clone or download and then register for a free API key at www.themoviedb.org/settings/api

Once you get your key, rename the .env-example file to .env and add your api key to the API_KEY variable.

Install Dependencies

Install dependencies on the front-end and back-end

npm install
cd client
npm install

Back-end/Express Server

node server

or

npm run start

or

npm run dev (Nodemon)

Visit http://localhost:5000

Front-end/Webpack Dev Server

cd client
npm run dev

Visit http://localhost:3000

To build front-end production files

cd client
npm run build

The production build will be put into the public folder, which is the Express static folder.

Reaching the Movie API

We use GET Requests in these methods to retrieve data from the API.

fetchApiData(endpoint)

Method	Description	Endpoint
fetchApiData	Get popular movies	movie/popular
fetchApiData	Get a movie details	movie/${movieID}
fetchApiData	Get popular Tv shows	tv/popular
fetchApiData	Get a show details	tv/${showID}

searchApiData().

Method	Description	Body
searchApiData	Search matching content	{ type, searchTerm, page }