Code Tutor: A Programming Tool
Code Tutor's home page
Our simple interface allows the quick addition of coding sessions.
Share the generated code with your class.
Students join the session.
Code syntax is highlighted within the browser.
Our inspiration has its origins in a well-intentioned ICS 45C class that went horribly wrong. While the professor was sincerely attempting to receive real-time feedback from his students by having them submit code through Piazza, it was, rightly, a mess. There was simply no suitable web application built to suit his needs, until now. Enter, Code Tutor.
What it does
The system has two flows, one for a student and another for a professor. Students can join classes with supplied session codes. Once registered, they can edit their programming submissions in the application itself and submit them for grading. This keeps the student focused on a simple application while in class, rather than dividing their attention between their IDE's, disparate submission portals, and professor's lecture.
The professor can create a session with a class name, email list, and statement of the problem he or she wants their students to solve. Once created, the professor emails his students a link to a particular session view of an IDE. Teachers can see student submissions as they are uploaded along with colored styling indicating whether or not their solutions functioned correctly in their own portals. They can then select submissions that performed poorly and display them on their computers for the class to see. This has two clear benefits. First, it gives students immediate, effective insight into the level of mastery they have over concepts being taught to them. Additionally, teachers receive critical feedback on the effectiveness of their teaching.
How We built it
The front end of the application was created with React, and its UI views drew heavily from Material-UI to provide a clean look and feel. The back end resided on a Node.js server, and RESTful services connected the two. Two APIs in particular were used: that of SendGrid for email notifications and JDoodle to error check students' code.
Challenges We ran into
For three of us, this was our first large scale hackathon. As a result, continuing development under tiring, stressful conditions was one of the largest issues to deal with. Additionally, managing the backend communication with the frontend grew more convoluted as more system features were implemented. Propagating data between different front end components, as well as between the server and application proved difficult. Finally, attempting to host the application on Google Cloud Platform and Heroku was challenging as well.
Accomplishments We're proud of
Given the limited time our team had to work with, the UI and its flows were assembled reasonably well. The Node server and MongoDB database were also set up correctly, and the SendGrid API has the ability to send emails to any email list the professor inputs. Overall, delivering a working application is something we all take immense pride in.
What We learned
Our two frontend developers had little to no experience with React.js, but walked away with extensive knowledge unlikely to be found in any classroom. The entire team learned more about most of the elements of the MERN stack, and the two more experienced students learned important lessons about building production level code.
What's next for Code Tutor
We plan to implement a collaborative code editing feature, so professors can enter student views and either comment or directly edit their work. This application also has a potent scalability factor. Computer science courses are only growing in popularity, and as more students get involved, the demand for tools like Code Tutor is set to grow. In addition to classrooms, our system can be utilized by programming tutors in more informal settings. Hopefully, our goal of bringing students from all sorts of starting points within the field of computer science onto a level playing field will be realized.