415CA / mediatrac-frontend

Mediatrac is a web app that allows users to check out information on new and upcoming movies as well as build a library of their favorite classic films.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Mediatrac

Mediatrac is a web app that allows users to check out information on new and upcoming movies as well as build a library of their favorite classic films.

Link to Live Demo

Link to Backend API

Mediatrac

Table of Contents

  1. Install Rails Backend API

  2. Install Node.js and npm

    $ brew install node

  3. Clone this repo and cd into the directory

  4. Install all dependencies

    $ npm install

  5. Create a Firebase project with your Google Account

  6. Create an .env file in the React project's root folder with the following info from your Firebase settings.

    REACT_APP_API_KEY=XXXXxxxx 
    REACT_APP_AUTH_DOMAIN=xxxxXXXX.firebaseapp.com
    REACT_APP_DATABASE_URL=https://xxxXXXX.firebaseio.com
    REACT_APP_PROJECT_ID=xxxxXXXX
    REACT_APP_STORAGE_BUCKET=xxxxXXXX.appspot.com
    REACT_APP_MESSAGING_SENDER_ID=xxxxXXXX
    REACT_APP_CONFIRMATION_EMAIL_REDIRECT=http://localhost:3000
    
  7. Add an API key from The Movie Database (TMDb) API to the .env file

    REACT_APP_TMDB_API_KEY=XXXXX
    
  8. Make sure the Rails server is running and then run the app

    $ npm start

Search Films

Search from over half a million titles in the TMDB database

Search Films

Films

Each film page contains a description, cast and crew information, trailers, social media links, a NY Times review, and user reviews

Details Page

Details

Trailers

Trailer

Recommended Films

View Destination

Favorite Films

Users can keep track of their favorite films through the My Movies watchlist.

Favorite Films

New Releases

The New Release page gives you a list of the latest film releases broken down by genre.

New Releases

Auth & Account Features

Log in via email and password or existing Google account with Firebase Authentication

Auth & Account Features

About

Mediatrac is a web app that allows users to check out information on new and upcoming movies as well as build a library of their favorite classic films.


Languages

Language:JavaScript 95.6%Language:HTML 2.7%Language:CSS 1.8%