NextBinge

For my 10-day capstone, I built a full-stack mobile-friendly web application named NextBinge. NextBinge helps users find their favorite shows in one place and keep up with currently streaming shows.
It is increasingly complicated to keep up with what’s on TV and where shows are streaming now that networks have developed unique streaming platforms. Users can view the latest trending shows and other popular shows categorized by genre or search by filter/genre. The app also displays the TV show’s details like where the show is streaming, summary, IMDb rating, and season information. From here, you can add/remove the show to your watchlist, favorites, like, dislike, and mark the show as watched. This page also features a discussion section allowing users to comment on a show and reply, like, or dislike posted comments.
Explore the docs »

Video Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. License
5. Contact

About The Project

(back to top)

Built With

• React.js
• JavaScript
• Bootstrap
• Material Design Bootstrap
• React Bootstrap
• Python
• Django
• Django REST Framework
• MySQL
• The Movie Database API
• Movie of the Night API

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

• Clone the backend repository and follow the instructions located here.

• npm

  npm install npm@latest -g

Installation

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

1. Get API keys at:
   • TMDB API
   • Rapid API: Movie of the Night (Streaming Availability)
2. Clone the repo

   git clone https://github.com/nhawks/nextbinge-capstone-frontend.git

3. Install NPM packages

   npm install

4. In the 'src' folder create a file key.js enter your API keys in key.js

   export const RAPID_API_KEY = 'ENTER YOUR API';
   export const TMDB_API_KEY = 'ENTER YOUR API';

(back to top)

Usage

Search by Genre

(back to top)

Search by Title

(back to top)

View the TV Show's details

(back to top)

Play Trailer

(back to top)

Season Information

(back to top)

Discuss the show with others!

(back to top)

My Watchlist

(back to top)

My Favorites

(back to top)

Watched Shows Table

(back to top)

Mobile Friendly

(back to top)

About NextBinge

For more examples, please refer to the Project Video Demo

(back to top)

Contact

NiGeanya Hawkins - nmhawkins@outlook.com