All Projects → Sudheer121 → Study-Room

Sudheer121 / Study-Room

Licence: other
Connect and study together with friends over text and voice channels, over a click of a button. Web application for chat and audio streaming.

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects
shell
77523 projects

Projects that are alternatives of or similar to Study-Room

Universal React Redux
🧐 A sensible universal starter kit for React + Redux
Stars: ✭ 112 (+433.33%)
Mutual labels:  react-router, expressjs
AmigoChat-Realtime-Chat-Application
AmigoChat is a responsive real-time chat application built on MERN Stack and Socket io.
Stars: ✭ 22 (+4.76%)
Mutual labels:  websockets, expressjs
Express React Boilerplate
Express, MySQL, React/Redux, NodeJs Application Boilerplate
Stars: ✭ 179 (+752.38%)
Mutual labels:  react-router, expressjs
Judo Heroes
A React application to showcase rendering with Universal JavaScript
Stars: ✭ 373 (+1676.19%)
Mutual labels:  react-router, expressjs
react-ssr-spa
Server side rendered single page app using reactjs official libraries.
Stars: ✭ 30 (+42.86%)
Mutual labels:  react-router, expressjs
Ssr React
How to server-side render React, hydrate it on the client and combine client and server routes
Stars: ✭ 67 (+219.05%)
Mutual labels:  react-router, expressjs
socialApp-MERN
Social Networking web app similar to Instagram.
Stars: ✭ 35 (+66.67%)
Mutual labels:  react-router, expressjs
Webrtcchat
🔏 Pure Browser To Browser Chat (STUN & ICE Servers optional)
Stars: ✭ 230 (+995.24%)
Mutual labels:  webrtc, chat-application
bubbly
Full stack chat application created w/ Next.js, Socket.IO, Express, React and TypeScript
Stars: ✭ 24 (+14.29%)
Mutual labels:  expressjs, chat-application
mern-stack-application
A MERN stack e-commerce website.
Stars: ✭ 45 (+114.29%)
Mutual labels:  react-router, expressjs
trivin
⚡️Setup your entire project quickly and easily with 1-line command ⚡️
Stars: ✭ 58 (+176.19%)
Mutual labels:  react-router, expressjs
timeoff-server
TimeOff is an application that allows companies' employees to set vacations before they begin taking their time off. Implemented in modern tech stack i.e. Node, Express, MongoDB.
Stars: ✭ 33 (+57.14%)
Mutual labels:  react-router, expressjs
peermesh
💫 Exchange files p2p and e2e encrypted over a fully meshed network in your browser using WebRTC.
Stars: ✭ 107 (+409.52%)
Mutual labels:  mesh-networks, webrtc
Spring React Boilerplate
Boilerplate application to demonstrate how to wire up Spring, JWT Authentication, React, Redux and Websockets
Stars: ✭ 70 (+233.33%)
Mutual labels:  react-router, websockets
Video Call App Nodejs
A conference call implementation using WebRTC, Socket.io and Node.js
Stars: ✭ 234 (+1014.29%)
Mutual labels:  webrtc, chat-application
react-app-simple-chat-app
A Simple Chat Application using MERN stack (MongoDB, Express JS, React JS, Node JS) and Socket.io for real time chatting
Stars: ✭ 41 (+95.24%)
Mutual labels:  expressjs, chat-application
Kalm.js
The socket manager
Stars: ✭ 155 (+638.1%)
Mutual labels:  webrtc, websockets
Netflux
JavaScript client and server side transport API based on WebRTC & WebSocket
Stars: ✭ 188 (+795.24%)
Mutual labels:  webrtc, websockets
order-service
一个基于vuejs,reactjs,nodejs,socket.io的服务系统
Stars: ✭ 22 (+4.76%)
Mutual labels:  react-router, expressjs
OpenBook-E-Commerce
An e-commerce progressive web application, built with mern stack. It has features like product buy, order management by admin, payment gateway, cart, checkout and lot more.
Stars: ✭ 53 (+152.38%)
Mutual labels:  react-router, expressjs

Study-Room

Chat, Talk, Study....

Study, collaborate, conference ... over click of a button.

A fully functional 🚀 web application where students create/join rooms and communicate using text and audio channels. No registration required . The application connects peers using WebSockets and WebRTC. Check it out here.

New Features

  • Generate room ID and share with friends
  • Directly connect to room with shared link, valid for 12 hours
  • Better UI

Installation

Clone the repo

git clone https://github.com/Sudheer121/Study-Room.git 

Start client and server in different terminals

cd client 
npm i 
npm start
cd server 
cp .env.example .env
npm i 
npm start

You are good to go !!!! .

Note : The server uses a Twilio API (for TURN servers) for voice chat. Not required locally


Desktop and Mobile Views

The application is compatible with both desktop and mobile phones. 

Blog describing how the entire system works

Features

  • Chat using text and voice channels
  • Easy to use UI with everything on one screen
  • Mobile Compatibility
  • Connect with multiple people by choosing unique room ids

Technologies Used

  • Server - Nodejs
  • Client - Reactjs
  • Chat - WebSockets
  • Voice - WebRTC

The need of WebSockets and WebRTC ( short summary )

What's the best application level protocol for enabling a bidirectional communication channel(i.e both client and server can update each other at any time) ?. HTTP works fine when the client has to request data fewer times. HTTP opens up a connection and closes the connection as soon as it gets required response. In case of a chat application we continuously need to listen for data from server, one solution is keep requesting the server for data every few milliseconds, but its resource consuming for both the sides. The solution is WebSockets, it enables a full-duplex bidirectional communication, that is, the client is always ready to listen for data pushed by server. But WebSockets are still not peer to peer, in case of audio/video streaming between multiple peers, creating a direct peer to peer connection is a better option (because loads of data is being streamed), but this is also one of the most difficult things to do. WebRTC helps us create a direct peer to peer connetion. WebRTC is one of the most complex communication protocols because it tries all possible ways to create a peer - peer connection, if it still fails then the data is relayed via a TURN server.


Pull Request

Steps for pull request are a bit different than installation mentioned above.

  • Fork the repo
  • Clone the forked repo locally using git clone ==> git clone forked_repo_link.git
  • Checkout to a new branch, name it appropriately ==> git checkout -b new-feature-xyz
  • Make the changes and commit them
  • Push changes to the forked repo ==> git push origin
  • Start a pull request ==> After pushing, you will see a Compare and Pull Request button on forked repo
  • Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].