Clockwork

Clockwork is candidate management application.

Description

Clockwork is a candidate management application or CMA aimed to amalgamate parts of the workflow used by recruiters and hiring managers in the form of a dashboard. Clockwork implements a user interface made with React and SCSS supplied by backend data from an Express API and MySQL database.
The following README is a combination of the Client and Server README files.

Features - Client

Login Page

• Login - used to bring up a modal that can be used to sign in to gain access to the CMA.

• Login Modal - used to modal that can be used to sign in to gain access to the CMA.

Homepage

* - Non functional

Header:

• Logout - used to change logout of the CMA and redirect you to the login page.

Ribbon:

• Result Filter - used to change database.
• Result Limiter - used to change database.
• Refresh - used to refresh data for current list.

Navbar - List of options the candidate can select:

• * Select Database - used to change database.
• Lists - used to show the Candidates, Contacts and Applications
• * Parse Candidates - used to get a list of new applications from candidates.
• New Position - brings up a modal that can be used to create a new position for new positions to be linked to.
• New Opening - brings up a modal that can be used to create a new open opening for candidates to apply to.

Candidate List

List of candidates that have applied to a position before.

• Delete - button that can be used to delete targeted candidate.

Contact List

List of candidates that have been contacted.

Application List

List of candidates that have applied for positions but have not been contacted yet.

• Contact - brings up a modal that can be used to submit data after candidate is contacted.

New Position

Modal that can be used to create a new position for new positions to be linked to.

New Opening

Modal that can be used to create a new open opening for candidates to apply to.

Pagination - List of pages of data with buttons to change them. Number of pages is based on the limit set in the ribbon and the amount of data available:

• Start - Takes you first to page 1.
• Previous - Takes you back to one page based on your current.
• Numbers - Takes you to page of the number selected.
• Next - Takes you forward by one page based on your current.
• End - Takes you last page.

Client Live URL Hosted server is not running at the moment. Message Sa-Yoor Headley to request it

Features - Server

Packages:

• express
• mysql

Middleware:

• dotenv
• cors
• body-parser
• pagination - This is middleware created to paginate data.

Modules:

• find - This module is used to retrieve the data from the SQL database based on the data and options provided.
• find - This module is used to count the amount of documets retrieved by the "find" module.

Routes

Root

Routes	HTTP	Description	Expected Response	Required Body
/	GET	Checks if server is running	{status: "Running"}

Candidates

Routes	HTTP	Description	Expected Response	Required Body
/candidates	GET	Gets all candidates. Results are paginated.	{   "PersonID": number,   "firstName": string,   "lastName": string,   "emailAddress": string,   "currentStatus": string,   "city": string,   "state": string,   "phoneNumber": string }
/candidate/create	POST	Creates new candidate if candidate does not exist already.	{status: 'No Results'}	{  "firstName": string,  "lastName": string,  "emailAddress": string,  "phoneNumber": string  "city": string,  "state": string }
/candidate/delete/:id	DELETE	Deletes application based on ID.	{status: 'No Results'}
/candidate/update/:id	PUT	Updates application based on ID.	{status: 'No Results'}	{   "currentStatus": string,   "lastName": string,   "firstName": string,   "emailAddress": string,   "city": string,   "state": string, }

Applications

Routes	HTTP	Description	Expected Response	Required Body
/applications	GET	Gets all applications and related data. Results are paginated.	{   "idApplications": number,   "OpeningId": number,   "ApplicationDate": string   "ApplicationPersonId": number,   "ApplicationStatus": string,   "assignedRecruiter": number,   "idOpenings": number,   "city": string,   "state": string,   "position": string,   "manager": string,   "managerEmail": string,   "idLocations": number,   "PersonID": number,   "firstName": string,   "lastName": string,   "emailAddress": string,   "currentStatus": string,   "phoneNumber": string }
/applications/:id	GET	Gets application by ID and related data.	{   "idApplications": number,   "OpeningId": number,   "ApplicationDate": string   "ApplicationPersonId": number,   "ApplicationStatus": string,   "assignedRecruiter": number,   "idOpenings": number,   "city": string,   "state": string,   "position": string,   "manager": string,   "managerEmail": string,   "idLocations": number,   "PersonID": number,   "firstName": string,   "lastName": string,   "emailAddress": string,   "currentStatus": string,   "phoneNumber": string }
/application/create	POST	Creates new application.	{status: 'No Results'}	{   "OpeningId": number,   "ApplicationPersonId": number,   "assignedRecruiter": number }
/application/update/:id	PUT	Updates application's status based on ID.	{   status: 'No Results',   id: number }	{"contactStatus": string}

Contacts

Routes	HTTP	Description	Expected Response	Required Body
/contacts	GET	Gets all contacts and related data. Results are paginated.	{   "contactID": number,   "ContactRecruiterId": number,   "ContactStatus": string,   "ContactApplicationsId": number,   "ContactTimeStamp": string,   "idApplications": number,   "OpeningId": number,   "ApplicationDate": string,   "ApplicationPersonId": number,   "ApplicationStatus": string,   "assignedRecruiter": number,   "PersonID": number,   "firstName": string,   "lastName": string,   "emailAddress": string,   "currentStatus": string,   "city": string,   "state": string,   "phoneNumber": string,   "idRecruiters": number,   "recruiterFirstName": string,   "recruiterLastName": string,   "email": string,   "assignedAccounts": number,   "idOpenings": number,   "position": string,   "manager": string,   "managerEmail": string,   "idLocations": number }
/contact/create	POST	Creates new contact.	{status: 'No Results'}	{   "idRecruiters": number,   "contactStatus": string,   "idApplications": number }

Recruiters

Routes	HTTP	Description	Expected Response	Required Body
/recruiters/:emailAddress&:password	GET	Gets recruiter data by email address and password.	{   "idRecruiters": number,   "recruiterFirstName": string,   "recruiterLastName": string,   "email": string,   "assignedAccounts": number,   "login": boolean }

Openings

Routes	HTTP	Description	Expected Response	Required Body
/openings	GET	Gets all openings. If given city, state and positions as a query it returns found value, if not returns all values	{   "idRecruiters": number,   "recruiterFirstName": string,   "recruiterLastName": string,   "email": string,   "assignedAccounts": number,   "login": boolean }
/opening/create	POST	Creates new opening.	{status: 'No Results'}	{  "city": string  "state": string  "position": string  "manager": string  "managerEmail": string  "idLocations": number }

Position

Routes	HTTP	Description	Expected Response	Required Body
/position/create	POST	Creates new position.	{status: 'No Results'}	{   "streetAddress": string,   "city": string,   "state": string,   "phoneNumber": string,   "locationAliases": string,   "emailAddress": string,   "name": string }

Tech Stack

• Frontend - React, Javascript, SCSS, HTML
• Backend - Node.js, Express
• Database - MySQL

Concepts Used

Express

• Modules, Middleware, Packages
• Handling GET, POST, PUT and DELETE requests
• Getting data from route and query parameter and the body
• Using dotenv
• Connecting and querying MySQL database
• Pagination

SQL

• Creating and modifying Databases, Tables and Relationships
• Queries

React

• Fetching APIs using Axios, Reusable Components, Props, Conditional Rendering
• Data Manipulation (Filters, Mapping, Looping, Regular Expressions) and Display
• useState, useEffect, useRef, useCallback
• Class Toggling, Modals, Forms, Cards

SCSS

• CSS Variables, Flexbox, Tables, Grid, Position
• Modal, Buttons, Cards, Animations

Prerequisites

1. Install Node JS

   Refer to https://nodejs.org/en/ to install nodejs

2. Database

   ER Diagram

   

   ALL RELATIONS MUST BE FOLLOWED AS PER ER DIAGRAM ABOVE
   
   

   Tables

   • Applications

   Field	Type	Null	Key	Default	Extra
   idApplications	int(11)	NO	PRI		auto_increment
   OpeningId	int(11)	NO	MUL
   ApplicationDate	date	NO
   ApplicationPersonId	int(11)	YES	MUL
   ApplicationStatus	varchar(20)	NO
   assignedRecruiter	int(11)	YES	MUL

   
   
   • Contacts

   Field	Type	Null	Key	Default	Extra
   contactID	int(11)	NO	PRI		auto_increment
   ContactRecruiterId	int(11)	YES	MUL
   ContactStatus	varchar(20)	NO
   ContactApplicationsId	int(11)	YES	MUL
   ContactTimeStamp	datetime	YES

   
   
   • Locations

   Field	Type	Null	Key	Default	Extra
   contactID	int(11)	NO	PRI		auto_increment
   ContactRecruiterId	int(11)	YES	MUL
   ContactStatus	varchar(20)	NO
   ContactApplicationsId	int(11)	YES	MUL
   ContactTimeStamp	datetime	YES

   
   
   • Openings

   Field	Type	Null	Key	Default	Extra
   idOpenings	int(11)	NO	PRI		auto_increment
   city	varchar(25)	NO
   state	varchar(25)	NO
   position	varchar(50)	NO
   manager	varchar(40)	NO
   managerEmail	varchar(100)	NO
   idLocations	int(11)	NO	MUL

   
   
   • Persons

   Field	Type	Null	Key	Default	Extra
   idOpenings	int(11)	NO	PRI		auto_increment
   city	varchar(25)	NO
   state	varchar(25)	NO
   position	varchar(50)	NO
   manager	varchar(40)	NO
   managerEmail	varchar(100)	NO
   idLocations	int(11)	NO	MUL

   
   
   • Positions

   Field	Type	Null	Key	Default	Extra
   idPositions	int(11)	NO	PRI		auto_increment
   streetAddress	varchar(50)	NO
   city	varchar(25)	NO
   state	varchar(25)	NO
   phoneNumber	varchar(25)	NO
   locationAliases	varchar(100)	NO
   emailAddress	varchar(100)	NO
   name	varchar(40)	NO

   
   
   • Recruiters

   Field	Type	Null	Key	Default	Extra
   idRecruiters	int(11)	NO	PRI		auto_increment
   recruiterFirstName	varchar(20)	NO
   recruiterLastName	varchar(20)	NO
   email	varchar(100)	NO
   assignedAccounts	int(11)	YES
   loginCredentials	varchar(50)	YES

   
   

3. Client

   Client will not run without server

• Install create-react-app

  Install create-react-app npm package globally. This will help to easily run the project and also build the source files easily. Use the following command to install create-react-app

  npm install -g create-react-app

4. Server

   Server will not run without database

   • Create database as per ER Diagram

     Refer to Database section of the README for the ER Diagram.

   • Create environment variables in .env file

     cd server/
     touch .env

     Variables required:

     • DB_USER - Username used to access database
     • DB_PASS - Password associated with username
     • DB_NAME - Name given to the database
     • DB_HOST - IP Address/URL of database

     Example

     DB_USER=root
     DB_PASS=password
     DB_NAME=mydb
     DB_HOST=127.0.0.1

   
   

Run Locally

Clone the project

git clone https://github.com/Sa-YoorHeadley/Clockwork.git

Go to the client directory

cd Clockwork/client

Install all the npm packages.

npm install

In order to start the client type the following command

npm start

Go to the server directory

cd Clockwork/server

Install all the npm packages.

npm install

In order to start the server type the following command

npm start

The Client Runs on localhost:3000

The Server Runs on localhost:3001

Issues

• This app is currently unfinished and it is unclear when, if ever it will be
• The UI for this app is not currently responsive and will not provide good user experience on smaller screens like tablets and phones.
• This app has not been thoroughly tested and may have bugs.
• Parts of this app may not use best practices in terms of coding and file and folder structure.

Acknowledgements

• GldnArms
• Cododev for Pagination Solution