-
-
App at work!
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
Log in or sign up for Devpost to join the conversation.