Inspiration
Computer science students across the nation are constantly watching and reading tutorials online to get better at coding. However, this only will get them so far, as a great programmer must complete tons of practice, such as code challenges and projects. In addition, anyone outside of the field of computer science who wants to learn how to code needs a place to start. This is where code_it comes into the picture. Many courses and textbooks online that teach how to code are paid. Our platform provides a way to anyone in the community, with access to a laptop, to either upload their own tutorials or access others' tutorials and code along with the tutorial in an editor within the website. code_it caters to people of all skill levels to provide the ultimate learning experience.
What it does
Our website allows for people in the community to learn from and teach each other. Users can upload videos where their code is synchronized with their recording where they explain and teach what the code means. When viewing a recording, the user can pause and gain a better understanding by experimenting with the instructor's code. This means that when the video is paused, the student can live edit the current code that is on the screen and compile it to see what the outputs are throughout the entire way. The website's built-in custom intreperter also allows for users to deviate how much ever they want from the project at hand to test out their code. The website's deeply interactive nature allows for students to achieve higher levels of comprehension over traditional methods. While we are aware other platforms exist like coursera or skillshare, a platform that is as interactive and student-focused as ours does not exist today.
How we built it
We built code_it by utilizing ReactJS and HTML for all the front-end and interactive components, Tailwindcss for the styling, and the Flask framework for all API calls and back-end requirements for the website.
Challenges we ran into
One of the major challenges that we faced was creating a platform that would allow us to not only record but also display code in real time just as the author wrote it. Synchronizing their every keystroke along with their video posed a serious technical challenge. This issue was twofold as we had to not only implement this on the tutorial side, but also the author side where they are typing the code in live.
Another issue that we faced was for the system involved with ranking different tutorials based upon core rank feature sets. Along with that we ran into various stylistic challenges as it was crucial that the integrated IDE matched the styles and color coding as a real one would have. This meant that we fully implemented a text-area box that contains many different style sets that would dynamically change the color of text based on their presence in the function at hand.
Accomplishments that we're proud of
We are really proud about how the online IDE on our website compiles code and prints the console output as well, including errors. This means that we have REPL-like capabilities built right into our education platform. We are also proud that the website synchronizes the code on the online IDE with the videos that the users record and post on the website.
What we learned
By doing this project, we learned about React.js as a whole and the entire concept of pipelining to allow for direct communication between the frontend and backend to enable things like online code compilation and live code streaming/storing.
What's next for code_it
We can improve the functionality of the built-in IDE using machine language to implement automatic code completion. Also, since this website is a public platform where anyone can upload videos, we can introduce ads for ad revenue and the monetary benefit of popular content creators on the platform to incentivize more creators.
Log in or sign up for Devpost to join the conversation.