Conceptual Overview

This is a web application to help onboard new employees designed specifically for the Warren Center. The objective is to improve and streamline their current manual onboarding process, aiming for enhanced user efficiency and overall ease of use. The application has three types of users: admins, supervisors, and employees. Admins control all the CRUD modifications on the app. Supervisors can perform only one update action, but they have the ability to view all the pages accessible to the admin. Employees can perform no modifications and can only see their page.

Project Setup

Prerequisites

Before you can run this project, you'll need to have the following software installed on your computer:

• Node.js (LTS)
• Docker
• Visual Studio Code

If you haven't yet installed Node.js, Docker, and VS Code, you can download them by following the steps listed in the links below :

• Node.js (LTS) for Windows or Mac
• Docker for Windows or Mac
• Visual Studio Code for Windows or Mac

Note: for Windows users, dedicating time to set up Windows Subsystem for Linux (WSL) will prove to be a worthwhile investment. This is not required to run the project, but is recommended.

Running the Project for the First Time

Once you have VS Code, Docker, and Node.js installed, you can setup the project by following these steps:

1. Open Visual Studio Code and click on the Clone Repository button in the welcome screen

2. In our GitHub repository click on the green Code button and copy the HTTPS repository URL

3. Enter the URL of the repository and choose a local directory to clone it to

4. Open a terminal window in VSCode and navigate to the project directory. If you do not know how to navigate in the terminal look at this video or this blog post

5. From the root of the project, go to the /frontend folder and type npm install and hit the enter key (this may take a while)

6. Run the command cd ../backend to go to the backend folder, and run npm install (this may take a while)

7. Run the command cd .. to go to the root of the project and then run docker compose up in the project's root directory to start the docker container. If you don't see anything along the lines of "database system is ready to accept connections", close the terminal and try the command again.

8. Keep the docker terminal open and make a new terminal window

9. Go to the backend folder and run the command npx prisma migrate reset to create the database

10. Go back to the terminal and open a new terminal window in the backend folder

11. Now run npm run dev to start the backend

12. Open a fourth terminal and go to the frontend folder and run npm run dev to start the frontend

Running the Project Subsequently

1. Open the folder where you initially cloned the repository in VS Code
2. In three different terminals:
   1. Run docker compose up in the root of the project
   2. Run npm run dev in the /backend folder
   3. Run npm run dev in the /frontend folder (this may take a while)

If any part of the setup does not make sense or is yielding errors, you can paste these steps in ChatGPT or Bing Chat. These tools are a great first step in debugging the problem.

Functional Requirements

Roles and Permissions

Admin

User with the most permissions. Can perform all CRUD operations on all pages.

Supervisor

User with the second most permissions. Sees everything the admin can. However, can perform the action of completing a task for a user only if they are assigned to that specific task.

Employee

User with the least permissions. Can only see their own page. Can't perform any CRUD operations.

Pages

Users

On this page the admins and supervisors will be able to see all the users currently in the system. The admin will have the ability to CRUD users on this page, whereas the supervisor will only be able to view the users. Upon clicking on a specific user, their task list will open up. The admin will be able to mark every task as completed. Whereas, the supervisor will only be able to mark the tasks they are assigned to.

Departments

On this page the admins and supervisors will be able to see all the departments currently in the system. The admin will have the ability to CRUD departments on this page, whereas the supervisor will only be able to view the departments. Upon clicking on a specific department, the department's task list will open up. The admin will be able to perform CRUD on tasks. Whereas, the supervisor will only be able to view the tasks assigned to that deparment.

Archive

This page will have three tabs: Archived Users, Archived Departments, Archived Tasks. The admins and supervisors will be able to see all the archived users, departments, and tasks. The admin will have the ability to either permanently delete or restore users, departments, and tasks. Whereas the supervisor will only be able to view the archived users, departments, and tasks.

Employee Specific Page (Not implemented yet)

Employees will not be able to see any other page except this one. They can't edit anything on this page. They can only interact with the profile button and the supervisor's name. The profile button will open a modal with their profile information. Upon clicking the supervisor's name, it will open a modal with the supervisor's profile information. The idea is that the employee can see their tasks and then be able to see their supervisor's information in case they need to contact them.

Database Tables

Tables	Attributes
User	Name, Email (unique) Archived (boolean)
Department	Name Archived (boolean)
Task	Description Archived (boolean)
Role	roleName Archived (boolean)
UserRoleMapping	Relates a user to a role - (userId, roleId)
DepartmentTaskMapping	Relates a department to a task - (departmentId, taskId)
DepartmentUserMapping	Relates a user to a department - (userId, departmentId)
ApproverTaskMapping	Relates a supervisor to a task - (userId (needs supervisor role), taskId)
OnboardingEmployeeTaskMapping	Relates an employee to a task - (userId (needs employee role), taskId)

Stack

Frontend

• React (framework)
• HeadlessUI (component library)
• TailwindCSS (styling)
• Javascript (language)

Backend

• Node.js (runtime)
• Express.js (framework)
• Prisma (ORM)
• PostgreSQL (database)
• Javascript (language)

VS Code Extensions

• Thunder Client (similar to Postman for testing API endpoints)
• Copilot and Copilot Chat (AI) (Student GitHub account recieve access for free)
• Prettier (code formatter)
• ESLint (code linter)
• GitLens (additional git features)

These are the most important extensions that everyone on the team should have. Other extensions are up to personal preference.

Third party integrations

• Auth0 for authentication
  • Microsoft sign-in (The Warren Center uses Office 365, so we only need this to authenticate them)

Deployment

[Not deployed yet]