Inspiration

One of our teammates loves to solve CodeGolf questions. We thought it would be a good idea to implement this as a one on one competition, where two players can compete live to write the shortest snippet of code to solve a question.

CodeGolf refers to attempting to solve a problem using the least amount of characters possible i.e. to have the smallest source code. The term is derived from the sport golf where the player’s goal is to hit their ball in the hole using the least number of shots possible. In Code Golf the developer that solves the problem (usually writing a function) using the fewest number characters possible wins.

What it does

We created a web app where you can first pick a challenge:

  1. Once you have picked a challenge, you get a link that you can share with another person.
  2. Once both people have joined the link, the game begins, and you can enter your solution on the code editor. You can also view your opponent's progress live!
  3. Once you have written your solution, you can submit your solution and check if it passes all the test cases. If the solution works, and its length is shorter than the current shortest length of code, then you become the current leader!
  4. The goal of the competition is to remain the winner until the time limit has passed.

How we built it

The backend was built using NodeJS and Typescript. We used ExpressJS to implement all the routes required for submitting code. The backend uses a library called code-executor which was built in the past by one of our teammates, to execute code against test cases in isolated Docker containers. To implement real-time communication when a head-to-head game started, we used Socket.io to connect both the players in the same room and Firestore as a database.

The frontend was built using React and Bootstrap. We used socket.io-client to interact with the socket server, and Axios to interact with the express backend. To display the code editor on the website with multiple themes and syntax support for languages, we used a library called react-ace.

The project is currently deployed to the AWS cloud and is using PM2 as a process manager for the Node servers, as well as Docker for managing the required containers.

Check it Out!

Challenges we ran into

Not all of the team was familiar with the tech stack we were using and it was a new challenge to build a complex application so quickly with people we hadn't worked with before. Getting familiar with each other's style of working as well as learning how sockets work, was one of the biggest challenges. Other than that we ran into quite a few dependency issues which took up a lot of time.

Accomplishments that we're proud of

We're proud that we are first of all, able to complete the project on time. Also, some of our teammates were working with sockets and JavaScript for the first time, so we got to learn how to work with many new libraries and a whole new language, and we're happy that we were able to successfully do so in such a short span of time.

One of the main challenges in the project was ensuring that it could handle a large number of code submissions in parallel, and we're really thrilled that we were able to use the code executor library to properly load balance the submissions across multiple machines. We also deployed our project to AWS and managed it using process management tools for Node, which was something new that we learned!

What we learned

The newest addition to our bucket of knowledge was, learning how sockets work. This was a fun exercise in learning how concurrent connections are maintained and how live updates can be sent from servers to client machines. We also learned how a message broker like Redis works and we implemented code concurrency using a Redis-based queue. We deployed the project on an AWS EC2 instance. Some team members hadn't deployed anything using AWS so they learned it this way. Lastly, each team member's coding style was different so we got to learn that from each other.

What's next for Golf-it!

We have many features planned for golf-it in the future:

  • Global leaderboards across the website, for players who regularly win more and more head-to-head games to showcase their skills.
  • User accounts (registering and logging in)
  • The ability for users to submit their own questions, and people to vote for questions they found interesting.
  • Picking avatars for your own profile
  • Having live competitions with even more people, instead of just head-to-head ones.

Built With

Share this project:

Updates