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.
