Training Tool

Introduction

CodeLab is a student-run software and design agency at UC Davis. Currently, CodeLab uses Notion in order to provide cohort bootcamp materials to CodeLab associates. Notion has several limitations for presenting CodeLab curriculum. We think there is a better way to educate associates that improves the organization of bootcamps, increases the engagement of users, and allows admin users to track associate progress. Our goal is to build an online learning platform for CodeLab members to create and consume CodeLab educational material.

Timeframe

The timeline for this development team spanned 15 weeks from January 2024 to June 2024. This team is continuing the Training Tool project that started in September 2023.

The Team

The CodeLab training tool team consisted of a project manager and four developers. This is the only team that did not have designers because designs were already created for the team from the previous year.

Lead

Caden Newton — Project Manager

Developers

Borna Niknahad

Usha Shah

Abhi Warrier

Rohan Kaushal

Tools

We decided to modify parts of the tech stack from the original 2023 training tool source code. The original training tool project was build with the MERN stack (MongoDB, Express.js, React, and Node). We opted to create this project using relational database PostgreSQL instead of MongoDB due to the various complex relationships that are modeled in this web application. We rewrote the back-end to interface with the PostgreSQL database with Java and Spring Boot in order to take advantage of the object-oriented features that Spring Boot provides. Lastly, we switched the front-end code from JavaScript to TypeScript in order to introduce type safety, making the code more readable. Other tools that we used included AWS S3 for storing video, Postman for testing back-end routes, and Docker for running the PostgreSQL database.

The Project

Back-end architecture:

The above picture shows a simplified version of the relationships of the items in the SQL database. Just like in CodeLab, a cohort contains a team, which contains a user. Similarly, a course contains a module, which contains a lesson. This course structure is very similar to the structure of a CodeLab bootcamp course. In order to keep track of the progress of a user within a particular course, a user contains progress objects that mirror the course structure. This means that when a particular lesson, module, or course is completed by a user, it is reflected in the corresponding progress object.

The abundance of relationships in the back-end architecture meant that we had to take extra care when creating and deleting objects that have a relationship to other objects. For example, If a module was deleted, all module progresses that references that module must also be deleted, along with all lessons and lesson progresses that depend on the corresponding module and module progresses. Similarly, if a module was added to a course, all users must have a new module progress created that references that module. In order to handle these relationships when creating new objects, we built Java constructors that set relationships with existing objects when the Java object was created and used Spring Boot Hibernate to save the new object and these relationships. We also created copy constructors for collection, course, module, and lesson objects in order to allow board members to create object clones.

Login pages:

New login pages were created to reflect the CodeLab brand. We used Spring Boot to authenticate the user in the back-end and handle user authorization. This means that different users receive different access privileges when they log into the web application. A board member receives privileges to create and edit courses, teams, cohorts, programs and more. A project manager receives privileges to assign courses to a team member. An associate is only able to view and complete courses. The authorization of the user is stored in the token that is generated upon login. If a token used to access a back-end route does not have the right privileges, an error is produced.

PM page:

The PM page allows the project manager of a team to view the members of their team and assign courses to team members as needed. First, to display the members of the team and the courses started, in-progress, and submitted, several filtering options were created in back-end routes to be received and displayed by the front-end. All filtering was handled by Spring Boot JPA, which used Object-Relational Mapping in order to manipulate SQL tables. Second, when courses were assigned to a user as shown in the gif above, a course progress object that was flagged with an assigned property was created and referenced to that user. The progress objects (as explained in the project architecture) allowed the application to track the courses, modules, and lessons that users were starting and completing.

Viewing a course:

For users to view the courses, they were able to navigate the left sidebar to access modules and lessons within a course. Then, they would be able to read the text or watch the video that a lesson contains. In this project, we gave board members the option to upload their videos to an AWS S3 bucket instead of embedding a youtube link. To implement this, we used Amazon CloudFront in order to access stored S3 data.

Board pages:

The board pages allowed board members to shape cohorts and courses, which includes assigning associates to a team, assigning bootcamps to certain teams, and creating course content. A collection represents a list of courses that all relate to a specific type of project, such as web application, mobile application, or ML project. When assigning a collection to a team, all users within that team are assigned all of the courses within the specified collection. Assigning a collection to a team was one of the most difficult back-end challenges. This is because it created a relationship between a collection and team, and created progress objects (as described in back-end architecture) for all users in that team that mirrored all courses in the collection. In summary, one backend route that assigns a collection to a team would involve nine different types of back-end schemas and create several new objects that all linked to each other.

Takeaways

Overall, this project was both a great learning opportunity and a fun time! From learning technical skills such as using React, Spring Boot, and PostgreSQL to soft skills such as communication and teamwork, this project was valuable to all of us. Lastly, we will cherish the memories of hanging out as a group of friends at our favorite restaurants after a hard day of work.