FRONTEND MODULE

CONTENTS
This module has the following files:
1. MODULE_FRONTEND.doc
2. MODULE_FRONTEND_MEDIA.zip

INTRODUCTION
In this module you are required to implement the results of the REST API that you have created,
Frontend using provided JavaScript libraries (react/angular/vue) of Society Job application Platform.

DESCRIPTION OF PROJECTS AND TASKS

In this module, you can use the gui template provided in the media files to build a society platform.
Implement REST API into the frontend.
All response formats must be in JSON form.

Society login and logout

To be able to enter the system, the society must first login using the ID card number and password. When
the society has entered the system, the logout button will appear, and the society can exit the system by
clicking the logout button

Specifications:
Feature: B1 - Society login and logout: as a visitor, i want to login
into society Job application platform and logout to exit the system.

Scenario: B1a - Society login success

Given I am on the login page

And I enter correct id_card_number and password

Then I redirected to society dashboard page

Scenario: B1b - Society login fails

Given I am on the login page

 And I enter wrong id_card_number or password

Then I stay in the login page and I see error message “ID Card
Number or Password incorrect”

Scenario: B1c - Society logout success

Given I am on the any page that has been logged in

And I press logout button

Then I get message “logout success” and redirected to login page

And I cannot reach the previous page by going back

Society Dashboard
In the dashboard page, there are two sections, data validation and job application section. where the
society must request a data validation and the data validation is approved by the validator to be able to
register for job application.

Specifications:
Feature: B2 - Society Dashboard: as a society, i want to see data
validation info and my job applications list in the dashboard page.
Scenario: B2a – Data validation section is displayed

Given I am on dashboard page

Then I see the data validation section with “My Data validation”
title

Scenario: B2b - Link to request data validation appears when society

hasn’t data validation before

Given I am on dashboard page

And I haven’t request data validation before

Then I see request data validation link in the data validation

section

Scenario: B2c - Show data validation info

 Given I am on dashboard page

And my request data validation is sent or accepted/rejected by

validator

Then I see data validation info in the data validation section

Scenario: B2d - Job application list section is displayed

Given I am on dashboard page

Then I see the Job application list section with “Job

applications” title

Scenario: B2e - Show Job application info message

Given I am on dashboard page

And I haven’t request data validation before

Then I see “Your data validation must be approved by validator to

get the applying job” in the Job application list section

Scenario: B2f - The Job application is displayed when society data

validation have been accepted by validator
 Given I am on dashboard page

And I my request data validation has been accepted by validator

Then I see the Job application with link is displayed in the Job
application list section

Given I am on dashboard page

And my Job application is finished

Scenario: B2h - The Job applications show Job application info

correctly when Job application is finished

Given I am on dashboard page

Then I see Job application info (company, address, position, apply

date, notes) in the Job application box

Request Data validation

In the data validation request page, the society can fill in the job position if they have by selecting job
category, can fill the work experiences if they have by selecting "Yes, I have" in dropdown work
experiences question and they can send request if reason accepted has filled.

Specifications :
Feature: B3 - Society Data validation: as a society, i want to request
data validation.
Scenario: B3a - Data validation form is displayed correctly

When I press “Request data validation” button in the dashboard

page

Then I see the data validation form (job category, job position,
work experiences, reason accepted) is displayed

Scenario: B3b - Show job position form by choosing “job category”,

show work experiences textarea by choosing “Yes, I have” and show
send request button by fill reason accepted

Scenario: B3c - Request data validation successful

Given I am on request data validation page

And I press request button

 Then the request data validation is sent, the “Request data
validation successful” message is appear, and I redirected to
dashboard page

Job Vacancies List

When the society registers for Job application by pressing the "Add Job application" button on the
dashboard page, the society is directed to the list Job vacancies page to select a Job vacancies. In the item
job vacancies, display the applying jobs available in that vacancies correctly.

Job vacancies are displayed by job category. In each job category the applying job has a different job
vacancies.

Specifications :
Feature: B4 - Job vacancies List: as a society, I want to see a list
of Job vacancies by my job category.

Scenario: B4a - Show list Job vacancies by society job category

Given I am on Job vacancies list page

 Then I see a list of Job vacancies in my job category

Scenario: B4b - Show information for each job vacancies

Given I am on Job vacancies page

Then I see job information (company, address, description,

positions) in each job vacancy item.

Scenario: B4c – Job vacancy item unavailable when the job vacancy
has been apply before.

Detail Job Vacancy

In the Job vacancy detail page, there are show detail of job vacancy like company name, address,
description, available positions. Society can apply job by filling job position and notes for company.

Specifications :
Feature: B5 - Detail Job vacancy: as a society, I want to see detail
of Job vacancy and see avaiable job positions, capacity and how many
people has been apply before.
Scenario: B5a - Information displays correctly

Given I am on Job vacancy detail page

Then I see the section with job position that have been show the
capacity, total of society applying job with maximum applicants is
displayed correctly.

Scenario: B5b - Can apply for a job position if the total number of
applicants is below the specified maximum

Given I am on Job vacancy detail page

Then I see job position with total capacity, applicants and

maximum applicants
 Scenario: B5c - Register Job application

Given I am on Job vacancy detail page

I choose job position with no yellow mark (the total number of

applicants is below the specified maximum)

I fill the Notes for company field

And I press “Apply for this Job” button

Then the success or error message is appear and I redirected to

dashboard page

Notes:

- For each response from the REST API must be displayed.

- Build the frontend into production mode first before your
frontend project is pushed and the REST API must be consumed from
your API before.
ERD
You can use and improve ERD below:
INSTRUCTION FOR COMPETITORS

● Save your work in the "frontend" folder : XX_module_frontend

● Use the gui templates provided in the media files.

● For this module, you must use one of the available frameworks provided. Applications developed
without use of any of these frameworks will not be considered. You should take advantage of the
framework as much as possible.

Note : XX is competitor number.