Clique is a web application (heavily inspired by Watch2Gether) for users wanting to watch videos in real-time together. It uses a CRUD account system which allow users who signed up to create rooms. Each room comes with custom video player widgets, chat integration, and a search bar.
This project is no longer being maintained but you can still demo it here.
Alternatively, you may want to check out this GIF demo:
For cloning and installing the packages on the frontend & backend:
$ git clone https://github.com/PtJung/Clique.git
$ cd Clique
$ npm i
$ cd lib
$ npm i
Create an .env file within the Clique directory. Then, fill in the values for each of the following keys:
REACT_APP_ATLAS_URI - MongoDB connection URI
REACT_APP_PORT - Port to run the server on
REACT_APP_SESSION_LIFE - Life of an account session in seconds
REACT_APP_API_URL - Backend API url
REACT_APP_JWT_SECRET - Secret
REACT_APP_SESS_SECRET - Secret
REACT_APP_YT_SECRET - Secret
REACT_APP_PERMIT_KEY - Secret
From the Clique directory, run both of the following:
$ node lib/server
$ npm start
- MongoDB Atlas - For storing users and rooms in a database
- Express.js - Executes most backend logic via REST API
- React - Used to create most of the frontend
- Node.js - The runtime in which Clique runs on
- Socket.io - Emulates real-time interactions between users
- jQuery - Implements a clickable version of DataTables
- YouTube Data API - Retrieves search bar results
- YouTube Player API - Manipulates the IFrame for real-time video playing
Usage is provided under the MIT License. See LICENSE for the full details.