Math Battle

Our Lobby
Waiting Room
Trig Identity
Game Over Screen

Inspiration

We were inspired by the minute math games we used to play in elementary school, for a lot of kids it embedded a competitive spirit among classmates, allowing kids to exercise their knowledge while also providing a fun and friendly challenge. We wanted to bring that experience back for those grown up kids, instead of solving simple times table problems; however, now they’re deriving equations and integrating trig functions against each other. It’s a game that evolved alongside those elementary students, and is simply a fun challenge for high school calculus students.

What it does

Our website strives to make math more enjoyable by turning it into an exciting game to play against your friends in. In Math Battles, each participant joins a room with their friends and has 100 seconds to do as many math problems as they can before the total scores are calculated and shown on the leaderboard.

How we built it

We utilized a frontend stack of Vite, ReactJS, and TailwindCSS, due to a couple of our members already having prior knowledge. Not only that, but this lightweight and simple approach allowed us to really elevate our UI/UX, making it a smooth experience.

For our backend we then ran with Node.js and Socket.io, which allowed us to easily communicate between the backend processes such as Google Gemini and the frontend processes. Not only was Socket.io able to emit information from server to client side, but it also allowed us to host the multiplayer experience, a key part of our hack.

Finally, our project is hosted on Render, due to our needs of implementing realtime multiplayer mechanics and low latency gameplay. It also allowed us to publish the static frontend site as well, making it seamless to link together.

Challenges we ran into

One of our biggest challenges was learning how to use an API key to generate AI responses in our code. From writing detailed prompts to picking the right model for the job, the overall experience of incorporating gemini was extremely new to all of us. Another challenge was using Socket.io to link our front end and back end. Since we had such little time for a large project like this, it was a struggle to keep all of the necessary actions in order so that everything worked as it should. After spending a few hours focused on this one detail, however, we were able to gain a deep understanding of this topic.

Accomplishments that we're proud of

We are incredibly proud of our implementation of the Google Gemini API within our project. We used Google Gemini to generate 10 different Integral and Derivative problems as well as solutions to each problem which were different for each respective player. We then used the MathJax function to convert the problems into latex format, making it easily readable for users. On top of this, we are very proud of our UI/UX design which incorporates a clean, simple user friendly interface and a responsive emerald prism backdrop that changes from the movement of the player’s cursor.

What we learned

Throughout the building process, almost every new feature we implemented was a learning opportunity in some way. We were able to expand our knowledge of front end development by using open source elements, such as the dynamic background and glass-like buttons. On the back end side, we were all new to Socket.io, so we had to learn its ins and outs in order to implement it into this program.

What's next for Math Battle

With our Generative AI capabilities, Math Battle can easily evolve into many levels of math, going all the way down to elementary level addition and up to complex integrals. And since changing the prompt to our Generative AI model is simple, this can also extend to a trivia multiplayer game, powered by the randomness of Google Gemini. One thing we really wanted to implement too was an authentication service, something that we would’ve loved to do if we had more time.