Watch Party

Index

• Title of the Project
• Team Members
• Brief description of the project
• Main Features Implemented
• Tech stack and concepts used
• Thought behind the project
• Further Improvements
• Hosted Link
• Instructions for local setup

Title of the Project

WATCHPARTY

Team Members

Akshat Gupta (2019IMT-011) • Jay Raikhere (2019IMT-044) • Ninad Kalanke (2019IMG-042)

Brief description of the project

• A fully functional Progressive Web App (PWA) in which users can watch synchronized online videos with friends.

• This website allows the users to create/join a room and invite their friends by share the link of their room, so that other people can also join the room.

• There can be open rooms, which anyone can join. On the other hand, they can also be password protected.

• Host can share the password and link of a particular room and other user can enter the room by the link and correct password.

Main Features Implemented

• The Platform plays videos in a fully Synchronized manner.

• The Web App is fully Responsive .

• Made it a Progressive Web App (PWA) . You can install web app in mobile and desktop.

• Implemented a Caching Policy for all the images elements.

• Implemented Code Splitting and different techniques to optimize various performance metrics of the website.

• User Functionalities

  • Authorised users using JWT Token and Cookies
  • Password Recovery and Change Password Feature
  • Joining, Creating and Deleting Room

• Room Functionalities

  • Integrated YouTube search with Voice Recognition
  • Real-time text and Voice Chat
  • Private Room secured with password
  • Request Video Syncronization
  • Share/Invite via social media and email
  • Emoji Palette for text chat

• Host Privilages

  • Make others admin and Remove members from room
  • Lock room, Close room and Delete room

• Admin Privilages

  • Change video url
  • Control video playback

• Home Page View

• Room Page View with Youtube Search

• Room Page View with settings

• Performance Of Website

Tech stack and concepts used

• Backend

  • Nodejs
  • Expressjs
  • MongoDB Atlas
  • Socket.io
  • Heroku Deployment
    

• Frontend

  • React.js
  • Material UI
  • Socket.io Client
  • React-Player
  • Firebase Deployment
    

Thought behind the project

• During lockdown we lost touch with our friends. This project will help to mitigate loneliness and depression.

• This Project helps to connect people to each other even if they are at different locations.

Further Improvements

• We are planing to integrate a real-time video chat with help of Web-RTC

• We will implement Streaming through local file feature.

Hosted Link

https://watch-party-project.web.app/

Link to Frontend Repo: https://github.com/ninad-0408/watchparty_frontend

Instructions for local setup:

Clone this repo using

git clone https://github.com/ninad-0408/watchparty_server.git
cd watchparty_server

After cloning create a .env file to store all the environment variables.
Fill in the .env file with the content as follows.

CONNECTION_URL  = RETRACTED (Put your Mongodb Atlas database url here)
hashtoken = RETRACTED (any random string)
NODE_ENV = "dev"
CLIENT_ID2=  RETRACTED (Put Your client id given by google developer console)
CLIENT_SECRET2 = RETRACTED (Put Your client secret given by google developer console)
EMAIL =  RETRACTED (email from which you want to send email)
REFRESH_TOKEN2 =  RETRACTED (Put Your refresh token given by google developer console)

After setting the .env file,
For installing all Modules and Packages

npm install

To start the server run the command

npm start

The server will start on port 5000.