Instant Coding Lab

A real-time interactive web-based Code Lab which provides the feature of creating, joining, and managing the coding lab​ .

Comment

Inspiration

The sudden outbreak of a deadly disease Covid-19 shook the entire world. This situation challenged the education system across the world and forced educators to shift to an online mode of teaching overnight as there is a fear of losing the whole ongoing semester or even more in the coming future. Educational units are struggling to find options to deal with this challenging situation. There are some challenges that a Computer Science students and teachers are going through in online learning, for example: 1) Sometimes student write wrong code and he asks the teacher for help. In online classes It is difficult to correct the code of student. 2) Personal attention is also a huge issue facing online learning. 3) Students want two-way interaction which sometimes gets difficult to implement. 4) It is difficult to monitor every student's code what they write. 5) It is difficult to Evaluate the coding skills of students by the teachers.

What it does

Our project has been made with the goal to provide with the advancement of e-learning. Our project is a real Time interactive web based code lab, which is much needed in this pandemic time. Our project has following features which solves major online education problem: • Create a room: An admin(Teacher) creates a room with a secret link and password. • Join the room: Participants with the link and password can join the room and perform their coding task. • Code Editor: This code editor supports 4 major programming languages, C, C++, Java, Python. It also supports inputs, output, run and submit features. • Real Time Code Collaboration: Admin can manage the room, guide and check a particular code in real time. • Check the Code: After the submission of code, Admin can download the submitted code in the form of a pdf. • Instant: User does not need to signup or sign in to join or created a room. User can instantly create room.

How we built it

First we have created a server and configure socket io. Then we make a schema to store the room id and admin data.Then we started with Front end. We configure code mirror ide for both admin and student panel. Then we configure online compiler in both end. Then we make real time collaboration between admin and student. Then we created room setting and configure jwt and cookies in backend. In backend we created apis for create, delete room.Then we implement security features for admin in both frontend and backend using admin code and hiding the link of admin panel. At last we created Code download feature in format of PDF which is only for admin.

Challenges we ran into

We faced a problem while sending the data from the participant editor to the admin editor in real time. For this, we searched a lot on google, read documentation, and several video tutorials, and then we overcame this problem by using socket.io. Although we're not familiar with Socket.io, reading documentation and watching videos helped us a lot. We again faced problem to store data and logic for cookies and jwt. We searched a lot on google then we solve this problem.

Accomplishments that we're proud of

1) Our project in instant. It mean user does not required to sign up or signin to use website. 2) Admin (teacher) and download the codes submitted by the student. 3) Admin can look every connect student's code and change/improve the code of students.

What we learned

We were not familiar with Socket.io after this we learned a lot about socket io. We learned about HTML pdf, Code mirror , JSON Web Token and cookies etc.

Share this project:

Updates