Inspiration

We are a bunch of students, and we all understood how hard it could be to actually understand code when you are first learning it. Combine this with the fact we all speak different native languages, and you are setting yourself up for a bad time. So we made an app that solves this problem in a very elegant and efficient way - Uncode.js

What it does

Uncode translates JavaScript into human readable languages real time. It appears as you are typing it, giving you a unique insight into how code is structured and how it works by allowing the user to experiment and see the result. It also allows code snippets to be uploaded by a button (or dragging and dropping into the editor), and the result will be immediately displayed - no waiting or loading. The user can log in via facebook, write and save snippets to their profile whenever they wish, and access them again on demand - everything in real time. As mentioned, the whole app supports multiple languages, currently english, spanish, and italian.

How we built it

We built the front end in React, with a custom home-made text editor and translator. The middle man is a monstrous algorithm that receives the JS as a string, parses it by statement type (function, variable etc...), feeds this into a custom map/hashtable data structure, where it is then translated via recursive strategies into the correct structure and grammar in the desired human language. On the backend we used express and socket.io to handle the real time communication with the front, and mongoDB to store user information and code snippets.

Challenges we ran into

The algorithm took the longest time. It is very finely balanced, and the dataflow from one part of the algorithm to the next was hard to get perfect. The text editor was also no cakewalk, getting it to correctly display indentation, tabs etc in a well structured and obvious way wasnt trivial.

Accomplishments that we're proud of

We are extremely proud of the whole thing, but especially the algorithm. As fairly new developers, we feel like we really did a good job with the logic as parsing strings of code to language is not a one function job - it took a large network of processes coming together in perfect harmony to achieve. We are also very proud of how well we came together as a team. We have not known each other long, some of us only met on the day, but we immediately meshed and proceeded as a single unit with the same goal in mind. We also all became great friends!

What we learned

We learned that trusting in yourself and your team is the most important thing. There is no time to doubt one another, and what we made is a testament to this philosophy (at least in our opinion!). We also learned that efficiency is a direct response of proper delegation - giving the correct people the correct tasks at the same time. For example, we all worked on the algorithm simultaniously because we knew the difficulty of the task at hand and we could not spend resources elsewhere. When it came to bringing the app together, we put a couple of people on front end duty, a couple on back end, with one more flexible person who would help wherever help was needed most. This led to a super efficient work flow, and we were amazed at the speed we were producing features with.

What's next for UncodeJs

We would love to further refine the algorithm by improving the result of it, and by supporting more javascript. We can translate the vast majority of JS, but more advanced topics like http etc were not added at the time because of the 48hr time deadline. We would love to properly style and market the app. We think it looks good, but it certainly needs some refinement. Good design is an art, and cant be rushed or cheated using bootstrap etc! We would also love to add more functionality in the form of further user features such as sharing your code snippets, allowing multiple users to edit the code snippets at the same time to help each other learn, support more programming languages and many more!

We aim to keep this tool free for the foreseeable future, since we do not believe education should be gated behind a paywall.

Thanks for reading!

  • the Uncode.js team - uncodejs.herokuapp.com
Share this project:

Updates

posted an update

We came second in the "Hone your craft" category!

I can not overstate just how proud and happy the team are to be considered so highly against so many amazing projects. We thought our app was pretty cool, but to feel our hard work validated like this is a really special feeling. What started as a hackathon project has become something pretty special to us, and we are super happy you guys agreed enough to award us with this honor.

Many thanks to Facebook and Devpost for hosting this awesome event and seeing the potential in what we made, and thanks to Codeworks Barcelona for hosting the local event and letting us set up camp in their meeting room for 2 days! (P.S. Thanks to Arol for being a heroku ninja and advising on our deployment issues :D)

  • the Uncode.js Team

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