WatchShroom π
WatchShroom is a π unique website that allows you to create π virtual rooms and share a Room ID with your friends and guests. These rooms are not just ordinary spaces; they are π¬ multimedia hubs where you can enjoy videos, π¨οΈ chat with friends, and control the playback of videos in real-time.
Features π
Create and Join Rooms π
- Hosts can create rooms and share a Room ID with guests. π
- Guests can join rooms using the provided Room ID. π
Video Playback πΊ
- Hosts can add videos to the playlist from various supported platforms, including:
- Facebook π
- Vimeo π₯
- Wistia π½οΈ
- Dailymotion πΉ
- SoundCloud π΅
- Mixcloud πΆ
- Twitch (excluding live streams) πΉοΈ
- Direct video links π
Real-time Video Control β―οΈ
- Hosts have full control over video playback, including play, pause, seek, and more. β©βΈοΈ
- When a video buffers for the host, playback pauses for all users until buffering is complete. πΆ
Chat Functionality π¬
- Engage in real-time conversations with other users in the chat corner. π¬π¬
Installation π οΈ
To run WatchShroom, you will need Node.js and MongoDB installed on your system.
- Clone the repository:
git clone https://github.com/Zbiba42/WatchShroom.git
- Install dependencies for both the client and server:
npm install
cd back-end
npm install
Usage π―
Development Mode π§
To run the website in development mode:
- Start the client (frontend):
npm run dev # In the client folder
- Start the server (backend):
cd back-end
npm run dev:watch # For watch mode
# OR
npm run dev
Building the App ποΈ
To build the app:
- Build the client:
npm run build
- Serve the build:
serve -s build
- Build the server:
cd back-end
npm run build
- Run the server:
npm start
Client Dependencies π¦
axios
: HTTP client for making requests. πreact
andreact-dom
: React for building user interfaces. βοΈreact-player
: A React component for playing media.βΆοΈ react-router-dom
: Routing library for React. π£οΈreact-toastify
: Toast notifications for React. πsocket.io-client
: Socket.IO client for real-time communication. π‘
Server Dependencies π’
express
: Web application framework for Node.js. πmongoose
: MongoDB object modeling library. πsocket.io
: Real-time bidirectional event-based communication. π‘ts-node
andtypescript
: TypeScript support for the server. π¦cors
: Cross-Origin Resource Sharing middleware for Express. π€@types/express
and@types/node
: TypeScript type definitions for Express and Node.js. π§Ύ
Contributing π€
Feel free to contribute to WatchShroom by opening issues or pull requests. We welcome your ideas and suggestions! π
Enjoy using WatchShroom, and happy watching! ππΊπ