Inspiration

To make any online game, service, or chat, websockets are almost required. Unfortunately, implementation of websockets is notoriously difficult. Even with simplifying libraries like socket.io, they’re still convoluted enough to intimidate beginner and intermediate coders. Plus, there’s often more boilerplate than is worth doing for many applications.

Our goal with Syncrosse was to create a very accessible, efficient, and open-source library that allows anyone to create an app with web sockets, even without any prior experience.

What it does

Syncrosse provides both a server and web client via the node package manager (NPM). When used together, these two libraries allow for a very quick and easy to set up connection between the front end and backend. The user is able to easily define, manage, and perform actions and events.

Syncrosse also has built-in support for multiple lobbies, making it easier than ever to have several instances of your game or application running at once. It also comes with chat out of the box, so with only a couple lines of code you can have 100% working chat functionality.

How we built it

We build Syncrosse using a combination of TypeScript, React, Node.js, Heroku, and Socket.io, as well as Jest for testing. We handled all the boilerplate code for socket.io, so the end user only has to write the necessities. We also published two packages onto NPM, to provide easy access to developers everywhere from the command line.

We used Docsify to build a gorgeous, well-organized documentation site for our libraries. Developers should have no issues finding the information they need, as well as a tutorial to get quickly set up.

Challenges we ran into

We ran into numerous issues when building these libraries, especially because we wanted to ensure our app always worked out of the box, regardless of the use case. One of the major issues we had was React, so we decided to create a specific function just for react users.

We also struggled to write automated tests for our library, as we were having issues with race conditions, but ultimately we were successful in writing some basic tests that ensure the core functionality of our packages is always there. Web sockets are known to be difficult to test, so we were happy to get something working.

Accomplishments that we're proud of

Ultimately, we're really happy that we managed to publish two libraries to NPM, as none of us had ever made or released a library before.

We also deployed two separate websites, one for all our documentation on Github Pages, and we deployed a demo app on Heroku. We're especially happy with how the documentation site turned out.

What we learned

Throughout this project, we learned a lot about websockets and Socket.io, as this was the primary focus of our hack. Half of us hadn't ever used React before either, so they learned a lot in making the demo app. We also learned the process for publishing and distributing a package via NPM.

What's next for Syncrosse

In the future, we plan to expand our testing. Unfortunately, due to the time restrictions of the hackathon, we had to prioritize functionality, but tests would be incredibly helpful for the maintenance of the library as time goes on and more features are added.

We also want to add some quality-of-life improvements, such as shared types between the client and server, so that TypeScript can know what to expect from the different listeners. In addition, we want to include first-class support for more frameworks other than React.

Lastly, it would be amazing to create an npx command to automatically generate an app using Syncrosse to skip all the setup steps entirely.

Share this project:

Updates