Empowering everyone to code with Google's Eye
Tags: opensource, react, javascript, beginners
Published: 2021-09-18 06:15:20

In India, more than 95% of schools don't allow smartphones in class. Being a Computer Science teacher becomes very difficult as it is nearly impossible to check the handwritten code of each student line by line. Also talking about India, in most schools, the students don't have the privilege to have one computer each for them so that they can run their code on their own. So it becomes a nightmare for the teacher as they might have to manually type each code of each student and run it or take the risk of missing out on bugs. 

[![Anybody can code with playground](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fat1j412eoqvjtjucz4u.png)](https://github.com/Aniket762/playground)
 

While in recent times, the world has started moving towards Codelisation, being a good programmer is not easy it requires consistency, determination, problem-solving ability, and a lot more but, most importantly it requires you to get started. I did a small survey in my community and got to know more than 80% of them started properly coding after joining university and the major reason was lack of the personal computers and laptops. In developing countries, 3 out of 10 people have access to computers in comparison to 8 out of 10 people who have access to smartphones. Let's see how project playground solves this problem and empowers even someone from a remote village in India to start coding. 

To solve these issues, we came up with playground!

{% github Aniket762/playground%}

## How it works 🤓 

Playground empowers everyone to write code. Write on any piece of paper, take a photo and upload it. Unlike humans, computers make mistakes so we have built a code editor where the code can be edited and finally with the click of submit button the code gets compiled. Not only does this empowers students to become better coders but also helps teachers in evaluation let's see how.
 
## How we built it 👨‍💻
We used Next.js in the frontend and Node.js in the backend with MongoDB as our database. Next, we used the Google Vision API for scanning the image and retrieving the handwritten text. The handwritten text was displayed in a code editor with full syntax highlighting and available for currently two languages, c++ and python. When you click submit, we generated a new code file for the corresponding language and displayed it's output on the screen.

<hr>

Playground was built in [Teacher's Hack](https://organize.mlh.io/participants/events/7161-teacher-s-hack) powered by [MLH](https://mlh.io/) in which we were the overall winner but there are a lot of features we have planned and some which need the support of community.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4k4rd799ypj5j0vsmxu.png)
 

## What's next for Playground 🔥
Next, we want to increase the support by providing more options for languages like javascript, java, c and so on. We also want to increase the variety of questions varying through a variety of topics and difficulty levels. In addition to that, we plan to create a neural search framework that will allow us to filter the questions on the basis of topic and difficulty and help you find similar questions. Lastly, we wish to build our very own OCR model for text extraction. This will solve our problems of billing while using external models.

## Support us to empower everyone 🚀
Taking this prototype to production needs your help. The code is open-sourced and would love to see your contribution:
- Check the <a href="https://github.com/Aniket762/playground">Github Repo </a> 😎
- Fork the Repository 🍴
- Star the Repo ⭐️
- Send the PR or create an issue 🤓

Incase you like the  <a href="https://github.com/Aniket762/playground">project </a> and help our community and empower everyone to code drop a star to increase the visibility. And, if you want to discuss more you can connect with me on [LinkedIn](https://www.linkedin.com/in/aniket-pal/)