nazimfilzer / whiteboard-collab-shn

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

Hi 👋, I'm Nazim Filzer

• 👨‍💻 Doing Btech CS degree from Model Engineering College Thrikkakara

• 🌐 Exploring BackEnd-Development

• 🌱 I’m currently learning Javascript

• ⚡ Fun fact Hala-Madrid

My Skill Set

Languages & Tools:

Connect with me

Github Stats

---

whiteboard-collab-shn's Issues

Adding Image to the Canvas

Add an Image to the App and Display it in the Canvas so that we can draw above that

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.

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

Add a copy to clipboard button to copy the generated roomid.

The Mobile View is Not responsive

Please make the Mobile View Responsive

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.

Add CORS

Genarate a UUID or a Unique Code in the Landing page

Using this UUid we can enter Specific rooms

Add A Copy button To copy the roomid inside A Room

Toast Timer Component to notify

Create Toast Timer Component to notify that room id is copied .

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.

The Canvas is Broadcasting to everyone .. Broadcast to a Single room only

The Canvas is Broadcasting to everyone in Different Rooms...
It should only be seen by the people in the same room

Migrate to Typescript

Currently the whole app is built with Javascript.
Migrating to Typescript may reduce the type errors in future development

Design Scrollbar

Design Scrollbar in Chat Section. (it should resonate with the Design)

Add Undo,Redo,Clear Canvas in the Drawing Section

Add an Authentication System

Use Node and MongoDB As the Database to store Users...

if this is done then we can go and Save the Chats in the DB (Not to implement now)

Use Es6 For better Formatting and Consistency

In server site change your code from vanilla javascript to Es6 for Consistency ✌

Change Pointer to pencil on canvas hover

Create a Bot in The Chats (Broadcast messages from backend)

Create a Bot which sends messages like "The user have joined the Chat" and " The user has been disconnected " using Socket.io

Initial data is being send to users in different room

Cant Draw on Mobile

The Drawing Feature is Not implemented in the Mobile

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