Software Design Documentation

High-level Architecture

Architecture Diagram

Architecture Description

The static EmploiF1rst web application, built with React and TypeScript, is hosted on an Nginx web server provided by Cybera. When the frontend needs to interact with the backend, it sends requests to an API server running in a Node.js environment, also hosted by Cybera. The API server then handles data transactions with a local MySQL database to fulfill these requests.

List of Technologies

• React.js - Free open source JavaScript frontend library for building UI
• Node.js - Open source JavaScript runtime environment allowing JavaScript code execution on server side
• Express.js Framework - Backend web development application framework for building RESTful APIs
• Nginx - An open source web server software which provides HTTPS server capabilities
• Cybera RAC - Provides free cloud computing resources to ALberta based academics, researchers and non-profits
• TypeORM - A traditional object relational mapper which maps tables to model classes
• MySql - Open source relational database management system(DBMS)
• Supertest - A free open source JavaScript library for testing node.js applications
• Cypress - A frontend test automation tool for regression testing of web applications
• Selenium(Switched to Cypress) - A browser automation tool typically used to create tests for and debug web applications

Major Data Elements

ER Diagram

Model Description

This ERD outlines a job application system connecting students, recruiters, job posts, and companies. GraduateStudents (a type of User) can track their job applications using a Job Manager and apply to Job Posts through the Application entity. Recruiters, associated with Companies, create and manage job posts. Students are linked to their educational background, skills, and work experiences, which help recruiters make informed decisions. Meanwhile, Notifications keep students updated about job opportunities.

Interaction Scenarios

General Overview Diagram

Overview Description

The diagram displays the general usage of the web application where recruiters login and can post job postings which graduate students can apply to. The diagram also displays some basic core features such as graduate students querying the job listings and being notified when a job posting is they have applied for is closed.

Login Diagram

Login Description

The diagram displays a more detailed login sequence for a user of the web application where a user tries to log in and when authentification is setup, the user must authenticate their sign in instance first before being redirected to a specific dashboard depending on if the user is a recruiter or graduate student.

Application Creation and Tracking Diagram

Application Description

The diagram displays how a graduate student would create an application to a job and track it through the web application. The diagram displays the core featues of uploading resume info, being able to autofill a resume's fields with existing info while creating a job application, and being able to update the status of an application manually while keeping track of an application's current status.

Job Dashboard Diagram

Job Dashboard Description

The diagram displays how a graduate student can query job's by fields such as location or position while searching for a job to apply to. The diagram also displays how a graduate student can be matched to a job posting based on a matching algorithm.

Company Dashboard Diagram

Company Dashboard Description

The diagram displays the recruiter side experience interacting with the dashboard to post a job and query applicants. The dashboard also allows the recruiter to obtain and keep track of applications to review for later and to delete a job post when it is no longer open.

Company Rating Diagram

Rating Description

The diagram displays how a graduate student can find reviews for a company for a given job post and leave a review for the company as well which will be stored in the database for other user's to see.

Low-fidelity User Interface

Welcome Page

Applicant View

Recruiter View

Admin View