Inspiration

The Origin Story: We had all been anticipating HackUCI and wondering what we were going to make. Then one night at Albert's house, the inspiration came. We were all practicing LeetCode questions together by mock interviewing each other and discussion solutions. Albert had half of a solution to a LeetCode question left on a whiteboard, and I jokingly told Jeff to hurry and try to finish Albert's code before he came back. Leon immediately thought it was a great idea for us to try and implement it for HackUCI. And then the dream was born...

The inspiration for the application itself comes from the educational value of LeetCode, and the ease of collaborating with friends through applications like Google Docs. There are not enough interactive coding environments available, especially to beginner programmers learning how to code through pair programming. Another issue that comes up with pair programming that we have all experienced is that two different people may not be used to typing with the other person's laptop/computer, so CodeClimbers allows for pair programming with the comfort of your own keyboard. CodeClimbers is a solution that is fun, social, and educational!

Why is it called CodeClimbers?: The name CodeClimbers comes from the fact that learning how to code and become a LeetCode pro is a climb. We believe that every time we choose to team up with friends to make studying more fun, we make the climb just a little bit easier! We're all in this together!

What it does

CodeClimbers allows a user to team up with a friend to solve common programming questions. Users have the option to create a room or join a room using a code! It allows for two users to be in the same coding room and type in the same editor. The catch is, only one user can type in the editor at a time. This ensures that each user gets a turn at typing and prevents one user from overpowering another user (like what can happen in a normal pair programming situation). The timer is displayed on screen that signals when the switch is about to happen. Also on screen is whose turn it is. During the experience, the users can both run the code and see the output or error messages (using the run button). When they believe that their solution works, they may submit their code (using the submit button), and their code will be sent through a few hidden test cases before sending the users some feedback on how they did!

Be sure to check out the demo on Youtube! Demo Here

How we built it

We built the client side of our project using Vue.js and Firebase. Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications and Firebase is a web-application (and mobile-application) development platform that we used to store our data in a real-time environment. The real-time database was key to allowing multiple users type in the editor at the same time. Vue.js was used to write all of the different components of the page- the editor, timer, header, question-box, etc. We built the server side of our project using Express.js, Node.js, and judge0. Express.js is a web application framework for Node.js, designed for building web applications and APIs. We used Express to be able to make requests to the API judge0, to compile Python code we posted and get back submission details.

Challenges we ran into

We ran into a few challenges through the course of HackUCI. These involved, issues with handling asynchronous requests with the server and learning how to work with Firebase (connecting and working with a Real-Time Database!). In the beginning, these issues were a bit discouraging, but we powered through and were able to get it together! Two members of the team had little to no experience with Javascript at the beginning of Hack, so we had to learn fast.

Accomplishments that we're proud of

We are all very proud of the product we were able to push out during HackUCI. This is the first big project that we have worked on as a team. We're proud that we were able to stay motivated and push through. Before we started the project, we weren't sure how we were going to do it because we had never worked with many of the technologies. However, that didn't stop us from successfully implementing a lot of our project's core functionalities.

What we learned

We learned how to use Firebase and work with a Real-Time Database, some of us learned Javascript for the first time, most of us learned Vue.js for the first time as well. We learned how to deal with asynchronous requests, communicate with a database, and connect a working client to a working server! This project was more complicated than any project that we have ever had to do for school, so we had to learn how to manage our time effectively and self-teach on a lot of topics! Most importantly, we learned that we all work really well as a team!

What's next for CodeClimbers

There is always room to grow! CodeClimbers hopes to eventually expand our program to allow for more coding languages. We also wish to implement a leaderboard so teams can see how they did compared to other. The design of the web application can always be improved as well to be more user friendly and intuitive. We are always striving to be better. Another feature that we hope to add in the future is a chat box so users don't need to be side by side to communicate while coding! We are hoping to deploy our project soon so everyone can have easy access to it!

Thank you for taking the time to view our project! Happy Coding! :)

Built With

+ 3 more
Share this project:
×

Updates

posted an update

Hi all,

Thank you to everyone who stopped by during demo day and tired out CodeClimbers! We are so grateful for all the kind words and encouragements in person and online! We have deployed our application and it can be found at http://codeclimbers.io/! The current version is the exact state of the application that we presented during the expo. Like everything in life, CodeClimbers is a work in progress. We will be making updates to the application to make it more user friendly, support more questions, and add additional features in the future. In the meantime, feel free to check it out and see how it works right now!

Log in or sign up for Devpost to join the conversation.