/watchparty_frontend

Primary LanguageJavaScript

Website Logo Watch Party

Index

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

  • Frontend

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

  • Backend

    • Nodejs
    • Expressjs
    • MongoDB Atlas
    • Socket.io
    • Heroku 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 Backend Repo: https://github.com/ninad-0408/watchparty_server

Instructions for local setup

Clone this repo using

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

For installing all Modules and Packages

npm install

Install node modules.

npm start

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

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.