A Collabration Web-App using Express, React and Socket.io where Mutiple People can Join a Private room and Chat, Draw Among themselves. This project was selected as one of the best project at Tinkerhub Hacknight

Related tags

React Apps react nodejs css node socket-io scss expressjs hacktoberfest good-first-issue hacktoberfest-accepted hacktoberfest2022
Overview

Collaber

A Collabration Web-App using Express, React and Socket.io where Multiple People can Join a Private room and Chat, Add Images and Draw Among themselves

Table of Contents

  1. What is Collaber
  2. Team Members
  3. Key Features
  4. Project Demo
  5. Installation
  6. Dependencies

What is Collaber?

Collaber is a Collabration Web-App using Express, React and Socket.io where Multiple People can Join a Private room and Chat, Add Images and Draw Among themselves. Users can create Rooms on the go or jump into created rooms and get started instantly. Collaber offers the import of external files for your convenience. It has it's own built-in group chat for all your communication needs! It offers brush colours of all kinds, an eraser and multiple brush sizes to make your drawing or plan as expressive as required. The learning curve is absolutely minimal.

Team Members

  1. Nazim Filzer
  2. Muhammed Jamal P
  3. Jozef Antony Neelamkavil

Key Features

  • Fully Opensource
  • Easy setup
    • With an easy 3 steps guided setup process, setup is easier than you can imagine.

🔧 Project Demo:

Live Demo

Hosted Link : https://collaber.netlify.app/

Collab-App.mp4

Installation

Steps To Run the Project:

1.Downloading the Modules

- node version used is <17.0.0 (If ur Node version is Greater than 17, eg v18 then the app wont run)
git clone https://github.com/NazimFilzer/WhiteBoard-Collab-SHN.git

cd Collab-Chat-App

cd client
npm install -f

cd ..
cd server
npm install

2.Starting the Servers (Frontend Server)

cd client
npm start

On Another Terminal (Backend Server)

cd server
npm start

Dependencies

Node v16.*

Comments
  • Show All the users who is Online in the Chat page

    Show All the users who is Online in the Chat page

    When a person joins a room, the Backend Detects the connection.. Now we need to send that info to the frontend and Show the online people who are connected in the same room

    enhancement help wanted good first issue hacktoberfest nodejs socket.io 
    opened by NazimFilzer 10
  • copy button added #38

    copy button added #38

    When the website renders or refreshes, a new room id is produced, and next to it is a copy button that copies the room id to the clipboard. I have now removed the generate button.

    hacktoberfest-accepted 
    opened by raghavpatidar 6
  • prettier config file missing

    prettier config file missing

    everyone uses prettier code formatter , so everyone has different global prettier configuration, which leads to multiple unnecessary changes in file. So having a local prettierrc and prettierignore can eliminate these unnecessary changes.

    opened by Shubhamsahu19 2
  • Prettier config file missing

    Prettier config file missing

    What is the issue?

    Nowadays everyone uses Prettier, An automated code formatting tool.

    The issue is everyone have different global settings of prettier according to their style. BUT this can cause useless changes to opensource projects as many people works on same code.

    So having a prettier config file inside project directory can resolve this issue.

    How to solve this issue?

    adding a file .prettierrc and .prettierignore will solve this issue

    opened by FireeagSaini 1
  • User not getting whiteboard data when he joins

    User not getting whiteboard data when he joins

    A new user is not getting previously written data on the whiteboard by users when he freshly joins.

    This data gets reflected after updates by other users.

    enhancement hacktoberfest 
    opened by funactuator 1
  • Feature/online users

    Feature/online users

    Implemented current Online users in a room related to issue #17

    1. Implemented UI Changes for the same as shown Below image

    2. Created a socket event "members" for updating online players

    3. Two methods have been created in the server/index.js a. handleRoomJoin b. handleRoomLeave Their descriptions are given in the code.

    hacktoberfest-accepted 
    opened by funactuator 1
  • Feature request: Tools for collaborating with code

    Feature request: Tools for collaborating with code

    It would be very useful if some additional tools can be added for collaborating with code. Maybe some syntax a separate pop up to enter code with syntax highlighting, code formatting, etc.

    enhancement good first issue hacktoberfest 
    opened by alapanoski 1
Owner
NzM
CS Undergrad @ Model Enguneering College, Thrikkakara
NzM
GitHub
💹💕💕 Interaction is an open-source chat application that allows different people from the world to interact in real time, in either private or public rooms.

interaction Interaction is an open-source chat application that allows different people from the world to interact in real time, in either private or

crispengari 4 Jul 16, 2022
This is a chat application where users can chat with people, create posts, save post etc.

Chat Application This is a chat application where users can chat with people, create posts, save post etc. Design inspired by Uchechukwu Ajalam (https

DanLowo 46 Jan 6, 2023
Snow - social network can upload posts, upload images, create polls, interact with friends, create and join groups, and even includes its own chat to talk

Snow is a social network. Here you can create and share content! You can upload posts, upload images, create polls, interact with friends, create and join groups, and even includes its own chat to talk

Mateo Leal 70 Nov 28, 2022
Real-time chat app using Firebase, React, TailwindCSS, MongoDB, Node/Express, and Socket.io

Let's Chat A real-time chat application. Another fun side project :) GIFs are attached at the end. Technologies Used React and TailwindCSS for the fro

Hana Belay 31 Jan 4, 2023
React group project that consume space-x api you can reserve rocket or join mission

Space-Travelers-Hub React group project Space-Travelers-Hub ?? Table of Contents ?? About the Project ?? Built With Tech Stack Key Features ?? Live De

Reem 4 Feb 13, 2023
Movies Reviewed by people, for people

PopCritic Movies Reviewed by people, for people PopCritic is a movie review website which is focussed on various aspects of films and help people find

Abhishek Chaudhary 74 Nov 13, 2022
Small chat system written by React, Socket.IO, Express, HTTP and Cors.

React-SocketIO Chat System The project is a small chat system which socket server has been written by Socket.IO, Express, HTTP, Cors and etc., and Rea

Ali Bahaari 4 Sep 3, 2022
Symbol Recognizer - a simple tool that allow draw one digit or caracter and send to an AI try to predict what you drew!

Symbol Recognizer It's a simple tool that allow draw one digit or caracter and send to an AI try to predict what you drew! See it working: https://rea

Lucas Del Puerto Garcia 4 Oct 11, 2022
Tesla-Dashboard - A dashboard built with React, Node.js, and Express.js to visualize some data from Tesla's Private API.

Tesla-Dash Welcome to the Tesla Dash repository! This is a starter repository to demonstrate building a full-stack app using the private Tesla API. Yo

CoolTech 9 Nov 8, 2022
This project intends to bring all the best of best components irrespective of what libraries it is in for React Developer.

This project intends to bring all the best of best components irrespective of what libraries it is in for React Developer.

Smruti Ranjan Badatya 14 Nov 17, 2022
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

Lucifer1123 1 Dec 22, 2021
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
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
Realtime Chat App with React, Node.js, Socket.io and MongoDB

reactchatapp Realtime Chat App Features/Components Uses React Js for UI Backend using NodeJs Authentication using JWT MongoDB for database Socket.io f

Aayush Jha 15 Dec 22, 2022
Chat Application Using React, Node.js and Socket.io with MongoDB

Steps to Start the App Install the Public Dependencies Install the Server Dependencies In the Server Directory there's a .env file. Change the value o

Kishan Sheth 244 Dec 31, 2022
Chat rooms using react and socket.io

Chat rooms This is a project I made to try out socket.io Both react and socket.io (at the time of writing) are relatively new to me. Running Locally R

KrYmZiN 7 Jun 2, 2022
A real-time chat application made using ReactJs, ExpressJs, NodeJs, and Socket.io.

insta-chat Live Site ScreenShots Instachat is a real-time chat app made with ReactJs on the front-end and ExpressJs , NodeJS , Socket.io web socket li

Midhun Chandran 12 Jun 12, 2022
Discord Clone using React, Node, Express, Socket-IO and Mysql

React Discord Clone Functional Discord Clone written in Typescript using React, Socket IO, NodeJS, Express and MySQL View the live verison at -> http:

Eric Ellbogen 401 Dec 27, 2022
Discord-clone - Discord Clone using React, ReactQuery, Tailwindcss, Redux, Socket IO, NodeJS, Express, MongoDB and Redis

Discord Clone using React, ReactQuery, Tailwindcss, Redux, Socket IO, NodeJS, Ex

Milad Ranjbar 205 Dec 18, 2022