Table of Contents
This Learning Journey Planning System aims to allow All-In-One staff to set their learning goal for a position that they are working towards to. Currently, the project is targetted for the first release, which would encompass 5 core features.
- Users should be able to select a role they want and see a list of skills required
- Users should be able to see the courses they can take to acquire those skills, and add/remove them on their learning journey
- CRUD for roles
- CRUD for skills
- Assigning skills to roles; assigning skills to courses
Find the project live at:
Due to the deployment location of the services in the US, access in other regions might face delays. This latency optimization will be resolved in subsequent releases.
This project was built with 3 main components, namely Frontend, Backend and Database. For more details, refer to our C4 diagram
Found in the folder /app. Built with:
Found in the folder /backend. Built with:
Production database is a hosted MySQL AWS RDS instance. Database versioning is handled by Alembic that is incorporated in our backend.
We've compiled detailed setup guides for both the Frontend and Backend components.
For the database set up, refer to the Backend README to insert compatible MySQL 8.0 server credentials.
Continuous Integration is enabled for this repository via GitHub Actions, with each PR automatically triggering relevant CI pipelines. Deployment is handled by periodic manual redeploys.
Refer to the relevant CI pipeline scripts in /.github/workflows.
Access control is currently being segmented into 4 possible states (Not logged in, Staff, HR amd Manager). Use the dropdown menu in the top-right corner of the navbar to toggle between the 3 logged in states.
Selecting one of the three possible states simulates the access control permissions of the particular state. Each of these states is also pegged to a specific user (specified by id) and the default can be changed in /app/src/contexts/UserContext.jsx, as defined in the USER_TYPES const.
Alternatively, the states can be changed through the session storage of the web browser followed by a web browser refresh. For example, the userId and user can be changed as seen below.
By extension, this means that users, with multiple roles, should log in as each of their role in order to access that role's features.
For e.g., a HR user should log in as a
Staffto view their learning journey planning, but log in as aHRto edit the jobs available.
This design choice was made to facilitate a clean user interface (not having both "user" and "admin" related permissions in the same location), which will ultimately be supported by a role-separated login page in subsequent releases.
Logging in as a Staff allows us to access learning journey planning features.
By default, the main page (https://spm-g7t5.netlify.app/) leads us to the overview of a Staff's learning journeys.
Clicking into the menu button unique to each learning journey allows us to view more details or delete a learning journey.
Clicking on view leads us to the specific details of a particular learning journey.
Within this view, we're able to see the current courses planned for a learning journey, which includes the course status and skills of each of the courses. On the right, we're able to see the target job role of the learning journey, as well as its respective skills.
Clicking on Edit Learning Journey allows us to add/remove courses to the learning journey.
Selecting a skill brings up a menu of its respective courses, which can then be added to the current learning journey.
Alternatively, clicking the cross on existing courses at the bottom removes the course from the learning journey. Do note that there is a minimum of 1 course in each learning journey.
Finally, selecting Update Learning Journey saves the course changes.
Navigate to the skills page (https://spm-g7t5.netlify.app/skills) or click on the Skills tab in the navbar to view all active skills. Clicking on any of the skills reveals the skill's descriptions and its accompanying courses.
Navigate to the courses page (https://spm-g7t5.netlify.app/courses) or click on the Courses tab in the navbar to view all active courses. Clicking on any of the courses reveals the course's descriptions and its accompanying skills.
Each course also carries a color-coded tag, which can either be (Not registered, Waitlist, Rejected, Registered, OnGoing, Completed).
Navigate to the job roles page (https://spm-g7t5.netlify.app/jobs) or click on the Job Roles tab in the navbar to view all active job roles. Clicking on any of the job roles reveals the job role's descriptions and its accompanying skills.
It is also on this page where new learning journeys are created. The + New Learning Journey button in the navbar will reroute the user to this page so that they can specify the job role that they want to create a new learning journey for. This is then completed by clicking on the Create Learning Journey button for the desired job role.
In the create learning journey page, the job details are displayed at the top, followed by the respective skills, similar to the update page earlier.
Selecting on a required skill brings up a list of courses, which can then be added to the learning journey.
Once at least 1 course is added to the learning journey, the Create Learning Journey button becomes active and the user can create the learning journey with the associated courses.
Logging in as HR allows us to access skill, course and job role management features.
A similar view to the Staff's version of skills is displayed, with the addition of 3 buttons:
Create New SkillEditDeactivate
Selecting the Create New Skill option brings up a page to furnish the skill name and description for a new skill. By default, new skills are set to active.
Selecting the Edit option on a skill brings up its respective edit skill page. Changes in the fields will then be saved after using the Update Skill button.
Selecting the Deactivate option on a skill brings up a confirmation window to "soft-delete" a skill (i.e. set the skill to inactive). This would prevent Staff users from viewing the respective skill.
A similar view to the Staff's version of skills is displayed, with the addition of 1 button:
Edit
Also, course statuses are displayed via color coded tags (Active, Pending and Retired) instead of the course registration status.
Selecting the Edit option on a course brings up its respective edit course page. Skills can be assigned/removed using the dropdown box and crosses.
A similar view to the Staff's version of job roles is displayed, with the addition of 3 buttons:
Create New JobEditDeactivate
Selecting the Create New Job option brings up a page to furnish the job name and description for a new job. In addition, skills can be assigned in this page. By default, new jobs are set to active.
Selecting the Edit option on a job role brings up its respective edit job role page. Changes in the fields will then be saved after using the Update Job button.
Selecting the Deactivate option on a job role brings up a confirmation window to "soft-delete" a job role (i.e. set the job role to inactive). This would prevent Staff users from viewing the respective job role.
Currently, none of the first release features is unique to Managers, and therefore no notable features is available under this role. Future features such as viewing the skills of their team members will be added in subsequent releases.
Distributed under the MIT License. See LICENSE.txt for more information.