Hacker Studio

Experience coding like a pro. Impress your friends, pets and peers.

Comment 2

Inspiration

What would it be like to hop on a website and start coding like a pro? Even faster than the pros? To tap into any repository in Github and fly through it - seeing who else has written on that file and how far they’ve sped through it?

We wanted to build something that will make the guy behind you in class think you’re some kind of super genius - so we built Hacker Studio.

What it does

Experience coding super fast in front of your friends, or looking busy in front of your coworkers (wait til they realize you’re coding the Linux kernel). Try out different Github repositories and feel like a super fast typist!

Some of the advanced features include: Adaptive speed when typing - be as slow or as crazy fast as you’d like! Database fetching from Github in one function call Storing high scores and seeing how many hackers have been working on that exact file Automatic language detection/highlighting and directory scraping

How we built it

The front end is powered by Gatsby + Netlify. We chose a serverless architecture with Netlify/Lambda functions that access a MongoDB Atlas database. The MongoDB database hosts code that we scrape from Github using the Github repository API.

Brett designed the frontend while Aaron designed the backend, then we met in the middle.

Challenges I ran into

Neither of us had ever used a serverless architecture or MongoDB Atlas before. It was a little tricky to get them to all play nice with each other. Also figuring out how to automatically control the editor, pipe data around, and work with the Github API.

Some of the weird bugs we encountered:

  • Trying to get monaco editor to move ahead while continuously setting its text
  • Setting a high score without overwhelming our database
  • Copying Visual Studio down to the fonts and colors

What's next for Hacker Studio

More repositories, switching files, and generally becoming a more fully fledged editor. We thought it would be really amazing to “replay” a repository at a certain point in time - plug in any repository and see how it developed over history, right down to watching it be written!

Built With

Share this project:

Updates