WEB DEVELOPER EXPERT COMPETITION 2024

ADVANCED SERVER SIDE MODULE

CONTENTS
This module includes the following files:
1. ADVANCED_SERVER_SIDE.docx
2. ADVANCED_SERVER_SIDE.pdf
3. ADVANCED_SERVER_SIDE_MEDIA.zip

INTRODUCTION
In this advanced module, you are tasked with creating a sophisticated project management platform
called "TaskMaster." This platform allows users to manage projects, tasks, teams, and deadlines with
complex interactions and advanced features, including role-based access control, nested tasks, and real-
time collaboration. The project is divided into two phases: the first phase focuses on creating a
comprehensive REST API, and the second phase involves developing a dynamic frontend application.
Detailed descriptions and tools are provided below.

DESCRIPTION OF PROJECT AND TASKS

This module is divided into two phases. In the first phase, you will create a comprehensive REST API. In
the second phase, you will develop a dynamic frontend application with the following provided
frameworks:
- Laravel (v10.x)
- React (v18.x with react-router and axios)
- Vue (v3.x with vue-router and axios)

Phase 1 - REST API

For all endpoints, the request header should default to Content-type: application/json. Some
endpoints may specify a different Content-type header, which you must adjust accordingly.

1. Authentication
- Register
o Endpoint: /api/v1/auth/register
o Method: POST
o Description: For users to register an account.
o Request Body:
▪ full_name (required)

▪ email (required, unique, valid email format)

 ▪ username (required, min 3 chars, unique, only alphanumeric, dot “.” or
underscore “_” allowed)
▪ password (required, min 8 chars, must include at least one uppercase letter,
one lowercase letter, one digit, and one special character)
o Response:
▪ Success: HTTP Status Code 201
{
"message": "Register success",
"token": "generated_token",
"user": {
"id": 1,
"full_name": "John Doe",
"email": "john.doe@example.com",
"username": "john.doe"
}
}

▪ Invalid Field: HTTP Status Code 422

{
"message": "Invalid field",
"errors": {
"email": ["The email has already been taken."],
"username": ["The username has already been taken."],
"password": ["The password must be at least 8 characters and
include an uppercase letter, a lowercase letter, a digit, and a
special character."]
}
}

- Login
o Endpoint: /api/v1/auth/login
o Method: POST
o Description: For users to log into the system.
o Request Body:
▪ username

▪ password

o Response:
▪ Success: HTTP Status Code 200
{
"message": "Login success",
"token": "generated_token",
"user": {
"id": 1,
"full_name": "John Doe",
 "username": "john.doe"
}
}

▪ Failed: HTTP Status Code 401

{
"message": "Wrong username or password"
}

- Logout
o Endpoint: /api/v1/auth/logout
o Method: POST
o Description: For users to log out.
o Request Headers: Authorization: Bearer <token>
o Response:
▪ Success: HTTP Status Code 200
{
"message": "Logout success"
}

▪ Invalid Token: HTTP Status Code 401

{
"message": "Unauthenticated."
}

2. Project Management
- Create Project
o Endpoint: /api/v1/projects
o Method: POST
o Description: For users to create a new project.
o Request Headers: Authorization: Bearer <token>
o Request Body:
▪ name (required)

▪ description (required, max 500 chars)

▪ deadline (required, date format YYYY-MM-DD)

▪ team_id (required, exists in teams table)

o Response:
▪ Success: HTTP Status Code 201
 {
"message": "Project created successfully",
"project": {
"id": 1,
"name": "New Project",
"description": "Project description here",
"deadline": "2024-12-31",
"team_id": 1,
"created_at": "2024-06-03T12:00:00Z"
}
}

▪ Invalid Field: HTTP Status Code 422

{
"message": "Invalid field",
"errors": {
"name": ["The name field is required."],
"description": ["The description field is required and must
not exceed 500 characters."],
"deadline": ["The deadline field is required and must be a
valid date."],
"team_id": ["The team_id field is required and must exist in
the teams table."]
}
}

- Update Project
o Endpoint: /api/v1/projects/:id
o Method: PUT
o Description: For users to update an existing project. Only the project owner or an admin
can perform this action.
o Request Headers: Authorization: Bearer <token>
o Request Body:
▪ name (optional)

▪ description (optional, max 500 chars)

▪ deadline (optional, date format YYYY-MM-DD)

▪ team_id (optional, exists in teams table)

o Response:
▪ Success: HTTP Status Code 200
{
"message": "Project updated successfully",
"project": {
"id": 1,
"name": "Updated Project",
"description": "Updated project description",
 "deadline": "2024-12-31",
"team_id": 1,
"updated_at": "2024-06-03T12:00:00Z"
}
}

▪ Unauthorized: HTTP Status Code 403

{
"message": "You do not have permission to update this project"
}

▪ Project Not Found: HTTP Status Code 404

{
"message": "Project not found"
}

▪ Invalid Field: HTTP Status Code 422

{
"message": "Invalid field",
"errors": {
"description": ["The description field must not exceed 500
characters."],
"deadline": ["The deadline must be a valid date."],
"team_id": ["The team_id field must exist in the teams
table."]
}
}

- Delete Project
o Endpoint: /api/v1/projects/:id
o Method: DELETE
o Description: For users to delete a project. Only the project owner or an admin can
perform this action.
o Request Headers: Authorization: Bearer <token>
o Response:
▪ Success: HTTP Status Code 204
▪ Unauthorized: HTTP Status Code 403
{
"message": "You do not have permission to delete this project"
}

▪ Project Not Found: HTTP Status Code 404

{
"message": "Project not found"
}
3. Task Management
- Create Task
o Endpoint: /api/v1/projects/:project_id/tasks
o Method: POST
o Description: For users to create a new task within a project.
o Request Headers: Authorization: Bearer <token>
o Request Body:
▪ title (required)

▪ description (required, max 1000 chars)

▪ assigned_to (required, user ID)

▪ status (required, enum: ["pending", "in-progress", "completed"])

▪ priority (required, enum: ["low", "medium", "high"])

▪ due_date (required, date format YYYY-MM-DD)

▪ parent_task_id (optional, exists in tasks table for nested tasks)

o Response:
▪ Success: HTTP Status Code 201
{
"message": "Task created successfully",
"task": {
"id": 1,
"title": "New Task",
"description": "Task description here",
"assigned_to": 2,
"status": "pending",
"priority": "medium",
"due_date": "2024-12-31",
"project_id": 1,
"parent_task_id": null,
"created_at": "2024-06-03T12:00:00Z"
}
}

▪ Invalid Field: HTTP Status Code 422

{
"message": "Invalid field",
"errors": {
"title": ["The title field is required."],
"description": ["The description field is required and must
not exceed 1000 characters."],
"assigned_to": ["The assigned_to field is required and must
 be a valid user ID."],
"status": ["The status field is required and must be one of
'pending', 'in-progress', or 'completed'."],
"priority": ["The priority field is required and must be one
of 'low', 'medium', or 'high'."],
"due_date": ["The due_date field is required and must be a
valid date."],
"parent_task_id": ["The parent_task_id field must exist in
the tasks table."]
}
}

- Update Task
o Endpoint: /api/v1/projects/:project_id/tasks/:id
o Method: PUT
o Description: For users to update an existing task. Only the task creator or an admin can
perform this action.
o Request Headers: Authorization: Bearer <token>
o Request Body:
▪ title (optional)

▪ description (optional, max 1000 chars)

▪ assigned_to (optional, user ID)

▪ status (optional, enum: ["pending", "in-progress", "completed"])

▪ priority (optional, enum: ["low", "medium", "high"])

▪ due_date (optional, date format YYYY-MM-DD)

▪ parent_task_id (optional, exists in tasks table for nested tasks)

o Response:
▪ Success: HTTP Status Code 200
{
"message": "Task updated successfully",
"task": {
"id": 1,
"title": "Updated Task",
"description": "Updated task description",
"assigned_to": 2,
"status": "in-progress",
"priority": "high",
"due_date": "2024-12-31",
"project_id": 1,
"parent_task_id": null,
"updated_at": "2024-06-03T12:00:00Z"
}
}
 ▪ Unauthorized: HTTP Status Code 403
{
"message": "You do not have permission to update this task"
}

▪ Task Not Found: HTTP Status Code 404

{
"message": "Task not found"
}

▪ Invalid Field: HTTP Status Code 422

{
"message": "Invalid field",
"errors": {
"description": ["The description field must not exceed 1000
characters."],
"due_date": ["The due_date must be a valid date."],
"parent_task_id": ["The parent_task_id field must exist in
the tasks table."]
}
}

- Delete Task
o Endpoint: /api/v1/projects/:project_id/tasks/:id
o Method: DELETE
o Description: For users to delete a task. Only the task creator or an admin can perform
this action.
o Request Headers: Authorization: Bearer <token>
o Response:
▪ Success: HTTP Status Code 204
▪ Unauthorized: HTTP Status Code 403
{
"message": "You do not have permission to delete this task"
}

▪ Task Not Found: HTTP Status Code 404

{
"message": "Task not found"
}

4. Team Management
- Create Team
o Endpoint: /api/v1/teams
 o Method: POST
o Description: For users to create a new team.
o Request Headers: Authorization: Bearer <token>
o Request Body:
▪ name (required)

▪ description (required, max 500 chars)

▪ members (required, array of user IDs)

o Response:
▪ Success: HTTP Status Code 201
{
"message": "Team created successfully",
"team": {
"id": 1,
"name": "New Team",
"description": "Team description here",
"created_at": "2024-06-03T12:00:00Z",
"members": [
{
"id": 1,
"full_name": "John Doe",
"username": "john.doe"
},
{
"id": 2,
"full_name": "Jane Smith",
"username": "jane.smith"
}
]
}
}

▪ Invalid Field: HTTP Status Code 422

{
"message": "Invalid field",
"errors": {
"name": ["The name field is required."],
"description": ["The description field is required and must
not exceed 500 characters."],
"members": ["The members field is required and must be an
array of valid user IDs."]
}
}

- Update Team
o Endpoint: /api/v1/teams/:id
o Method: PUT
o Description: For users to update an existing team. Only team members or an admin can
perform this action.
o Request Headers: Authorization: Bearer <token>
o Request Body:
▪ name (optional)

▪ description (optional, max 500 chars)

▪ members (optional, array of user IDs)

o Response:
▪ Success: HTTP Status Code 200
{
"message": "Team updated successfully",
"team": {
"id": 1,
"name": "Updated Team",
"description": "Updated team description",
"updated_at": "2024-06-03T12:00:00Z",
"members": [
{
"id": 1,
"full_name": "John Doe",
"username": "john.doe"
},
{
"id": 2,
"full_name": "Jane Smith",
"username": "jane.smith"
}
]
}
}

▪ Unauthorized: HTTP Status Code 403

{
"message": "You do not have permission to update this team"
}

▪ Team Not Found: HTTP Status Code 404

{
"message": "Team not found"
}

▪ Invalid Field: HTTP Status Code 422

{
"message": "Invalid field",
"errors": {
 "description": ["The description field must not exceed 500
characters."],
"members": ["The members field must be an array of valid user
IDs."]
}
}

- Delete Team
o Endpoint: /api/v1/teams/:id
o Method: DELETE
o Description: For users to delete a team. Only the team owner or an admin can perform
this action.
o Request Headers: Authorization: Bearer <token>
o Response:
▪ Success: HTTP Status Code 204
▪ Unauthorized: HTTP Status Code 403
{
"message": "You do not have permission to delete this team"
}

▪ Team Not Found: HTTP Status Code 404

{
"message": "Team not found"
}

5. Role-Based Access Control (RBAC)

- Assign Role
o Endpoint: /api/v1/roles/assign
o Method: POST
o Description: For admins to assign roles to users.
o Request Headers: Authorization: Bearer <token>
o Request Body:
▪ user_id (required, user ID)

▪ role_id (required, role ID)

o Response:
▪ Success: HTTP Status Code 200
{
"message": "Role assigned successfully",
"role": {
 "user_id": 1,
"role_id": 2,
"assigned_at": "2024-06-03T12:00:00Z"
}
}

▪ Invalid Field: HTTP Status Code 422

{
"message": "Invalid field",
"errors": {
"user_id": ["The user_id field is required and must be a
valid user ID."],
"role_id": ["The role_id field is required and must be a
valid role ID."]
}
}

- Revoke Role
o Endpoint: /api/v1/roles/revoke
o Method: POST
o Description: For admins to revoke roles from users.
o Request Headers: Authorization: Bearer <token>
o Request Body:
▪ user_id (required, user ID)

▪ role_id (required, role ID)

o Response:
▪ Success: HTTP Status Code 200
{
"message": "Role revoked successfully",
"role": {
"user_id": 1,
"role_id": 2,
"revoked_at": "2024-06-03T12:00:00Z"
}
}

▪ Invalid Field: HTTP Status Code 422

{
"message": "Invalid field",
"errors": {
"user_id": ["The user_id field is required and must be a
valid user ID."],
"role_id": ["The role_id field is required and must be a
valid role ID."]
}
 }

Phase 2 - Frontend Development

Template HTML is provided. You are required to use the template and are encouraged to modify the
design without affecting the functionality.

General Requirements:
- Document title should reflect the current page.
- Display username and logout button on the navbar after login success.
- Clicking the username will go to the logged-in user's profile page.
- User can log out after clicking the logout button on the navbar.

Page Requirements:
- Register Page:
o If a user is logged in, the page should redirect to their profile page.
o Users can register an account.
o Display error messages if registration fails.
- Login Page:
o If a user is logged in, the page should redirect to their profile page.
o Users can log in with existing credentials.
o Display error messages if login fails.
- Homepage:
o Redirect to the login page if the user is not logged in.
o Display the user's projects and tasks.
o Allow users to navigate to project and task details.
- Project Page:
o Display project details, team members, and tasks.
o Allow users to create, update, and delete tasks within the project.
o Display error messages if operations fail.
- Task Page:
o Display task details, including nested tasks.
o Allow users to update task status, priority, and assignee.
o Display error messages if operations fail.
 - User Profile Page:
o Display user's profile information, projects, and tasks.
o Allow users to update their profile.
o Display error messages if operations fail.
- Admin Panel:
o Only accessible by users with admin roles.
o Allow admins to manage users, teams, and roles.
o Display error messages if operations fail.

Additional Features:
- Implement real-time updates for project and task changes using WebSockets.
- Implement notifications for task assignments and deadlines.
- Implement a dashboard with analytics on project and task progress.

ER Diagram:
- Users table: id, full_name, email, username, password, created_at, updated_at
- Teams table: id, name, description, created_at, updated_at
- Projects table: id, name, description, deadline, team_id, created_at, updated_at
- Tasks table: id, title, description, assigned_to, status, priority, due_date, project_id,
parent_task_id, created_at, updated_at
- Roles table: id, name, created_at, updated_at
- UserRoles table: id, user_id, role_id, assigned_at, revoked_at

Instruction for Competitors:

- Database (db-dump.sql) and ER diagram (db-diagram.pdf) should be exported and saved under
the root folder <host>/XX_SERVER_MODULE.
- REST API should be reachable at <host>/XX_SERVER_MODULE/BACKEND where xx is the PC
number. No port and no /public suffix path.
- Frontend app should be reachable at <host>/XX_SERVER_MODULE/FRONTEND where xx is the
PC number. No port allowed.
- Zip XX_SERVER_MODULE and submit to the submission page. Ensure to exclude vendor and
node_modules folders when zipping files.