Watch Video Together is a web application that allows users to create or join virtual rooms where they can watch YouTube videos in perfect synchronization with friends and chat in real-time. This project enhances online social interactions by providing a platform for sharing video-watching experiences, even when users are physically apart.
Invoice and Payment Tracker (React) :- https://watchtogather.netlify.app/ GitHub Link :- GitHub Repository Directory Structure
Group Presentation :- Presentation Link One-to-One Questionaries :- Questionaries Link Video Walkthrough of the Project Attach a very short video walkthrough of all of the features [1 - 3 minutes] Video Link:-https://www.youtube.com/watch?v=Xe0FLyCJLiU
Attach a very short video walkthrough of the questions on the Project [1 - 5 minutes] Video Link:-https://www.youtube.com/watch?v=zziKzGWdilE
- User Authentication
- Secure login and signup
- User roles and permissions
- Room Creation and Joining:
- Users can create a room with a unique identifier and share the link for others to join.
- Users can join an existing room using the shared link.
- YouTube Video Sync
- Users can paste a YouTube video link, and the video will be played in sync across all users in the room.
- Play, pause, and seek actions by any user are reflected for all users in real-time
- Real-Time Chat
- Users can chat with each other in real-time while watching the video.
- The chat is displayed alongside the video player.
- User Presence:
- A list of users currently in the room is displayed.
- Moderation Tools:
- The room creator (host) can kick users out and control video playback.
- Notifications
- Email reminders for due payments
- Notifications for new invoices and payments
- Screen Sharing:
- The host can share their screen instead of a YouTube video.
- Notification System:
- Users receive notifications for new messages, users joining or leaving, and other important events.
React Framework: React is used for building the user interface. Chakra UI and Tailwind CSS: These are used for styling and creating a responsive design. Redux: Used for state management. Vite: Used as the build tool for faster development and optimized production builds. Assumptions:
API Services: The application assumes that the backend API services for user authentication, invoice management, and payment processing are available and reliable. Responsive Design: The application is designed to work on both desktop and mobile devices. Performance: The application assumes acceptable performance considering the use of modern libraries and frameworks. Installation & Getting Started Detailed instructions on how to install, configure, and get the project running.
bash Copy code
git clone https://github.com/SoumyaSubhamPatra/Tech-Titans_046.git
cd Tech-Titans_046
npm install
npm start Usage Instructions and examples on how to use your project.
Download or Clone the Project:
Clone the repository to your local machine using Git. Or download the project as a zip file and extract it. Open the Project Files:
Navigate to the project directory and open the project in a code editor like Visual Studio Code. Install Dependencies:
The project uses npm for package management. Run npm install to install the required dependencies. Run the Project:
Start the development server using npm start. Open http://localhost:3000 in your web browser to view the project. Backend Server:
Ensure the backend server is running and accessible. For a mock server, you can use json-server. bash Copy code
npm install -g json-server
json-server --watch db.json Credentials Provide user credentials for authenticated pages
GitHub user-id
Team-Lead: Soumya Subham Patra (SoumyaSubhamPatra) Collab-1: Suraj Pradip Kamble (suraj0119) Collab-1: Arnab Dutta (ar98anb)
Manager I.A: Aashis Kumar Technology Stack A brief overview of the technologies used in the project:
React TypeScript Chakra UI Tailwind CSS Redux Vite Node.js Express MongoDB