Talkhouse - WebRTC based peer to peer video calling and messaging web app build with MERN stack

Overview

talkhouse

WebRTC based peer to peer video calling and messaging web app build with MERN stack.

Demo

Libraries used

  • React for frontend
  • Socket.io as signaling server and realtime communication
  • simple-peer for peer-to-peer WebRTC connections
  • Express as server
  • MongoDB for persistance of data
  • Material UI for creating ui
  • Redux for state management
  • Typescript for type safety, cure for headache you get when props are flowing all over the app with no hint

Features

  • User authentication and authorization
  • Audio and Video Chat
  • Messaging with storage of messages in the database
  • Sending invitation to friends
  • Able to accept or reject an invitation
  • Online indicator
  • Notify on typing
  • Sceen sharing
  • Accept and reject an incoming call

and more....

Installation

  1. Clone project
git clone [email protected]:saalikmubeen/talkhouse.git

Manual

If you dont't have docker installed, or don't know how to docker, [who doesn't know docker in the first place 😑 ]

cd into root project

1. cd server

npm install to to install server dependencies

Setup required environment variables:

  • MONGO_URI_DEV
  • JWT_SECRET

npm run dev to start development server with nodemon

Make sure you have mongoDB installed

1. cd client

npm install installs client dependencies.

npm run start to start the react development server.

Docker

Running project through docker is recommended. You don't have to do any setup. Just one docker-compose command and boom project is up and running 😊

docker-compose up --build

Make sure you have docker installed

TODOS

  • Enable group video and messaging functionality
  • Implement confirm email, reset password and email sending on friend invitation, Not a big deal to implement, just a little lazy to implement it
  • Store messages in an encrypted form in the database
  • Enhace the UI. I hate CSS, not that good at it 🥱 😓
You might also like...
MERN BLOG - Fullstack open source blogging application made with MongoDB, Express, React & Nodejs (MERN)
MERN BLOG - Fullstack open source blogging application made with MongoDB, Express, React & Nodejs (MERN)

MERN BLOG Fullstack open source blogging application made with MongoDB, Express, React & Nodejs (MERN) Configuration and Setup Key Features Technologi

Refactoring a MERN stack react based front end starter code with a fully functioning Google Books API search engine built with RESTful API to be built with GRAPHQL API with Apollo Server.
Refactoring a MERN stack react based front end starter code with a fully functioning Google Books API search engine built with RESTful API to be built with GRAPHQL API with Apollo Server.

21_MERN_GoogleBookSearchEngine Task Refactoring a MERN stack react based front end starter code with a fully functioning Google Books API search engin

React implementation for the messaging application Crisp

React implementation for the messaging application Crisp

Example of chat web application using Socket.IO with the MERN stack Client in React

Real time chat app Example of chat web application using Socket.IO with the MERN

PostIt is a fully-featured social media web application, built with the MERN stack
PostIt is a fully-featured social media web application, built with the MERN stack

PostIt is a fully-featured social media web application, built with the MERN stack.

A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powered by RAWG API.
A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powered by RAWG API.

Game Store Monorepo A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powe

MERN stack  (MongoDB, Express, React, Node.js) blog app with Chakra UI and Redux.
MERN stack (MongoDB, Express, React, Node.js) blog app with Chakra UI and Redux.

MERN stack (MongoDB, Express, React, Node.js) blog app with Chakra UI and Redux.

A Social media App built using MERN Stack

A Social media App built using MERN It is a Social media app built using mern stack. You can create an account, create posts, like and comment on post

Hotel Booking App Using The MERN Stack With TypeScript & Redux
Hotel Booking App Using The MERN Stack With TypeScript & Redux

HotelBooking Hotel Booking App Using The MERN Stack With TypeScript & Redux 🤩 Features: Room reviews and ratings Room pagination Room search feature

Comments
  • How to demo this?

    How to demo this?

    This is a great project.

    What's the best way to demo this? I keep getting stuck with "Sorry, the user you are trying to invite doesn't exist".

    Screen Shot 2022-04-26 at 12 30 57 PM
    opened by matthannam 2
Owner
Saalik Mubeen
Full Stack Software Engineer | React.js, TypeScript and GraphQL Enthusiast | NIT Sgr' 23 | Civil Engineering
Saalik Mubeen
Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)

?? Shopping App ?? Online Marketplace Built with MERN stack (MongoDB, Express, React and Node). ⚡️ ⚡️ ⚡️ Kiwi Shop ⚡️ ⚡️ ⚡️ ?? Table of contents Main

Tomiwa Adeyemi 10 Dec 23, 2022
Instagram MERN - Full-Stack Instgram Clone using MERN Stack and Socket.io

Instagram MERN Full-Stack Instgram Clone using MERN Stack and Socket.io Visit Now ?? ??️ Tech Stack Frontend: Backend: Realtime Communication: Cloud S

Jigar Sable 327 Jan 4, 2023
A MERN-based collaborative virtual learning platform to help learners find like-minded peer groups and filter through the available plethora of resources.

A MERN-based collaborative virtual learning platform to help learners find like-minded peer groups and filter through the available plethora of resources.

Shreya Biradar 2 Sep 2, 2022
Video chat app built using React, Socket.io and WebRTC

Video Chat Web App It has been built using React, Material UI, Socket.io and WebRTC To open this on your browser click here Backend has been deployed

Thejas N U 4 Sep 23, 2022
To Clarify - a full stack MERN web application designed to help freelance web developers keep workflow organized and to establish clarity and transparency with clients

To Clarify - a full stack MERN web application designed to help freelance web developers keep workflow organized and to establish clarity and transparency with clients

Jay 4 Apr 3, 2022
Messanger - An messaging app buil on React and Redux with socket.io for real time chatting

An messaging app build on React and Redux with socket.io for real time chatting as MERN project you can make a gruop chat as well Login and sigup authenicate with bcrypt and json web token and complete chat is saved on Mongodb

Yash Raj 36 Dec 27, 2022
This is a Covid-19 tracker app built with React JS, Material UI, React Hooks and Chart JS also with the use of API calling.

Info This is a Covid-19 tracker app built with React JS, Material UI, React Hooks and Chart JS also with the use of API calling. API ?? https://covid1

Jerry Leong 3 Mar 24, 2022
Bug-Blog - A Blogging Web App built with MERN Stack

Bug Blog It's a Blogging Web App built with MERN Stack , where users can create

Aaditya 10 Oct 27, 2022
MERN Stack Based Personal Portfolio Website, Designed and Developed by Anirudha Singla ✌ .

A personal portfolio website that provides information about what i do and my other relevant details like skills, experience and accomplishments. Includes all relevant social media and other links of my work and project. Gained experience in web design and development of both front end, back end and database setup.

ANIRUDHA SINGLA 3 Jun 23, 2022
CoderHouse - A Clubhouse project using Node, Express, Mongo, webRTC, socket.io, and React JS

codershouse-mern - This Project is Under Development. Below are some of the impl

Bishal Das 35 Nov 18, 2022