ShareMyCode

Inspiration

Originally, we planned to create a skribbl.io clone, so we decided that the minimum viable product for that app would be a working real-time chat box using socket.io. After completing the chat box, with many struggles and time constraints, we decided to go the simpler route and create a real-time notepad, similar to codeshare.io.

What it does

• Real-time chat with other users
• Real-time notepad to collaborate with other users
• A jukebox that has one song for you to listen to while chatting and jotting stuff down

How we built it

Originally planned to use react-redux for the project, but we decided to experiment with something more modern like React hooks, compared to the class components we were accustomed to. For the real-time communication between front-end and back-end we used socket.io, built on an Express back-end. We then deployed the app using heroku.

Challenges we ran into

• Had no idea how to use React hooks, so it took a while to understand it
• Had no idea how to use socket.io, or even what sockets are, but we learned by example
• A bit of struggle implementing the username system
• Annoying configuration and deployment bugs for a single repo project, since we were accustomed to splitting up front-end and back-end into 2 separate projects.

Accomplishments that we're proud of

• Actually made a working real-time chat and notepad in 3 days from the ground up

What we learned

• React hooks
• socket.io
• Time management under constraints
• Knowing what to prioritize

What's next for ShareMyCode

• Syntax highlighting
• Themes
• Fully functional private messaging
• Maybe actually build the skribbl.io clone
• More responsive UI, move the chat input to the bottom and load the messages above it
• Allow multiple cursors, show which user corresponds to which cursor
• Remove users from list upon disconnecting
• Fix an annoying user login bug that prevents them logging in after choosing a username that already exists

Built With

• express.js
• heroku
• react
• socket.io