FreeCodeCamp Classroom Mode

Wireframe for login screen

Inspiration

I and five other friends in the tech industry have banded together to form a network of mentors. We are all passionate about increasing social mobility and we have a clear vision of what kind of world we'd like to create: a world where anyone can receive personal mentorship towards getting to the next level in their career. To that end, we have each taken on an apprentice from an underrepresented group in tech. Our plan is to help them gain industry experience by helping them make substantial contributions to respected open source projects so that they can ultimately land jobs as software developers.

We approached Quincy Larson, the founder of FreeCodeCamp about building a feature for their codebase. He said they had a need for a teacher dashboard. FCC started out as an individual experience, but more and more, teachers are using it to teach groups of students at a time. However, FCC was not built with the teacher's point of view in mind. Thus, Quincy asked us if we could build out such an experience: a "classroom mode". That is the intent of our project . Our goal is for each of our apprentices to eventually contribute to this project.

What it does

The key problem that teachers are facing is that it is difficult to know when students are falling behind or are struggling. Especially since FCC exercises are completed remotely, it is difficult for a teacher to know when a student is stuck. The first version of our dashboard allows a teacher to see how many days a student has been inactive. The teachers we interviewed mentioned this would be a very useful metric for them to know so that they could immediately reach out to those students who have been inactive for too long.

How we built it

We built it using a full-stack javascript framework: React on the front-end and Node.js/Express on the backend. We had a team of 5 people, including 3 software devs, a project manager, and a UX designer, who conducted user interviews with teachers.

Challenges we ran into

FCC did not have a public API for us to query for details on student's FCC progress, so we had to construct our own scraper. It posed an interesting software design challenge on how to organize our code to minimize the dependencies on FCC itself.

Accomplishments that we're proud of

Our team stayed together for months on this. We are all coding from different areas, sometimes from different parts of the world. We followed good practices for healthy communication and conflict resolution.

What we learned

Our biggest lesson here is how to work on teams and keep everyone up to speed on what is going on. We learned in a very hard way that one of the tradeoffs to consider when designing your code is how easy it will be for newcomers to understand the code and get onboarded.