ByteBattle

Our project aims to help users sharpen their coding skills through one-versus-one challenges against other players and are judged by how efficient their code is and how many test cases pass.

Comment

Inspiration

ByteBattle was born from our desire as students to make coding practice both effective and enjoyable. As we honed our skills, we often found that the repetitive grind on platforms like LeetCode could feel monotonous, sometimes leading to burnout and diminishing motivation. We wanted to create a more engaging approach that would spark excitement and incentivize continuous learning. Inspired by the fast-paced, addictive nature of games like Tetris and typing challenges like TypeRacer, we envisioned a way to make coding practice just as thrilling. ByteBattle transforms coding into a fun, rewarding experience, turning skill-building into an engaging competition rather than a routine task.

What it does

ByteBattle is a new application entering the software educational field that aims to tackle the real-world challenge of mastering coding under pressure. In ByteBattle, users can queue up to be matched with a random opponent of a similar skill level, who they will then face off in a 1v1 speed coding battle. By gamifying the learning experience, ByteBattle enables users to enhance their problem-solving speed, accuracy, and adaptability in an engaging environment! The timed challenges and friendly competition help emulate high-stakes coding scenarios to prepare users for technical interviews, hackathons, and any other competitive coding areas. ByteBattle transforms coding practice into a dynamic learning experience, making real-world preparation both effective and enjoyable!

How We Built It

To bring ByteBattle to life, we combined a suite of modern technologies and a collaborative team effort to create a seamless, interactive experience. As a Web and Mobile Computing major, Zhi Jun focused on the front end, building a dynamic, responsive interface with React and Next.js, while styling the platform using CSS to ensure an engaging and visually appealing user experience. Alana, a Software Engineering major, handled the backend, establishing database connections and setting up user authentication through Firebase, making it easy to manage user data, store high scores, and maintain secure login functionality. Meanwhile, John, our Computer Science major, and Andrew, another Software Engineering major, worked on developing the code compiler, integrating cURL to interact with external APIs and support real-time coding. Together, we used TypeScript for robust, maintainable code, ensuring ByteBattle delivers a fast-paced, reliable, and enjoyable coding experience.

Challenges We Ran Into

One of the biggest challenges we faced was building the code compiler, which proved to be the most complex aspect of ByteBattle. As many of us were working with unfamiliar technologies, we encountered numerous syntax errors that slowed down our progress and required extensive debugging. The unfamiliarity meant we often had to go back to documentation and experiment with different solutions to achieve the functionality we needed. We also had issues with React and Next.js routing, which caused our website to load incorrectly. The debugging process was time-consuming and at times frustrating, but it ultimately helped us deepen our knowledge of the technologies involved. Tackling these obstacles head-on was invaluable for our development as programmers, and it strengthened both our problem-solving skills and our ability to work with unfamiliar tools.

Accomplishments That We're Proud Of

We’re incredibly proud of what we’ve accomplished with ByteBattle, especially considering the complexity of the components we tackled. Getting user authentication up and running smoothly was a major win. We ensured that users could securely log in. We’re also thrilled with the intuitive and visually appealing UI that makes the platform aesthetically pleasing to navigate and engage with. Our biggest achievement is the fully functional code compiler, which, despite the many challenges, now allows users to write and test code in real-time. Bringing together these elements has transformed ByteBattle from a concept into a polished, interactive platform that we’re excited to share!

What We Learned

It was our first time working with a diverse tech stack, including React, Next.js, Firebase, and TypeScript without the help of a mentor. Tackling new technologies, particularly for the code compiler and database, taught us to effectively troubleshoot and debug, especially when dealing with syntax errors and unfamiliar libraries. We also learned the importance of efficient communication and division of tasks, as each team member was able to contribute to their specific expertise to make the project successful.

What's Next For ByteBattle

At this point in time, ByteBattle is still lacking some of its core features. We plan to continue enhancing the functionality of the code compiler and the puzzle pages, which, once fully implemented, will bring us to the project’s completion. Looking ahead, we envision adding additional game modes to further engage users and provide more opportunities to refine their coding skills. These future improvements will ensure that ByteBattle remains an impactful and dynamic tool for coding practice.

Share this project:

Updates