​

0
 Marks 100
Due date 11 December 2025 – 16:30
Submission Submit the following via Moodle:
Source Code and Media Resources
Presentation
Instructors Matthew Brown
Khanyiso Haman

Tyhiesha Johnson

Case Study - ModernTech Solutions

Background
ModernTech Solutions is a software development company founded in 2010. Initially
a small start-up with just 20 employees, the company has experienced rapid growth
over the past decade, now employing 250 people across various departments
including software development, quality assurance, customer support, sales,
marketing, and human resources.

The company specializes in creating custom software solutions for the healthcare
industry, with a focus on patient management systems and telemedicine platforms.
Their success in this niche market has led to consistent year-over-year growth, with
plans to expand into international markets in the near future.

As ModernTech Solutions grew, their HR processes didn't evolve at the same pace.
The company started with basic spreadsheets to manage employee information and
simple time tracking. Over time, they added more spreadsheets and ad-hoc solutions
to handle new requirements, resulting in a fragmented and inefficient system.

Current Pain Points

1.​ Employee data is stored in multiple Excel files, with separate sheets for
personal information, salary details, and employment history.
2.​ Time off requests are managed through a combination of emails and a shared
calendar.
3.​ Payroll is calculated using a complex series of interconnected spreadsheets.
4.​ Performance reviews are documented in Word files and stored in a shared
drive.

1
The Project
To address the above pain points, ModernTech Solutions has approved a project
seeking your expertise as a team of front-end web developers to create a new HR
system that is user-friendly for HR staff. At this stage, the new HR system should
only consist of a web-based application with front-end implementation. The objective
is to demonstrate this as a proof of concept with the potential for future development
at a later stage.
Non-Technical Requirements
●​ Create a user-friendly interface that non-technical HR staff can easily
navigate.
●​ Demonstrate how employee data can be centralized and easily managed in a
digital format.
●​ Show how payroll calculations can be automated and how digital payslips can
be generated.
●​ Illustrate an efficient system for managing time off requests and tracking
attendance.
●​ The web application should be purely front-end, using dummy data to
simulate functionality. You can also make use of local
●​ The interface should be responsive, as HR staff occasionally work remotely
on tablets or smartphones.
Technical Requirements
●​ Use modern front-end frameworks such as Vue JS and Bootstrap to
implement a responsive design.
●​ Create and use dummy data for all functionalities.
●​ Ensure all data manipulations happen on the client-side.
●​ Ensure cross-browser compatibility.
●​ Follow best practices for code organization and commenting.
Bonus Requirements
The following requirements are not mandatory for the final web application. However,
they provide an opportunity to demonstrate your ability to tackle out-of-scope
challenges creatively, enhancing the overall user experience. You are encouraged to
attempt these requirements to test and showcase your skills.
●​ Implement client-side form validation.
●​ Add data visualization for reports using dummy data (e.g., charts for
attendance).
●​ Create a mock authentication system with hardcoded credentials.

Business Rules and Logic

To summarise the above requirements from a developer perspective, the following
business rules and logic provides you with clear guidelines for the development and
functionality of the HR web application, to ensure that all key requirements are met in
a structured and logical manner.

2
 Business Rules and Logic Description
User-Friendly Interface The HR web application must provide a well-styled interface
where key HR functions—such as employee management,
payroll processing, and attendance tracking—are clearly
accessible and easy to navigate for all users.

Employee Data Management Employee data, including personal information, salary details,
and employment history, must be managed through the web
application.

Payroll Calculations and Digital Payroll calculations must be automated based on predefined
Payslips rules and functions, such as hours worked and salary rates,
with the web application able to generate digital payslips for
each employee.

Time Off Request and Attendance The web application must include functionality for employees
Tracking to submit time off requests, which HR staff can approve or
deny. The system must automatically update attendance
records based on approved time off and track employee
attendance accurately.

Front-End Implementation with The front-end must simulate full functionality using dummy
Dummy Data data, including employee records, payroll, and attendance, to
demonstrate the application’s potential without requiring a
back-end connection.

Responsive Interface Design The web application must be designed to be fully responsive,
adjusting its layout and usability for various screen sizes,
including tablets and smartphones, to ensure that HR staff
can perform all necessary tasks regardless of the device being
used.

Team Project Structure

For this assessment, you will be required to work as a team of 3 students maximum.
Your instructor will assign you to teams after which you must internally formulate
your individual roles and responsibilities. You are encouraged to work collaboratively
to achieve the project deliverables.

Project Deliverables
By the end of this assessment, your team must produce the following deliverables:
●​ A functional front-end web-based application that addresses all technical and
non-technical requirements.
●​ A repository of your source code.
3
 ●​ A brief presentation demonstrating your web-based application and how it
addresses ModernTech Solutions' specific needs.

Additional notes
●​ Read the project brief carefully to ensure that you understand the project
requirements.
●​ This is an open-book assessment and as such you are welcome to make use
of all your teaching and learning resources, as well as any other online
resources which may assist you in completing your tasks.
●​ If you are uncertain about any aspects of the assessment, feel free to reach
out to your instructor for clarification.
●​ Ensure that you add comments to your source code where necessary. This
will help your instructor to make sense of potentially complex code.
●​ For the final presentation, all students must participate. Ensure that you do
not exceed the 5-minute time limit for your presentation.

Learning Outcomes

By the end of this assessment, you should be able to:

1 Analyse a case study and interpret requirements to apply your practical front-end web
development skills.
2 Apply modern front-end development frameworks to build responsive, cross-browser
compatible applications.
3 Adhere to best practices in front-end web development and code organization, structure,
and commenting.
4 Implement effective client-side data handling and interactions.
5 Develop creative solutions to address additional or unexpected challenges.
6 Collaborate effectively within a team, sharing responsibilities and contributing to a
collective goal.
7 Clearly present and communicate the functionality and value of the developed solution.