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
Share this project:

Updates