Training Tool — Access

Fall 2022, Year-Long Spark Project

Introduction

In CodeLab cohorts, new associates are introduced to new tools and technologies through week-long bootcamps on Notion. There are limitations with Notion bootcamps such as:

• Cumbersome navigation
• Limited ability to track progress

The Training Tool website aims to solve for these problems. The Training Tool will be an educational website that is tailored to CodeLab’s specific needs. Since the Training tool is a large project, two separate teams are working on this website simultaneously. A team named “Training Tool — Courses” is working functionality for creating and editing courses for the Training Tool. Our team, “Training Tool — Access” is working on functionality for managing access to certain aspects of the website, depending on the role of a user.

The Team

The Project

User functionalities for Training Tool:

• Request and grant access to certain parts of the website
• View associate progress
• Manage CodeLab teams and cohorts
• Assign courses to associates
• Log in using Google Authentication

Requires the following backend components:

• User — contains all of the information describing a single user
• Team — contains information describing a CodeLab team
• Cohort — contains information describing a CodeLab cohort
• Request — contains information describing a request to change a user’s role or rank

Requires the following pages:

• Request access page
• Grant access page
• Create/edit cohorts and teams page
• Log in page
• Assign courses page

Timeframe

Oct — Nov 2022 | 6 weeks

Frontend Starter Pages:

• Very basic template for Team Access web pages
• Created to allow developers to implement basic front-end functionality since designs for these pages are not yet available

Cohort end goals:

• Complete CRUD (Create, Read, Update, and Delete) routes
• Complete Google Authentication
• Create foundational logic for starter pages

Tools

Frontend: React, Next.js

Backend: MongoDB, Express.js. Node.js, Insomnia

Architecture

The Front-End is managed by React. Then, Google Authentication and JWT are used for security and authentication. Backend is managed by Express where API requests are sent to AWS and MongoDB to store and retrieve data. AWS is used mainly for images while MongoDB is used to store any other data like user, team, or cohort information.

Backend Development

User Routes

A major back-end component involves how data regarding the website user will be stored and categorized. The training-tool website user will either be a CodeLab associate (designer or developer), a project manager of a particular team, or a board member of the CodeLab organization. CRUD routes were created to populate the fields of the user’s name, the team they are a part of, their roles on the team, their rank, and their progress on the assigned bootcamp. The progress data is further divided into the current course the user is working on and the number of lessons completed. The above image shows how the user object is constructed.

Cohort Routes

One of the major back-end components is how data for each Cohort is stored and categorized. Each cohort contains an id to identify each cohort, the name, start date of the cohort, and an array of team objects. CRUD routes are used to populate each Cohort Object and when displayed they are sorted by the starting date. There is also a current route which only gives the current cohort.

Team Routes

The team routes store data for each team including the name and list of users in that team stored with user ids. Each team is accessed within a specific cohort.

Request Routes

The request routes store data for every request made by CodeLab members to increase their rank. Members may request to increase their rank to gain access to different links, documents and content. For example, a developer may want to access content that only board members can access, and consequently they request to gain access. The data for each request includes the request ID, the request creator’s ID, their rank, and their team ID.

Frontend Development

Context and Reducers

For the frontend, we used React context and reducers throughout most of the frontend pages. It is used to easily propagate data and implement changes across multiple components. We use context and reducers since components on the page are not automatically modified when changes are made to the data. Using context allows us to modify data and have the appropriate components to be re-rendered on the page automatically. One example of where we use context and reducers in our frontend pages include managing the users and courses on the Admin Page.

Admin Page

The Admin Page is the page where PMs can view the progress of the associates in their team throughout the bootcamp. They can assign courses to developers and designers, as well as delete courses from this page. When the “Assign Course” button is clicked, a popup window appears with a drop down menu for a selection of course for the admin user to choose from. When the PM deletes a course, all the courses with the same course ID for all associates will be deleted. This was implemented with a user object using context, which contains all the information about the associate and the courses they are taking. React reducers edit the user context to add and delete courses.

User Cohort Page

The Cohort Page is where board members can view existing cohorts, teams in each cohort, and users in each team. Through this page, admins can also manage cohorts, and can add or delete cohorts, teams, or users as needed. This page also uses contexts, but instead involves a “cohorts” object (list of cohorts) that contains all relevant cohorts, as well as info about associated teams and users for each cohort object. Specialized reducer functions called by the appropriate component are used to add/delete teams/users from a cohort by passing in relevant information such as the cohortId, the team/user to add or delete, etc., so that little calculation has to be done in the frontend components themselves. When a change is made to the cohorts object, the changes are mirrored by the components.

Manage Requests Page

The Manage Requests Page is where board members can view requests by CodeLab associates to increase their rank. Here, board members can either accept or deny their request. If the board member accepts the request, then the associate receives access to what they would like to access.

User Requests Page

The user request page is made to allow users to make requests for rank changes. These rank changes would allow users to request access for more information. The dropdown allows the user to indicate the team in the current cohort they want to switch to and the new rank the user wants. Once the user presses submit a request is sent utilizing the backend where it can be approved by a board member in the manage request page.

Login Page

The user is able to login via Google Authentication, ensuring security and privacy. The feature stores all the elements shown under “Object” in the photo above. This information can be decoded using a library known as JWT decode, so the website can accept the user’s email address and log them in. The sign-out button takes the user back to the log-in screen. The user also has the option to log in by inputting the correct name, email, and password in the appropriate fields.

Conclusion

Next Steps

• Integrate back-end logic into front-end logic
• Integrate Google Authentication into MongoDB user objects
• Create and integrate JWT access tokens
• Improve the visual aesthetic of the user interface

Takeaways and Challenges

New Technology:

For many people on the team, this is their first time working on a web application. Therefore, there were many challenges and learnings that came from using new front-end and back-end frameworks.

Code Integration using Github:

With all of the different pages and functionalities that people were working on, it was difficult to integrate all of the different parts into one working piece of code. We are currently figuring out how to overcome this.

Teamwork:

With the challenge of building a large web application, collaboration is essential for overcoming bugs and issues with code. Our team was constantly talking amongst ourselves to figure out solutions to problems.

Closing Remarks

We all learned a lot about creating web applications with a team this CodeLab cohort! Hopefully, we can leverage our new skills to better tackle the coming development challenges. The next steps for the Training Tool may seem daunting, but we are ready!