Gif 1 GIf 2

Inspiration

Have you ever wanted to engage in a friendly coding problem challenge? Would you be interested in a time-sensitive, adversarial game as fast-paced as TypeRacer? Enter CodeBattle: Inspired by a constructive rivalry among a small group of engineering students familiar with time-based coding challenges on CodingBat as well as TypeRacer, our group created a a project with the best of both worlds.

What it does

CodeBattle is (currently) a one-on-one coding challenge game. After signaling that both users are prepared, a prompt is distributed to each. The objective is to accurately complete the challenge described by a prompt's criteria before one's opponent does. Coding prompts are stored and sorted in our Amazon Web Services back-end which passes random entries when the front-end requests them. Using the text editor CodeMirror, and Judge0's code compilation API, users are able to type and submit code whose output is compared against various test cases. Each player codes as fast as they can until one of them successfully solves the problem.

How we built it

Front-End

Back-End

  • AWS serverless lambdas
  • AWS DynamoDB

Hosting platform

  • Github Pages

Challenges we ran into

Front-end

  • Only one member had a working knowledge of ReactJS; developed most of the front-end himself
  • Another first time hacker was not experienced with React, but learned a lot over the course of the event
  • The Front-end sometimes did more work than the back end (keeping track of each player's state simultaneously)

Back-end

  • Accessing numerous API endpoints resulted in security issues
  • Writing to DynamoDB using lambdas on API trigger events proved to be troublesome
  • Hard design process for synching sessions between players

Deploying

  • Extremely difficult to host the front-end on Google Cloud Platform or Heroku

Accomplishments

Tommy is proud of picking up AWS serverless lambdas and implementing a fully working back-end structure. Vincent is proud that he and the team were able to keep pushing through the challenges and not succumb to the tediousness of the project. Riley is proud of completing his first hackathon and learning from/with experienced individuals. He has also acquired an interest in front-end development. Ryan is proud of gaining knowledge of the entire full stack development process, and, like the rest of the team, developing a working app with its core functionality intact.

What we learned

Tommy learned how to store data in AWS dynamoDB with the use of lambdas. Vincent learned that motivation and hope require the support of practical and useful skills to achieve success. Ryan learned how to delay JavaScript programs and manage the state of multiple users at once. Riley learned that he didn't know as much as he thought and found an understanding of front-end development and the complexity of ReactJS. The entire team gained new skills, such as deciphering software library and API documentation and debugging both front and back-end components.

What's next for CodeBattle

  1. Implement a high score system for each coding prompt; a leaderboard will hopefully act as an incentive for users to find quicker, more efficient techniques for solving problems.

  2. Include more prompts in the database. With a more diverse set of prompts available, users will have access to more interesting content to improve their programming skills.

  3. Improve CodeBattle's design and layout (component placement, color themes, logos, etc).

  4. A login system with authentication to track scores and past submissions across user sessions.

  5. An achievement system that rewards and ranks players depending on their number of solved problems, average speed, and other criteria to increase player retention.

  6. A difficulty selection by creating unique prompts for beginner and experienced players.

  7. Before the game, users will be allowed to select their preferred programming language instead of the default Python.

Built With

Share this project:

Updates