Hacker Smash

Hacker Smashing...
Setting up a code duel
Joining a game with a Room code

Inspiration

It's actually hackathons that inspired this project.

To me, hackathons are among the most fun experiences to be had - they inspire passion, creativity and community in a way few other activities can. It's certainly my favorite way to learn code.

Alas, it is internship application season...which means it's time to practice interview questions. And in many ways, practicing interview questions is the polar opposite of a hackathon - where hackathons are passionate, creative and social, interview practice is often dull, grueling and lonely work.

But what if it didn't have to be?

What if there were a way to feel the competitive spirit of a hackathon while practicing interview questions?

Introducing Hacker Smash...

What it does

The idea is quite simple - everything is better with friends. Even interview questions.

Hacker Smash allows you to host a 1v1 code duel against a friend. You simply create a room, give your friend your room code (like you would for Kahoot), and you're good to go.

The experience is set up like a video game. When you answer a question correctly, your opponent loses health, and vice versa. There's no timer you can count down. If you're slow, there's no deadline or stopwatch to keep you on your feet - but you can bet that you'll take a few blows from your code-savvy friend.

It's a contest of minds. A one on one duel, mano a mano, mind vs mind.

It's Hacker Smash.

How we built it

The front end was built with React.js, and the backend was built with Node. Fairly standard stuff. What makes our project unique is the technology we used on our Node backend...

Challenges we ran into

HackerRank deprecated their API. Leetcode doesn't have one. SPOJ costs an arm and a leg.

Everywhere we looked for an API, nowhere could we find one. So, we rolled up our sleeves and got our hands dirty the hacker way.

Using a cutting edge feature of the Chromium browser, Puppeteer, we used a headless browser to scrape problems off of HackerRank, and programmed a bot that would enter and compile the user's code. Hours were spent wrestling with wayward newline characters and autocompleted brackets, but in the end, it works amazingly well. It's certainly not as fast as an API would be, but, well, the API doesn't exist. It wasn't an option. Besides, it's super hacker.

Accomplishments that we're proud of

It felt very good to surpass the obstacle of not having an API to use. Honestly, getting the headless browser/scraper working was incredibly fun - it was surreal seeing the debug window type on its own, like someone had possessed my MacBook. It also pushed my abilities as a front end developer to the limits, forcing me to write quite a bit of backend code.

Writing the room system was also quite the challenge. It felt amazing to build a Kahoot-esque room system, and the first time we entered a room together and started a game...well, that was even cooler.

What we learned

Never give up. About half way through, when we saw there weren't any viable API options to get interview questions, we considered switching to a different idea, or writing off the hackathon altogether. Using the headless browser didn't seem very promising at first either. But, what did we have to lose if we tried it?

Nothing. So we did, and it was incredibly cool, and it actually enabled us to build the project we wanted to build.

What's next for Hacker Smash

More gamification. Right now, there are a few flavorful additions - pictures of mecha fighters, health bars, and other gamelike features. But we think it'd be cool to go the whole 9 yards - add character options, weapons, animations, and events to the equation.

Also, we plan on bringing support for more languages in the future. Right now, only Javascript is supported.

You can go ahead and try it below! Bring a friend.

EDIT: It no longer works online because HackerRank banned our servers (probably due to too many requests),but it still works on localhost! So stop by for a demo.