KISI-KISI LKS JAKARTA PUSAT II 2025

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 users can register an account and create a 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)
password (required, min 6 chars)

@webtechindonesia
KISI-KISI LKS JAKARTA PUSAT II 2025

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"
}
}

Response HTTP Status Code: 401

@webtechindonesia
KISI-KISI LKS JAKARTA PUSAT II 2025

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",
"errors": {

@webtechindonesia
KISI-KISI LKS JAKARTA PUSAT II 2025

"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."
}

@webtechindonesia
KISI-KISI LKS JAKARTA PUSAT II 2025

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 }

@webtechindonesia
KISI-KISI LKS JAKARTA PUSAT II 2025

Response HTTP Status Code: 401

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

3. User
a. Get users

Endpoint /api/v1/users

Method GET

Description Get all 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."
}

@webtechindonesia
KISI-KISI LKS JAKARTA PUSAT II 2025

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.

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,
"posts_count": 6,
"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."
}

@webtechindonesia
KISI-KISI LKS JAKARTA PUSAT II 2025

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

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 random 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
- Clicking on username will go to that user profile page

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

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

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

@webtechindonesia
KISI-KISI LKS JAKARTA PUSAT II 2025

ER DIAGRAM

MEDIA FILES
- Frameworks (laravel, react and vue)
- 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.

@webtechindonesia