LKS PROVINSI WEB TECHNOLOGIES 2024

SERVER SIDE MODULE

CONTENTS
This module has the following files:
1. MODULE_SERVER_SIDE.docx
2. MODULE_SERVER_SIDE.pdf
3. MODULE_SERVER_SIDE_MEDIA.zip

INTRODUCTION
In this module, you are asked to create a social media website called “Facegram” where in the
website a user can see other user's posts by following the user. Users can also register as a private
account so other users who are not following could not see posts. The detailed description and tools
that you can use will be described below.

DESCRIPTION OF PROJECT AND TASKS

This module is divided into 2 phases. In the first phase, you will create a REST Api then in the
second phase you will create a 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 as default sets Content-type: application/json, but some
endpoints have specified Content-type header so you have to adjust it.
1. Authentication
You can use sanctum for the token management and it must be valid when placed in the
Authorization request header as a Bearer token.
a. Register

Endpoint /api/v1/auth/register

Method POST

Description For user to register account

Request Body:
full_name (required)
bio (required, max 100 chars)
username (required, min 3 chars, unique, only alphanumeric, dot “.” or underscore “_”
allowed)
LKS PROVINSI WEB TECHNOLOGIES 2024

password (required, min 6 chars)

is_private (boolean)

Response HTTP Status Code: 201

Success Body:
{
"message": "Register success",
"token": "7|xuPEGo7jtV8IhoE2Mp3am1rwtIpYUTewXBTcH78Af922f116",
"user": {
"full_name": "Budi Budiman",
"bio": "stop dreaming, start doing",
"username": "budi.budiman",
"is_private": true,
"id": 101
}
}

Response HTTP Status Code: 422

Invalid Field Body:
{
"message": "Invalid field",
"errors": {
"full_name": [
"The full name field is required."
],
"username": [
"The username has already been taken."
],
"password": [
"The password field must be at least 6 characters."
],
"bio": [
"The bio field is required."
]
}
}

b. Login

Endpoint /api/v1/auth/login

Method POST

Description For user to log into system

Request Body:
username
password

Response HTTP Status Code: 200

Success Body:
{
"message": "Login success",
"token": "2|Qnt2aqHIi0EVwCz3rSH0yiFIKMqey38SdkUZntRvf0e507ff",
"user": {
"id": 1,
"full_name": "John Doe",
"username": "john.doe",
"bio": "The best way to predict the future is to create it.",
"is_private": 0,
"created_at": "2023-10-14T15:04:33.000000Z"
}
}
LKS PROVINSI WEB TECHNOLOGIES 2024

Response HTTP Status Code: 401

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

c. Logout

Endpoint /api/v1/auth/logout

Method POST

Description For user to logout

Request Headers:
Authorization: Bearer <token>

Body:
username
password

Response HTTP Status Code: 200

Success Body:
{
"message": "Logout success"
}

Response HTTP Status Code: 401

Invalid Body:
{
Token "message": "Unauthenticated."
}

2. Post
a. Create new post

Endpoint /api/v1/posts

Method POST

Description For user to create a post

Request Headers:
Authorization: Bearer <token>
Content-type: multipart/form-data

Body:
caption (required)
attachments (required, array of image files jpg, jpeg, webp, png or gif)

Response HTTP Status Code: 201

Success Body:
{
"message": "Create post success"
}

Response Body:
{
Invalid Field "message": "Invalid field",
LKS PROVINSI WEB TECHNOLOGIES 2024

"errors": {
"caption": [
"The caption field is required."
],
"attachments.0": [
"The attachments.0 field must be a file of type: png, jpg,
jpeg, webp."
]
}
}

Response HTTP Status Code: 401

Invalid Body:
{
Token "message": "Unauthenticated."
}

b. Delete post

Endpoint /api/v1/posts/:id

Method DELETE

Description For user to delete a post

Request Headers:
Authorization: Bearer <token>

Response HTTP Status Code: 204

Success

Response HTTP Status Code: 404

Post Not Body:
{
Found "message": "Post not found"
}

Response HTTP Status Code: 403

Try to delete Body:
{
another "message": "Forbidden access"
user’s post }

Response HTTP Status Code: 401

Invalid Body:
{
Token "message": "Unauthenticated."
}
LKS PROVINSI WEB TECHNOLOGIES 2024

c. Get posts

Endpoint /api/v1/posts

Method GET

Description For user to get all posts

Request Headers:
Authorization: Bearer <token>

Params:
page (integer, minimum 0 and default 0)
size (integer, minimum 1 and default 10)

Response HTTP Status Code: 200

Success Body:
{
"page": 0,
"size": 10,
"posts": [
{
"id": 366,
"caption": "Letting my soul wander",
"created_at": "2023-07-26 00:34:10",
"deleted_at": null,
"user": {
"id": 61,
"full_name": "Irving Greenfelder",
"username": "talia94",
"bio": "Success is not final, failure is not fatal: It is
the courage to continue that counts.",
"is_private": 0,
"created_at": "2023-10-18 19:16:53"
},
"attachments": [
{
"id": 750,
"storage_path": "posts/652fc6284eb76.jpg"
}
]
},
….
]
}

Response HTTP Status Code: 422

Invalid Body:
{
Params "message": "Invalid field",
"errors": {
"page": [
"The page field must be at least 0."
],
"size": [
"The size field must be a number."
]
}
}

Response HTTP Status Code: 403

Try to delete Body:
{
another "message": "Forbidden access"
user’s post }
LKS PROVINSI WEB TECHNOLOGIES 2024

Response HTTP Status Code: 401

Invalid Body:
{
Token "message": "Unauthenticated."
}

3. Following
a. Follow a user

Endpoint /api/v1/users/:username/follow

Method POST

Description For user to follow another user

Request Headers:
Authorization: Bearer <token>

Response HTTP Status Code: 200

Success Body:
{
"message": "Follow success",
"status": "following" | "requested"
}

Response HTTP Status Code: 404

User not Body:
{
found "message": "User not found"
}

Response HTTP Status Code: 422

Try to follow Body:
{
own user "message": "You are not allowed to follow yourself"
account }

Response HTTP Status Code: 422

Already Body:
{
Followed "message": "You are already followed",
"status": "following" | "requested"
}

Response HTTP Status Code: 401

Invalid Body:
{
Token "message": "Unauthenticated."
}
LKS PROVINSI WEB TECHNOLOGIES 2024

b. Unfollow a user

Endpoint /api/v1/users/:username/unfollow

Method DELETE

Description For user to unfollow a followed user

Request Headers:
Authorization: Bearer <token>

Response
HTTP Status Code: 204
Success

Response HTTP Status Code: 404

User not Body:
{
found "message": "User not found"
}

Response HTTP Status Code: 422

Not Body:
{
Following "message": "You are not following the user"
the User }

Response HTTP Status Code: 401

Invalid Body:
{
Token "message": "Unauthenticated."
}
LKS PROVINSI WEB TECHNOLOGIES 2024

c. Get following users

Endpoint /api/v1/following

Method GET

Description For users to get their following users

Request Headers:
Authorization: Bearer <token>

Response HTTP Status Code: 200

Success Body:
{
"following": [
{
"id": 91,
"full_name": "Miss Ayana Russel",
"username": "chartmann",
"bio": "In a world where you can be anything, be kind.",
"is_private": 0,
"created_at": "2023-10-18 19:16:55",
"is_requested": true | false
},
….
]
}

Response HTTP Status Code: 404

User not Body:
{
found "message": "User not found"
}

Response HTTP Status Code: 401

Invalid Body:
{
Token "message": "Unauthenticated."
}
LKS PROVINSI WEB TECHNOLOGIES 2024

4. Followers
a. Accept follow request

Endpoint /api/v1/users/:username/accept

Method PUT

Description For users to get their following users

Request Headers:
Authorization: Bearer <token>

Response HTTP Status Code: 200

Success Body:
{
"message": "Follow request accepted"
}

Response HTTP Status Code: 404

User not Body:
{
found "message": "User not found"
}

Response HTTP Status Code: 422

Already Body:
{
Accepted "message": "Follow request is already accepted"
}

Response HTTP Status Code: 422

User Not Body:
{
Following "message": "The user is not following you"
}

Response HTTP Status Code: 401

Invalid Body:
{
Token "message": "Unauthenticated."
}
LKS PROVINSI WEB TECHNOLOGIES 2024

b. Get follower users

Endpoint /api/v1/users/:username/followers

Method GET

Description For users to get their following users

Request Headers:
Authorization: Bearer <token>

Response HTTP Status Code: 200

Success Body:
{
"followers": [
{
"id": 91,
"full_name": "Miss Ayana Russel",
"username": "chartmann",
"bio": "In a world where you can be anything, be kind.",
"is_private": 0,
"created_at": "2023-10-18 19:16:55",
"is_requested": true | false
},
….
]
}

Response HTTP Status Code: 404

User not Body:
{
found "message": "User not found"
}

Response HTTP Status Code: 401

Invalid Body:
{
Token "message": "Unauthenticated."
}
LKS PROVINSI WEB TECHNOLOGIES 2024

5. User
a. Get users

Endpoint /api/v1/users

Method GET

Description Get all users that are not followed by logged in users. Logged in users should
be hidden in the list.

Request Headers:
Authorization: Bearer <token>

Response HTTP Status Code: 200

Success Body:
{
"users": [
{
"id": 1,
"full_name": "John Doe",
"username": "john.doe",
"bio": "The best way to predict the future is to create it.",
"is_private": 0,
"created_at": "2023-10-14T15:04:33.000000Z",
"updated_at": "2023-10-14T15:04:33.000000Z"
},
….
]
}

Response HTTP Status Code: 401

Invalid Body:
{
Token "message": "Unauthenticated."
}
LKS PROVINSI WEB TECHNOLOGIES 2024

b. Get detail user

Endpoint /api/v1/users/:username

Method GET

Description For users to get detailed user data. Field posts should be hidden if the user is a
private user and the follow status is not following or is requested.

Request Headers:
Authorization: Bearer <token>

Response HTTP Status Code: 200

Success Body:
{
"id": 2,
"full_name": "Richard Roe",
"username": "richard.roe",
"bio": "Leave a little sparkle wherever you go.",
"is_private": 1,
"created_at": "2023-10-18 19:16:50",
"is_your_account": false,
"following_status": "not-following" | "requested" | “following”,
"posts_count": 6,
"followers_count": 20,
"following_count": 18,
"posts": [
{
"id": 7,
"caption": "Blissfully lost in the beauty of the moment.",
"created_at": "2014-08-26 10:42:31",
"deleted_at": null,
"attachments": [
{
"id": 13,
"storage_path": "posts/shutterstock_1464930743-scaled.webp"
},
….
]
},
….
]
}

Response HTTP Status Code: 401

Invalid Body:
{
Token "message": "Unauthenticated."
}

Response HTTP Status Code: 404

User not Body:
{
found "message": "User not found"
}

Response HTTP Status Code: 401

Invalid Body:
{
Token "message": "Unauthenticated."
}
LKS PROVINSI WEB TECHNOLOGIES 2024

Phase 2 - Frontend Development

Template HTML is provided. You are required to use the template and you are recommended to
modify the template design without affecting the functionality of the frontend.

Page Description Tasks

LKS PROVINSI WEB TECHNOLOGIES 2024

General - Document title should be reflected to the current page

- Display username and logout button on the navbar after login
success
- Clicking username will go to logged in user profile page
- User can log out after clicking logout button on the navbar

Register - If user logged in, the page will be redirected to own user profile page
- User can register account
- If register fails, display all of errors message
- If logged in user try to access this page, the page should be
redirected to own user profile page

Login - If user logged in, the page will be redirected to own user profile page
- User can login with existing credentials
- If login fails, display all of errors message
- If logged in user try to access this page, the page should be redirected
to own user profile page

Homepage - If user not logged in, the page will be redirected to login page

News Feed section

- Display following user’s posts and own posts sorted by newest post
on the newsfeed section
- When page loads, display only first 10 newest posts
- If the vertical scroll is stuck at the bottom, load the next 7 posts

Explore people section

- Display all users that are not followed by the logged in user
- Clicking on username will go to that user profile page

Follow requests section (for private account)

- Display follow request users
- The logged in user can accept/approve a follow request
- If the logged in user is not a private account or there is no any follow
request, hide this section

User profile Page requirements:

- If user not logged in, the page will be redirected to login page

User information:
- See profile (full_name, username, bio)
- See posts list and count
- See followers list and count
- See following list and count
Follow/unfollow:
- User can follow another user
- User can unfollow a followed user

Posts section:
- Display user’s posts where the visited user is not a private account or
following account
- Users can delete their posts
- Display “The account is private” if logged in user is not following the
visited private user profile page
LKS PROVINSI WEB TECHNOLOGIES 2024

Create new - If user not logged in, the page will be redirected to login page
post - User can create new post with following fields:
- caption (text, required)
- attachments (file, can attach multiple files)
- If create new post fails, display all of errors message

ER DIAGRAM

ADDITIONAL EXPLANATION

MEDIA FILES
- Frameworks (laravel, react and vue)
LKS PROVINSI WEB TECHNOLOGIES 2024

- SQL File (structure and records. allowed to modify)

- Postman collection
- Template HTML (based on bootstrap v5.3)

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 reached on <host>/XX_SERVER_MODULE/BACKEND where xx is PC
number.
No port and no /public suffix path.
- Frontend app should be reached on <host>/XX_SERVER_MODULE/FRONTEND where xx is
PC number.
No port allowed.
- Zip XX_SERVER_MODULE and submit to the submission page. Make sure to exclude vendor
and node_modules folder when zipping files.