This week, I decided on a UI framework and charting library to use for the frontend. I also implemented basic CRUD for the backend models.

I was used to using Material-UI with React.js and it provides plenty of helpful components to use so I decided to go with Material-UI. There are plenty of charting libraries to choose from for React.js. A popular choice would be to use a Chart.js wrapper for React.js However, I was not a fan of the large configuration object that for each chart to work. Instead, I found something more “React-like” in my opinion. For the charting library, I went with Recharts. The library provides a way to create simple to complex charts with legend and tooltip support.

Now that I have a front-end that is able to create courses, projects, and invite students via Github. Now I need to collect data from Github repositories. As I mentioned before, I used webhooks to achieve semi-realtime updates for repositories. This also prevented me from polling the repositories every-hour or so for updates. With a Github push webhook, it would send the server who made the push and the commits along with it. However, I did not sent all of the necessary commit data so I had to call Github’s API for each commit. To not lock up the server on every webhook, I used Celery with Redis to have concurrent tasks. I called a Celery task to get all of the commits that do not have additions and deletions and update them.