Skip to content

saikatXshrey/Bioscope-OTT-platform

Repository files navigation

🍿BIOSCOPE

The Project “BIOSCOPE” is a web app(pwa) that lets us to know the information related to the movies. This app will be helpful to find the release date of movies, people can search for movies even by voice. Find out recommendations,also see cast and reviews and trailers of all movies and web series and review any movie and tv shows easily. Also app helps you keep track of your "Favourite list" which the "firestore-db" keeps safe and sound according to users-login.

In this project, we have used the Recycler view to show the list of the movies. As we click on a movie, it directs the user to another activity that contains the poster along with release date and ratings. On the front page, we have a search interface to search for any movie of our liking. It also contains a spinner that contains options like top rated movies, upcoming movies, now playing and popular movies for the users to choose from.

Plus it will recommend you about the movie/series based on your search and you can even sort the movie/series based on "genre"

Moreover it is a PWA which is an awesome technology through which you can install the app in any device such as android/ios/PC so it is platform independent and also you can obviously access the web app through the given link😀✌

It is very benefecial for movie addictive people who can't keep track of the movies they saw/willing to see and can ultimately buy/rent out the movie/series from platforms.

BIOSCOPE has user-aunthentication and user-uid based db's records and and keeping the security in mind we added "email-push" notification when a user wants to change password and it has "email & password validation" for protected surfing🐱‍👤.

Live Link🚀🚀

🍿BIOSCOPE

Documentation

Documentation

Presentation

Demo

Demo Videos

A short demo of our Web App🐱‍👤

"forget password🧠" feature Demo

PWA PC Demo🔥

Mobile PWA Demo💨

Screenshots

Web App Demo

Screenshot (26)

Screenshot (12)

Screenshot (13)

Screenshot (14)

Screenshot (18)

Screenshot (20)

Screenshot (21)

Screenshot (22)

Screenshot (26)

Screenshot (19)

PC PWA App

Screenshot (1066)

Screenshot (1067)

Screenshot (1068)

Screenshot (1069)

Screenshot (1070)

Mobile PWA App

mb-1

mb2

mb3

mb4

mb5

mb6

mb12

mb10

mb8

mb11

mb13

mb14

Firestore DB

Screenshot (24)

Screenshot (25)

Screenshot (23)

API Reference

Api used : The Movie Database(tmdb)🎬

Get trending movie/series

  GET /api/trending/all/day?api_key=?{...}&page={...}

  https://api.themoviedb.org/3/trending/all/day?api_key=${process.env.REACT_APP_API_KEY}&page=${page}
Parameter Type Description
api_key string Required. Your API key
pages string Required. Number of Pages

Get all tv-series(sort by genre)

  GET /api/discover/tv?api_key=?{...}&page={...}&with_genres=${...}

  https://api.themoviedb.org/3/discover/tv?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=${page}&with_genres=${genreforURL}
Parameter Type Description
api_key string Required. Your API key
page string Required. Number of Pages
genres string Required. Genre of Tv-Series

Get all movies(sort by genre)

  GET /api/discover/movie?api_key=?{...}&page={...}&with_genres=${...}

  https://api.themoviedb.org/3/discover/movie?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=${page}&with_genres=${genreforURL}
Parameter Type Description
api_key string Required. Your API key
page string Required. Number of Pages
genres string Required. Genre of Movies

Get searched movies/tv-series

  GET /api/search/type{...media_type...}api_key=?{...}&querarcy=${...searchText...}&page={...}

  https://api.themoviedb.org/3/search/${type ? "tv" : "movie"}?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&querarcy=${searchText}&page=${page}&include_adult=false
Parameter Type Description
api_key string Required. Your API key
page string Required. Number of Pages
query string Required. Your Search Text

Get movies/tv-series on Search Recommendation

  GET /api/type{...media_type...}/{...id...}/recommendations/api_key=?{...}&page=1

  https://api.themoviedb.org/3/${media_type}/${id}/recommendations?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&page=1
Parameter Type Description
api_key string Required. Your API key
id string Required. Current movie/tv-series id
media_type string Required. Movie/Tv-Series

Get Movie/Tv-Series Trailers

  GET /api/watch?v={...video name...}

  https://www.youtube.com/watch?v=${video}
Parameter Type Description
movie/tv-series name string Required. Video name

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

API_KEY : get your own api_key from The Movie Database(tmdb)🎬

ANOTHER_API_KEY : connect your Firebase account & configure it in "firebase.js"

npm packages used

Material-Ui

  npm i @material-ui/core
  npm i @material-ui/icons
  npm i @material-ui/lab

Axios

  npm i axios

React-Bootstrap

  npm i bootstrap
  npm i react-bootstrap

Firebase & Firestore DB

  npm i firebase

React-Alice-Carousel

  npm i react-alice-carousel

React-Router

  npm i react-router-dom

React-Speech-Recognition

  npm i react-speech-recognition

Run Locally

Clone the BIOSCOPE project

  git clone https://github.com/saikatXshrey/Bioscope-OTT-platform

Go to the project directory

  cd my-project

Install dependencies

  npm install

Start the server

  npm run start

or

  yarn start

Deployment

To deploy this project run

  npm run deploy