Hosted, older version of the applicaton: https://sharedwatch.azurewebsites.net/
Below there are screenshots presenting the current version.
Shared Watch is an online platform created for collaborative video watching sessions in virtual rooms.
The application allows users to set a username upon opening, granting access to functionalities including room browsing, filtering, joining existing rooms, and creating new ones.
User access to functionalities is username-dependent, with the username state persisting across sessions. Users can join public or private rooms, with conditions for joining such as unique usernames and room availability. Private room access requires password authorization.
Upon room creation, users are directed to the room view, where they can chat, manage a video playlist, view user lists, and access room settings. Roles include user and administrator, with administrators automatically assigned to room hosts Administrators can manage permissions, set passwords, assign roles, and remove users.
Chat messages include sender usernames and timestamps, while playlist videos feature titles and thumbnails. The video player synchronizes playback across users, and room state updates are real-time. New users inherit the room's current state, with inaccessible elements hidden or disabled.
Rooms are deleted upon all users leaving.
The working Google Youtube API key is needed in the dotnet-server/appsettings.Development.json file for the playlist and video player to work.
The key needs to be set in the dotnet-server/appsettings.json file if the application is to be deployed.
Docker is required to run the TimescaleDB.
- React with Typescript (built with Vite)
- Toastify - toast notifications
- React Player - video player integration
- React Router Dom - navigation of the React application
- Axios - HTTP requests and responses
- Bootstrap - styling and responsive design
- Preact Signals - state management
- SignalR - bi-directional, real-time communication
- ASP.NET Core (REST API)
- TimescaleDB
- Google.Apis.Youtube.v3 - access to Youtube API methods
- SignalR - bi-directional, real-time communication
React application:
npm installnpm run start
ASP.NET Core application:
dotnet run
TimescaleDB:
docker-compose upin the directory of thedocker-compose.ymlfile
User interface supports devices with various resolutions due to the responsive design.
Sample toast notification
