LAPORAN AKHIR

MAGANG & STUDI INDEPENDEN BERSERTIFIKAT

2023 Complete Front-End Engineer Career
with ReactJS
Di PT Marka Kreasi Persada (Alterra Academy)

Diajukan untuk memenuhi persyaratan kelulusan

Program MSIB MBKM

oleh :
Elda Vina Fadhilatur Rizkiyah / 20104410043

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INFORMASI
UNIVERSITAS ISLAM BALITAR
BLITAR
2023
 Lembar Pengesahan Program Studi Teknik Informatika

2023 Complete Front-End Career With ReactJS

Di PT Marka Kreasi Persada (Alterra Academy)

oleh :
Elda Vina Fadhilatur Rizkiyah / 20104410043

disetujui dan disahkan sebagai

Laporan Magang atau Studi Independen Bersertifikat Kampus Merdeka

Blitar, 07 Juli 2023

Pembimbing Magang atau Studi Independen Universitas Islam Balitar

Saiful Budiman, S.Kom, M.Kom

NIDN. 0710028805

ii
 Lembar Pengesahan
2023 Complete Front-End Career With ReactJS
Di PT Marka Kreasi Persada (Alterra Academy)

oleh :

Elda Vina Fadhilatur Rizkiyah / 20104410043

disetujui dan disahkan sebagai

Laporan Magang atau Studi Independen Bersertifikat Kampus Merdeka

Malang, 11 Juli 2023

PIC Kampus Merdeka PT. Marka Kreasi Persada - Alterra Academy

Mega Octavia Putri

NIP : 1811080318

iii
 Abstraksi

Kampus Merdeka merupakan bagian dari kebijakan Merdeka Belajar oleh

Kemendikbudristek yang memberikan kesempatan seluruh mahasiswa di Indonesia
untuk mengasah kemampuan sesuai minat dan bakat mahasiswa dengan terjun
secara langsung ke dunia kerja sebagai langkah persiapan karier dimasa
mendatang. Ada lebih dari 5 kegiatan yang tersedia di program Kampus Merdeka,
salah satunya yaitu Magang dan Studi Independen Bersertifikat (MSIB). MSIB
sendiri dibagi menjadi 2 yaitu Magang Merdeka dan Studi Independen. Studi
Independen merupakan kegiatan riset kolaboratif bersama perusahaan yang
bertujuan untuk memberikan kesempatan mahasiswa untuk belajar dan
mengembangkan diri melalui aktivias diluar perkuliahan, namun tetap diakui
sebagai nilai perkuliahan. Salah satu perusahaan atau mitra yang berkolaborasi
dengan Studi Independen adalah PT Marka Kreasi Persada (Alterra Academy)
dengan program belajar 2023 Complete Front-End Engineer Career With ReactJS.
Dalam program ini, selain diberikan materi pembelajaran seputar pemrograman
dasar dan ReactJS, peserta juga diberikan proyek individu (Mini Project) dan
proyek kelompok (Capstone Project). Pada Capstone Project, peserta yang tersebar
di 5 program belajar oleh Alterra Academy, membentuk kelompok dan
mengerjakan proyek membuat sebuah website dan membuat aplikasi mobile
sederhana berupa Android/IOS dan mampu berkerja sebagai tim developer dengan
jobdesk masing-masing sesuai program belajar yang diikutinya yaitu, UI/UX, Back-
end, Front-End, Mobile, dan Quality Engineer.

Kata kunci : Kampus Merdeka, MSIB, Alterra Academy, Front-End, ReactJS

iv
 Kata Pengantar

Puji syukur atas kehadirat Tuhan Yang Maha Esa karena atas limpahan
rahmat dan karunia-Nya penulis dapat menyelesaikan laporan akhir program
Kampus Merdeka yaitu, Studi Independen Batch 4 tahun 2023.

Pada proses penyusunan ini tidak terlepas dari bantuan berbagai pihak,
penulis menyampaikan rasa hormat dan terima kasih kepada :

1. Bapak Saiful Nur Budiman, S.Kom, M.Kom selaku Ketua Program

Studi Teknik Informatika Universitas Islam Balitar yang telah
memberikan izin untuk mengikuti kegiatan Studi Independen
Bersertifikat di PT. Marka Kreasi Persada (Alterra Academy)
2. Bapak Minto Santoso M.Pd selaku PIC Universitas Islam Balitar
3. Kak M. Daniel Rafiqi selaku mentor kelas C program belajar 2023
Complete Front-End Engineer Career With ReactJS
4. Seluruh pengurus dan mentor PT. Marka Kreasi Persada (Alterra
Academy) lainnya yang telah membimbing dalam menyelesaikan
kegiatan Studi Independen Bersertifikat
5. Teman-teman batch 4 kegiatan Studi Independen Bersertifikat di PT
Marka Kreasi Persada (Alterra Academy) khususnya kelompok 15 yang
telah bekerja sama dengan baik dalam menyelesaikan proyek akhir yaitu
Capstone Project.
Selain itu penulis juga mengucapkan terima kasih sebesar-besarnya kepada
semua pihak yang penulis tidak dapat sebutkan satu per satu, terima kasih atas
bantuan, nasehat, dan dorongan dalam penyusunan laporan ini. Penulis menyadari
bahwa masih banyak kekurangan dalam penyusunan laporan ini. Oleh karena itu,
penulis mengharapkan kritik dan saran yang membangun dari semua pembaca demi
kesempurnaan laporan ini. Semoga laporan ini bermanfaat bagi para pembaca.
Demikian laporan ini penulis susun, apabila ada kata-kata yang kurang
berkenan dan terdapat banyak kekurangan, penulis memohon maaf yang sebesar-
besarnya.
Blitar, 10 Juli 2023

Elda Vina Fadhilatur Rizkiyah

NIM. 20104410043

v
 Daftar Isi

Cover ........................................................................................................................ i
Lembar Pengesahan Program Studi Teknik Informatika ........................................ ii
Lembar Pengesahan ............................................................................................... iii
Abstraksi ................................................................................................................ iv
Kata Pengantar ........................................................................................................ v
Daftar Isi................................................................................................................. vi
Daftar Gambar...................................................................................................... viii
Bab I Pendahuluan ........................................................................................... I-1
I.1 Latar belakang ........................................................................................ I-1
I.2 Lingkup Proyek ...................................................................................... I-1
I.3 Tujuan ..................................................................................................... I-2
Bab II Orgnisasi atau Lingkungan Organisasi Mitra MSIB ............................ II-1
II.1 Struktur Organisasi ............................................................................... II-1
II.2 Lingkup Pekerjaan ................................................................................ II-1
II.3 Deskripsi Pekerjaan .............................................................................. II-2
II.4 Jadwal Kerja ......................................................................................... II-2
Bab III Proyek Aplikasi Forum Discussion “Squad Space”............................ III-1
III.1 Deskripsi Squad Space ........................................................................ III-1
III.2 Profil Tim Divisi Front-End................................................................ III-1
III.3 Proses Pelaksanaan Proyek.................................................................. III-2
III.4 Pencapaian Hasil Proyek ..................................................................... III-3
III.4.1 Alat dan Library yang Digunakan................................................ III-3
III.4.2 Key Activities................................................................................ III-4
III.4.3 Product Success ........................................................................... III-4
III.4.4 Tugas Penulis ............................................................................... III-8
Bab IV Penutup ................................................................................................ IV-1
IV.1 Kesimpulan .......................................................................................... IV-1
IV.2 Saran .................................................................................................... IV-1
Lampiran A. TOR ............................................................................................... A-1

vi
Lampiran B. Log Activity .................................................................................... B-1
Lampiran C. Bukti Hasil Mini Project ................................................................ C-1
Lampiran D. Bukti Hasil Capstone Project ........................................................ D-1

vii
 Daftar Gambar

Gambar II.1 Struktur Organisasi Alterra Academy ............................................ II-1

Gambar III.1 Profil Tim Divisi Fornt-End Kelompok 15 .................................. III-1
Gambar III.2 Key Activities Divisi Front-End Kelompok 15............................ III-4
Gambar III.3 Tampilan Halaman Landing ......................................................... III-4
Gambar III.4 Tampilan Halaman Login............................................................. III-5
Gambar III.5 Tampilan Halaman Home ........................................................... III-5
Gambar III.6 Tampilan Halaman Manage User ................................................. III-6
Gambar III.7 Tampilan Halaman Manage Thread ............................................. III-6
Gambar III.8 Tampilan Halaman Thread Report ............................................... III-7
Gambar III.9 Tampilan Halaman Ubah Profil ................................................... III-7

viii
 Bab I Pendahuluan

I.1 Latar belakang

Kampus Merdeka adalah bagian dari kebijakan Merdeka Belajar oleh
Kemendikbudristek yang memberikan kesempatan kepada mahasiswa di Indonesia
untuk mengasah kemampuan sesuai minat dan bakat mereka dengan terjun
langsung ke dunia kerja sebagai persiapan karier di masa mendatang. Program
Kampus Merdeka memiliki lebih dari 5 kegiatan, salah satunya adalah Magang dan
Studi Independen Bersertifikat (MSIB).
MSIB terbagi menjadi dua, yaitu Magang Merdeka dan Studi Independen.
Studi Independen adalah kegiatan riset kolaboratif bersama perusahaan ternama, di
mana mahasiswa dapat belajar dan mengembangkan diri melalui aktivitas di luar
kelas perkuliahan, namun tetap diakui sebagai bagian dalam perkuliahan. Salah satu
perusahaan mitra yang berkolaborasi dengan Studi Independen adalah PT Marka
Kreasi Persada (Alterra Academy) dengan program studi 2023 Complete Front-End
Engineer Career with React JS.
Adapun materi yang di berikan diantaranya, Introduction Front-End,
Version Control and Branch Management(Git), Figma Introduction Interface
Dimension, HTML, CSS, Bootstrap, Javascript Refreshment, Introduction Data
Structures (Javascript), Clean Code, Introduction React, React Fundamental, Event
Handling, React Hook, React Routing, React Form, Global State Management and
Data Fetching, React Testing, Introduction Restfull API, Authentication in React,
Introduction GraphQL and Apollo Client Setup, GraphQL Query and Mutation,
GraphQL Subscription, dan Deployment. Selain materi untuk mempersiapkan diri
menjadi Front-End Developer, Alterra Academy juga memberikan materi untuk
mempersiapkan diri dalam dunia kerja diantaranya, Communicaion Skill,
Teamworks and Collaboration, dan Time and Task Management.
Materi yang diberikan nantinya diaplikasikan untuk mengerjakan proyek
individu (Mini Project) dan juga proyek kelompok (Capstone Project) yang
dilaksanakan di penghujung waktu pelaksanaan program.

I.2 Lingkup Proyek

Lingkup proyek yang menjadi objek Studi Independen pada PT Mitra
Kreasi Persada (Alterra Academy) yaitu :

1. Tugas Harian
2. Mini Project (Website “Astana-Ku”)
3. Capstone Project (Forum Discussion “Squad Space”)

I-1
I.3 Tujuan
Tujuan dari kegiatan Studi Independen Bersertifikat pada program studi
2023 Complete Front-End Engineer Career with ReactJS oleh Alterra Academy
yaitu :

1. Dapat mengimplementasikan framework ReactJS dalam mengembangkan

sebuah front-end website.
2. Dapat mengerjakan sebuah proyek sebagai divisi front-end developer yang
berkolaborasi dengan developer lain dari berbagai divisi yang lainnya.
3. Dapat mempersiapkan diri dalam dunia kerja dengan kemampuan
komunikasi, bekerja sama dengan tim, dan manajemen waktu.

I-2
 Bab II Orgnisasi atau Lingkungan Organisasi Mitra MSIB

II.1 Struktur Organisasi

Gambar II.1 Struktur Organisasi Alterra Academy

Gambar II.1 merupakan struktur organisasi Alterra Academy. Jabatan paling

tinggi di Alterra Academy dipegang oleh Kepala, kemudian dibawahnya ada divisi
Finance, divisi Academic, divisi Immersive Program, divisi Business to
Government & CSR, divisi Digital Marketing, dan divisi People Operations.

II.2 Lingkup Pekerjaan

Program Studi Independen Bersertifikat oleh Alterra Academy memiliki 5
paket program studi, diantaranya Becoming Professional UI/UX Designer, Be a
Top Search Quality Engineer, 2023 Complete Front-End Engineer Career with
ReactJS, 100% Mastering Golang Programming, dan 2023 Complete Front-End
Engineer Career with Flutter. Pada kesempatan ini, penulis mengikuti paket
program studi 2023 Complete Front-End Engineer Career with ReactJS.
Metode pembelajaran yang dimiliki diantaranya, mentor yang
berpengalaman, metode belajar (live session, video recording, dan reference),
waktu belajar (senin-jumat kelas daring 3x seminggu dengan mentor), Sertifikat
Kelulusan Program dan Raport beserta umpan balik untuk peserta, dan kelas
tambahan kelas daring 1x seminggu (Pendalaman materi).
Adapun untuk jenis kelas yang tersedia antara lain :

a. Technical Skill Class (Software Development)

Peserta program mengikuti kelas intensif yang akan berfokus pada penguasaan
keterampilan seputar fundamental software engineering dan cara
mengaplikasikannya pada sisi back-end dan front-end. Kelas ini menggunakan
metode belajar live session dan video recording.

b. Professional Skill Class (Non-Technical)

Kelas ini bertujuan untuk memberi pandangan dalam berkarir di dunia
teknologi serta, cara kita untuk memulai dan melewati prosesnya serta skill

II-1
 non-technical yang dibutuhkan oleh para profesional. Kelas ini menggunakan
metode belajar live session.

c. Capstone Project
Produk teknologi yang akan dibuat berdasarkan real case dari produk apa yang
sedang menjadi kebutuhan di industri atau produk teknologi yang sedang
di bangun oleh Alterra Group. Fase ini akan mendapatkan pengalaman
layaknya development team di dunia kerja. Kelas ini menggunakan metode
belajar live session.

II.3 Deskripsi Pekerjaan

Deskripsi pekerjaan yang wajib dilakukan oleh setiap peserta program studi
2023 Complete Front-End Engineer Career with ReactJS dalam Program Studi
Independen Bersertifikat oleh Alterra Academy adalah
a. Tugas Harian
Tugas harian yang harus dikerjakan tiap bab adalah technical task (coding)
yaitu soal prioritas dan eksplorasi yang terdapat pada Notion yang nantinya
diunggah pada repository Github, kuis yang terdapat pada laman alta.id, dan
rangkuman yang diunggah pada repository Github.

b. Mini Project
Mini project merupakan tugas akhir yang dikerjakan secara individu. Pada mini
project kali ini, penulis membuat website pemakaman dengan nama AstanaKu.

c. Capstone Project
Capstone Project merupakan proyek akhir yang dikerjakan secara kelompok.
Kelompok tersebut terdiri dari 5 divisi yaitu UI/UX, Back-End, Front-End
ReactJS, Mobile Flutter, dan Quality Engineer. Pada capstone project ini,
penulis tergabung dalam kelompok 15 dan berhasil membuat aplikasi forum
diskusi yang bernama Squad Space.

II.4 Jadwal Kerja

Pelaksanaan Program Studi Independen Bersertifikat oleh Alterra Academy
pada program studi 2023 Complete Front-End Engineer Career with ReactJS,
berlangsung selama 20 minggu, mulai tanggal 16 Februari 2023 sampai dengan 30
Juni 2023. Berikut merupakan jadwal kegiatan selama mengikuti MSIB.

II-2
a. Minggu ke - 1 (16-17 Februari 2023)
Pada pertemuan pertama, seperti biasanya perkenalan dengan mentor dan
teman teman sekelas. sekelas ada 24 orang dari universitas yang berbeda-beda.
Dengan mentor, penulis mempelajari pengenalan HTML, CSS, javascript, IP,
domain, git, Github, hosting, https, version control, perbedaan front-end dan
back-end, cara membuat Github, git push, fetch, pull, add, merge, diff, stash,
branch, remote, fork. Selain itu, juga dijelaskan secara singkat tentang figma
beserta keuntungan dan kelemahan aplikasi figma.

b. Minggu ke - 2 (20-24 Februari 2023)

Minggu ini mempelajari tentang HTML, pengertian HTML, pembuatan form,
list (ordered list & unordered list), tag, element, attribute, div, section, form,
memasukkan gambar, header, footer. Selain itu juga mempelajari tentang CSS,
padding dan margin, background color, background image, transition, font
family, display, selector, CSS external, CSS internal, CSS inline, font color,
table, pseudo-element, pseudo-class, dan juga mempelajari tentang Bootsrap,
kemudian bagaimana cara me-recreate website yang sudah ada dengan
menggunakan coding bootstrap. membuat navbar, banner, footer atas dan
footer bawah.

c. Minggu ke - 3 (27 Februari – 03 Maret 2023)

Minggu ini mempelajari tentang javascript, data structure dan clean codes.

d. Minggu ke - 4 (06 – 10 Maret 2023)

Minggu ini mempelajari tentang apa itu react, component, prop, lifecycle
(mounting, update, unmounting), state, handling event, perpedaan props dan
state, pengertian jsx, cara styling pada rect, membuat komponen, handling
event, onChange, useState, membuat inputan yang nantinya akan ditampilkan
pada table, menghapus value yang telah ditampilkan pada tabel, dan
mempelajari apa itu atomic design (atoms, molecules, organism, templates, dan
pages)

e. Minggu ke - 5 (13-17 Maret 2023)

Minggu ini mempelajari tentang event handling, apa itu event handling,
bagaimana cara membuat state dan props, apa perbedaan state dan props,
bagaimana cara membuat button, cara show dan delete data yang pernah dibuat,
mempelajari tentang bagaimana kemampuan komunikasi yang efektif, apa saja
5 elemen komunikasi Lasswell, apa itu komunikasi sinkronus dan asinkronus
beserta kelebihan, kelemahan, dan cara mengatasi kekurangan tersebut,
mempelajari tentang react hook dan react routing.

II-3
f. Minggu ke - 6 (20-24 Maret 2023)
Minggu ini mempelajari tentang apa itu basic form, apa itu controlled
component, apa itu uncontrolled component, apa perbedaan controlled
component dan uncontrolled component, apa itu global state data management,
apa itu redux, kapan menggunakan redux, apa saja komponen redux,
bagaimana alur redux, apa itu view, apa itu action, apa itu reducer, apa itu store,
dan bagaimana siklusnya, bagaimana cara menginstal redux, dll.

g. Minggu ke - 7 (27-31 Maret 2023)

Minggu ini, hari senin 27 maret 2023 sampai dengan hari jumat 31 maret 2023,
mempelajari tentang apa itu redux, apa saja komposisi redux, mempelajari
redux thunk, redux persist, mengapa membutuhkan redux persist, bagaimana
cara meng-install dan menggunakan redux persist, cara penggunaan dan
coding redux reducer, redux store, slice, extra reducer, action, dan bagaimana
cara meng-dispatch, apa itu react test, apa itu Vitest, bagaimana cara meng-
install Vitest, bagaimana cara membuat file .test.jsx, bagaimana cara snapshot,
bagaimana cara memberikan validasi pada input-an file, perkenalan rest API

h. Minggu ke - 8 (03-07 April 2023)

Minggu ini mempelajari tentang apa itu rest API, apa saja HTTP method dasar,
mengapa memakai rest api, bagaimana alurnya, teori CRUD (create, read,
update, delete), bagaimana cara coding method get (ambil data), post (membuat
data data), put (memperbarui data), dan delete (menghapus data),
authentication HTTP response status codes, mengapa dibutuhkan
authentication, bagaimana cara membuat token, bagaimana cara menggunakan
private/protected root, untuk apa private root, apa itu GraphQL, bagaimana
cara membuat akun, melakukan query, melakukan mutation pada Hasura, dan
memasang apollo client.

i. Minggu ke - 9 (10-14 April 2023)

Minggu ini, 10 - 14 April 2023, penulis mempelajari tentang apa itu query, apa
itu mutation, apa itu subscription, apa itu client state dan server state, dan
bagaimana cara coding-nya, apa itu deployment, bagaimana cara membuat
akun pada surge.sh, bagaimana cara menautkan proyek ke surge.sh, apa itu
ESLint, bagaimana cara meng-install, ESLint itu untuk apa, dan bagaimana
cara bekerjanya. Selain itu juga membahas tentang Hasura action.

j. Minggu 10 (17-21 April 2023)

Minggu ini hari senin 17 April 2023, hingga jumat 21 April 2023, pertemuan
live session pada hari senin sampai rabu hanya membhaas dan

II-4
 mempresentasikan tentang MVP. dan hari kamis sampai jumat tidak ada live
session karena sedang ada libur lebaran, namun waktu libur digunakan untuk
mencicil mengerjakan tugas proyek individu.

k. Minggu ke - 11 (24-28 April 2023)

Hari kamis 20 april sampai dengan hari jumat 28 April, Libur nasional hari raya
idul fitri. sehingga belajar secara mandiri

l. Minggu ke - 12 (01-05 Mei 2023)

Pada minggu ini, 01-05 Mei 2023, terdapat 2 kali kesempatan untuk live
session, yaitu pada hari rabu, 3 mei 2023 dan hari jumat, 5 mei 2023. Live
session ini membahas mengenai perkembangan pembuatan aplikasi pada tugas
mini project. ada tanya jawab juga mengenai apa saja kendala yang dialami
dalam pembuatan aplikasi tersebut. selebihnya, di hari lain, belajar mandiri
dengan mengerjakan tugas mini project yang pada minggu kedua di bulan mei
nanti dipresentasikan.

m. Minggu ke - 13 (08-12 Mei 2023)

Minggu ke-13, senin tgl 08 - 12 mei 2023. minggu ini merupakan minggu yang
digunakan untuk mempresentasikan tugas mini project. Satu hari ada 5 peserta
yang mempresentasikan tugasnya. Kebetulan, penulis mendapatkan giliran
pada hari selasa, tanggal 09 mei 2023. Tentu saja penulis pada hari senin tangal
08 hingga hari selasa tanggal 09 mei 2023 mengerjakan aplikasi penulis agar
bisa selesai sebelum kelas berlangsung. Adapun tugas yang perlu dikumpulkan
adalah figma, github, mvp.doc, dan file ppt.

n. Minggu ke - 14 (15-19 Mei 2023)

Pada minggu ke 14 ini, hari senin tanggal 15 sampai dengan hari jumat tanggal
19 mei 2023, terdapat 2x zoom live session untuk professional skill, dan 2x
zoom live session untuk mentoring capstone project. Pada live session untuk
mentoring capstone project, dimana pada sesi zoom tersebut, ada breakout
room per kelompok. dan pada hari rabu tanggal 17 mei 2023, kelompok penulis
diberikan kesempatan untuk mendapatkan sesi breakout room per tim dan
perdivisi dengan mentor. Adapun untuk zoom live session professional skill,
pada hari selasa tanggal 16 mei 2023, membahas tentang teamworks &
collaboration, sedangkan pada hari jumat, 19 Mei 2023, membahas tentang
time and task management. pada zoom ini, tiap tim di breakout room dan
mendapatkan tugas untuk membuat user story dan beberapa
mempresentasikannya.

II-5
o. Minggu ke - 15 (22-26 Mei 2023)
Pada minggu ke-15, hari senin 22 mei 2023 sampai dengan hari jumat tanggal
26 mei 2023, ada zoom live session mentoring capstone project sebanyak 2 kali
yaitu hari senin dan rabu, selain itu juga ada google meet daily meet sebanyak
3 kali yaitu hari selasa, kamis, dan jumat. pada minggu ini ada beberapa revisi
dan tambahan untuk desain dari tim ui/ux. selain itu, juga mengerjakan tugas
professional skill 3 dari mentor professional skill. adapun tugasnya yaitu
membuat Team Canvas Profesional Skill 3. tugas tersebut dikirimkan ke
mentor melalui email.

p. Minggu ke - 16 (29 Mei – 02 Juni 2023)

Pada minggu ke - 16, hari senin 22 mei 2023 sampai dengan hari jumat tanggal
2 juni 2023, terdapat sesi mentoring zoom mentoring capstone project
sebanyak 2x yaitu pada hari senin, 22 mei 2023 dan rabu, 31 mei 2023. selain
itu, untuk kegiatan yang lainnya adalah mengerjakan tugas untuk capstone
proyek yaitu mencoba untuk implementasi API

q. Minggu ke - 17 (05-09 Juni 2023)

Pada minggu ke 17, pada hari senin 5 juni 2023 hingga hari jumat tanggal 9
juni 2023, terdapat 2 sesi zoom mentoring capstone project, yaitu pada hari
senin 5 juni 2023 dan hari rabu 7 juni 2023. selain 2 hari tersebut melanjutkan
tugas mengerjakan capstone project.

r. Minggu ke - 18 (12-16 Juni 2023)

Pada minggu ke 18, pada hari senin 12 juni 2023 hingga hari jumat tanggal 16
juni 2023, terdapat 2 sesi zoom mentoring capstone project, yaitu pada hari
senin 12 juni 2023 dan hari rabu 14 juni 2023. selain 2 hari tersebut
melanjutkan tugas mengerjakan capstone project yaitu slicing UI dan juga
imlementasi login dengan API

s. Minggu ke - 19 (19-23 Juni 2023)

Pada minggu ke 19, pada hari senin 19 juni 2023 hingga hari jumat tanggal 23
juni 2023, terdapat 2 sesi zoom mentoring capstone project, yaitu pada hari
senin 19 juni 2023 dan hari rabu 23 juni 2023. selain 2 hari tersebut
melanjutkan tugas mengerjakan capstone project yaitu mencoba implementasi
API pada halaman ubah profil dan mencoba membuat handle klik untuk
mengubah foto pada ubahprofil

II-6
t. Minggu ke - 20 (26-30 Juni 2023)
Minggu ke 20 ini, tanggal 26 sampai dengan 30 juni 2023, merupakan minggu
terakhir kegiatan program studi independen batch 4 dengan mitra Alterra
Academy. Minggu ini, penulis dan teman-teman kelompok telah berhasil
mempresentasikan dan menyelesaikan tugas capstone project dengan tema
forum discussion. Presentasi berlangsung dengan lancar tanpa ada kendala.
Setelah selesai presentasi, hari-hari berikutnya diisi dengan kegiatan
mengerjakan laporan akhir kegiatan, yang nantinya akan dikumpulkan pada
website Kampus Merdeka, sebagai pertanggung jawaban karena telah
mengikuti program studi independen batch 4 ini.

II-7
 Bab III Proyek Aplikasi Forum Discussion “Squad Space”

III.1 Deskripsi Squad Space

Capstone project kelompok 15 mengusung tema forum discussion, dengan
judul proyek “Squad Space”. Adapun latar belakang dari pembuatan aplikasi Squad
Space adalah sebagai berikut.

Squad Space adalah proyek forum grup diskusi (FDG) yang lahir sebagai
respon terhadap meningkatnya kebutuhan akan platform interaktif yang
memungkinkan pengguna untuk berbagi ide, pemikiran, dan pengetahuan. Dalam
mengembangkan Squad Space, tim developer mengakui pentingnya kolaborasi,
pertukaran gagasan, dan pengembangan jaringan, serta keinginan untuk
menciptakan lingkungan yang ramah dan inspiratif bagi pengguna.

Melalui aplikasi mobile dan website, Squad Space bertujuan untuk

memfasilitasi diskusi yang berarti dan memperkaya pengalaman pengguna dengan
menyediakan fitur-fitur interaktif dan pengelolaan yang efisien.

III.2 Profil Tim Divisi Front-End

Gambar III.1 Profil Tim Divisi Fornt-End Kelompok 15

Gambar III.1 merupakan profil tim divisi front-end kelompok 15. Adapun
anggota tim divisi front-end pada tugas capstone project kelompok 15 diantaranya,

1. Muhammad Alieza Nuriman, sebagai ketua divisi. Berasal dari kampus

Politeknik Negeri Jakarta.
2. David Ezra Prasetyo, sebagai anggota divisi. Berasal dari kampus Institut
Teknologi dan Bisnis Kalbis.
3. Dimas Andriano Herlambang, sebagai anggota divisi. Berasal dari kampus
Universitas Islam Balitar.

III-1
4. Elda Vina Fadhilatur Rizkiyah, sebagai anggota divisi. Berasal dari kampus
Universitas Islam Balitar.
5. Raden Muhammad Revi Hafiyyan, sebagai anggota divisi. Berasal dari kampus
Universitas Telkom.
III.3 Proses Pelaksanaan Proyek
Divisi front-end memulai pengerjaan tugas pada tanggal 17 mei 2023 setelah
mendapatkan rangkaian desain dari tim UI/UX pada figma yang dapat diakses pada
bit.ly/Figma-FrontEnd-Website. Pengerjaan tugas berakhir pada tanggal 27 juni
2023, pada saat jadwal presentasi. Adapun proses pengerjaan capstone project yang
dilakukan oleh divisi front-end adalah sebagai berikut :

a. Minggu pertama
Melakukan initial setup pada proyek, review design UI/UX, melakukan folder
structuring pada proyek, dan melakukan initial commit.
b. Minggu ke-dua
Melakukan pembagian tugas perkelompok, penentuan library yang digunakan,
dan memulai slicing desain.

c. Minggu ke-tiga
Berhasil melakukan slicing desain pada beberapa halaman, mencoba
melakukan merging pada slicing desain yang telah berhasil dibuat, dan
melakukan integrasi data menggunakan dummy data.

d. Minggu ke-empat
Merging beberapa branch dan melakukan code review serta live pull requests
terhadap branch yang masih bermasalah.

e. Minggu ke-lima
Mencoba endpoint API dari tim back-end, melakukan integrasi API sementara
dari mockAPI dan memperbaiki beberapa logika dan styling yang kurang
sesuai.

f. Minggu ke-enam
Integrasi API yang tersedia dari BE dan sesuai dengan flow, merging
development branch ke main branch, memperbaiki beberapa logika dan styling
yang kurang sesuai, serta melakukan production deployment.

Hasil coding masing-masing anggota divisi front-end diupload pada branch

mereka masing-masing pada repositori “capstone-frontend” di tautan github yang
dapat diakses pada tautan berikut : https://github.com/Capstone-Project-Kelompok-
15/capstone-frontend.

III-2
III.4 Pencapaian Hasil Proyek
Setelah mengerjakan dalam waktu 6 minggu, divisi front-end berhasil
membuat website Squad Space dengan persentase kesuksesan berdasarkan key
activities sebesar 100%. Website Squad Space dapat diakses melalui tautan berikut:
https://capstone-frontend-steel.vercel.app/

III.4.1 Alat dan Library yang Digunakan

Adapun alat dan Library yang digunakan untuk membangun website
Squad Space adalah sebagai berikut.

a. Alat
1. Discord, sebagai media platform untuk berdiskusi.
2. Visual Studio Code, sebagai software editor untuk melakukan
coding.
3. Github, yang digunakan untuk menyimpan dan mengelola kode.
4. Mock API, sebagai penyedia dummy data API. Dummy data dari
Mock API digunakan pada halaman home, manage user, manage
thread, dan thread report..
5. Postman, yang digunakan untuk penyedia data API dari back-end.
Data dari Postman digunakan pada halaman login dan ubah profil.
6. Vercel, yang digunakan untuk deploy hasil proyek.
b. Library
1. ReactJS, sebagai library javascript yang digunakan untuk membuat
user interface.
2. React Router Dom, digunakan sebagai library routing pada
ReactJS.
3. TailwidCSS, digunakan sebagai library untuk CSS.
4. Formik, digunakan untuk mengelola form.
5. Yup, digunakan untuk mengelola validasi pada form.
6. Eslint, digunakan untuk menganalisis dan menemukan masalah
pada kode yang dibuat.
7. Zustand, digunakan sebagai library state management.
8. Axios, digunakan sebagai http client javascript yang
menghubungkan front-end dengan back-end.
9. ChartJS, digunakan untuk membuat grafik.

III-3
III.4.2 Key Activities

Gambar III.2 Key Activities Divisi Front-End Kelompok 15

Gambar III.2 adalah key activities divisi front-end kelomppok 15.
Key activities react terbagi menjadi dua yaitu, wajib dan nilai plus. Key
activities wajib antara lain, landing page, manage user, dan manage
thread. Sedangkan key activities nilai plus yaitu perform block user apabila
user melakukan pelanggaran.

III.4.3 Product Success

Product success yang dibuat oleh divisi front-end adalah sebagai
berikut.

a. Halaman Landing
Gambar III.3 adalah tampilan Halaman Landing. Pada Halaman
Landing, terdapat gambar dengan nama website, logo, dan button
masuk yang jika di klik nantinya akan dialihkan pada Halaman Login.

Gambar III.3 Tampilan Halaman Landing

III-4
b. Halaman Login
Pada Halaman Login, admin dapat melakukan login dengan
memasukkan email dan password. Halaman Login dapat dilihat pada
Gambar III.4

Gambar III.4 Tampilan Halaman Login

c. Halaman Home
Halaman Home memiliki fitur threads chart yang merupakan diagram
statistik jumlah threads tiap bulan pada tahun 2023 tampilan Halaman
Home ditunjukkan pada gambar III.5.

Gambar III.5 Tampilan Halaman Home

III-5
d. Halaman Manage User
Gambar III.6 merupakan tampilan Halaman Manage User. Adapun
fitur yang terdapat pada halaman manage user antara lain total user,
muted user. blocked user, dan online user.

Gambar III.6 Tampilan Halaman Manage User

e. Halaman Manage Thread

Halaman Manage Thread memiliki fitur hapus thread dan lihat
thread, Halaman ini memiliki tampilan yang ditunjukkan pada gambar
III.7

Gambar III.7 Tampilan Halaman Manage Thread

III-6
f. Halaman Thread Report
Halaman Thread Report memiliki fitur lihat thread, setujui laporan,
dan tolak laporan. Halaman ini memiliki tampilan seperti pada
Gambar III.8.

Gambar III.8 Tampilan Halaman Thread Report

g. Halaman Ubah Profil

Gambar III.9 merupaan tampilan Halaman Ubah Profil. Pada halaman
ini, admin dapat mengganti gambar, username, email, dan password
mereka.

Gambar III.9 Tampilan Halaman Ubah Profil

h. Fitur Logout
Fitur logout merupakan fitur yang berasal dari button logout yang
terdapat pada navbar saat admin berhasil melakukan login. Button
logout yang apabila di klik, nantinya akan menghapus token login dan
mengalihkan halaman pada Halaman Landing.

III-7
III.4.4 Tugas Penulis
Adapun tugas penulis adalah membuat navbar, Halaman Landing,
Halaman Login, fitur login, Halaman Ubah Profil, fitur ubah profil, dan
fitur logout. Adapun keberhasilan penulis dalam membuat halaman
maupun fitur berdasarkan tugas yang telah dibagi sebesar 100%.

III-8
 Bab IV Penutup

IV.1 Kesimpulan
Adapun kesimpulan yang didapatkan setelah mengikuti program Program
Studi Independen Bersertifikat oleh Alterra Academy pada program studi 2023
Complete Front-End Engineer Career with ReactJS adalah

a. Program Studi Independen Bersertifikat oleh Alterra Academy pada

program studi 2023 Complete Front-End Engineer Career with React JS
berlangsung selama 20 minggu, mulai tanggal 16 Februari 2023 sampai
dengan 30 Juni 2023.
b. Mentor kompeten dalam bidangnya, sehingga dapat membantu dan
menjawab pertanyaan dari peserta saat mengalami kesulitan maupun
ketidak pahaman dalam materi.
c. Terdapat tugas harian yang wajib dikerjakan oleh peserta sebagai tolak ukur
pemahaman peserta dalam memahami tiap materi yang telah dipaparkan.
d. Tugas akhir mini project yang dilaksanakan secara individu sebagai
implementasi peserta dalam menyelesaikan masalah secara mandiri dengan
menerapkan materi yang telah dipaparkan. Pada tugas ini, penulis berhasil
membuat website AstanaKu yang dapat diakses melalui tautan berikut:
https://astanaku.vercel.app/.
e. Tugas akhir capstone project yang dilaksanakan secara kelompok sebagai
implementasi peserta dalam membangun aplikasi secara berkelompok, yaitu
berkolaborasi dengan developer dari berbagai divisi. Pada tugas ini, penulis
sebagai front-end developer berhasil membuat navbar, Halaman Landing,
Halaman Login, fitur login, Halaman Ubah Profil, fitur ubah profil, dan fitur
logout pada website forum discussion bernama “Squad Space”. Website
Squad Space memiliki persentase keberhasilan produk sebesar 100% dan
dapat diakses melalui tautan berikut: https://capstone-frontend-
steel.vercel.app/
f. Pemaparan materi professional skill (non-technical skill) diantaranya,
communication skill, teamworks and collaboration, dan time and task
management, untuk mempersiapkan peserta dalam memasuki dunia kerja.

IV.2 Saran
Adapun saran untuk Alterra Academy selaku mitra pada program studi 2023
Complete Front-End Engineer Career with ReactJS dalam program Independen
Bersertifikat diantaranya:

a. Laman alta.id yang digunakan sebagai bagian dari pembelajaran dirasa

belum memuaskan, karena membutuhkan waktu loading yang lama saat
mengakses laman dan terkadang muncul error dalam mengakses laman.

IV-1
b. Tetap menjadi mitra dari program studi independen bersertifikat pada
Kampus Merdeka yang diselenggarakan oleh Kemendikbudristek.

IV-2
Lampiran A. TOR

A-1
Lampiran B. Log Activity
Minggu/Tgl Kegiatan Hasil

Minggu ke – 1

Kamis, 16 Perkenalan berkenalan dengan 1. Perkenalan dengan mentor dan

Februari mentor dan teman teman sekelas. teman sekelas,
2023 adapun pelajarannya, mempelajari 2. Mempelajari bagaimana
pengenalan html, css, javascript, ip, membuat github, git push,
domain, git, github, hosting, https, fetch, pull, add, merge, diff,
version control, perbedaan front-end stash, branch, remote, fork, dll
dan back-end, dll

Jumat, 17 Mempelajari tentang bagaimana

Februari cara membuat github, git push,
2023 fetch, pull, add, merge, diff, stash,
branch, remote, fork, dll

Minggu ke - 2

Senin, 20 Membahas tentang HTML, 1. mempelajari tentang HTML,

Februari pengertian HTML, pembbuatan pengertian HTML,
2023 form, list(ordered list & unordered pembbuatan form, list(ordered
list), tag, element, attribute, div, list & unordered list), tag,
section, form, memasukkan gambar, element, attribute, div, section,
header, footer. Selain itu juga form, memasukkan gambar,
mempelajari tentang CSS. header, footer. Selain itu juga
mempelajari tentang CSS,
Selasa, 21 Mengerjakan tugas HTML yaitu
padding dan margin,
Februari membuat web sederhana
background color, background
2023 landingPage.html,
image, transition, font family,
createAccount.html, dan
display, selector, css external,
createProduct.html. pada
css internal, css inline, font
createAccount.html, dan
color, table, pseudo-element,
createProduct.html lebih banyak
pseudo-class, dsbg.
dituntut untuk membuat form,
2. mengerjakan tugas HTML,
sedangkan pada landingPage.html
CSS, dan Bootstrap yaitu
dituntut untuk membuat href yang
mengerjakan membuat web
ditautkan dengan
sederhana landingPage.html,
createAccount.html sehingga bisa
createAccount.html, dan
berpindah halaman.
createProduct.html. pada

B-1
Minggu/Tgl Kegiatan Hasil

Rabu, 22 Membahas tentang CSS, padding createAccount.html, dan

Februari dan margin, background color, createProduct.html.
2023 background image, transition, font
family, display, selector, css
external, css internal, css inline, font
color, table, pseudo-element,
pseudo-class, dsbg

Kamis, 23 Mengerjakan tugas css

Februari
2023

Jumat Membahas tentang bootsrap,

Februari kemudian bagaimana cara me-
2023 recreate website yang sudah ada
dengan menggunakan coding
bootstrap. membuat navbar, banner,
footer atas dan footer bawah.

Minggu ke - 3

Senin, 27 Mempelajari tentang javascript. Mempelajari :

Februari Pengertian javascript, variabel var,
1. Javascript. pengertian
2023 let, cons, scooping, hoisting,
javascript, variabel var, let,
primitive (string, boolean, number,
cons, scooping, hoisting,
bigint, undifined, symbol), object,
primitive (string, boolean,
references, destructing, apa itu
number, bigint, undifined,
method, dll
symbol), object, references,
Selasa, 28 Mengerjakan tugas dom destructing, apa itu method,
Februari dll. mengerjakan tugas
2023 bagaimana cara membuat
alert-alert pada javascript.
Rabu, 01 Mempelajari tentang data structure,
2. Data structure, mengapa butuh
Maret 2023 mengapa butuh me manage data,
me manage data, array.splice(),
array.splice(), array.slice(),
array.slice(),
array.push([...arr]), teneri operator,
array.push([...arr]), teneri
logika boolean true and false, dll.
operator, logika boolean true
Selain itu juga ada kuis ditanya satu
and false, dll. mengerjakan
per satu tentang javascript.
tugas membuat data structure.

B-2
Minggu/Tgl Kegiatan Hasil

Kamis, 02 Mengerjakan tugas data structure bagaimana menampilkan data

Maret 2023 javascript. Read, insert, delete,
search js dom.
3. Clean codes. apa itu clean
Jumat, 03 Mempelajari tentang clean codes.
Maret 2023 Apa itu clean codes, mengapa harus
menerapkan hal tersebut, apa saja
karakteristik dari clean codes, apa
saja prinsip clean codes, dan juga
bagaimana cara restructuring.
Minggu ke - 4
yang berhasil diinput pada
form.
codes, mengapa harus
menerapkan hal tersebut, apa
saja karakteristik dari clean
codes, apa saja prinsip clean
codes, dan juga bagaimana
cara restructuring.
mengerjakan tugas untuk
memperbaiki codingan pada
tugas data structure dengan
menerapkan konsep clean
codes.

Senin, 06 Mempelajari tentang apa itu react, Minggu ini mempelajari tentang :
Maret 2023 bagaimana cara menginstall, apa
1. Apa itu react, bagaimana cara
saja yang dibutuhkan sebelum
menginstall, apa saja yang
memakai react, bagaimana memakai
dibutuhkan sebelum memakai
react dengan sederhana, dll.
react, bagaimana memakai
Selasa, 07 Mengerjakan soal introduction react dengan sederhana.
Maret 2023 react. Bagaimana cara menginstal 2. Component, prop, lifecycle
installation react menggunakan (mounting, update,
cra(create react app), bagaimana unmounting) , state, handling
menjalankan react pada local, event, perpedaan props dan
membuat project react state, pengertian jsx, cara
menggunakan vite, dan styling pada rect, membuat
menjalankannya pada local. komponen, dll
3. Handling event, onchange,
Rabu, 08 Mempelajari tentang component,
useState, membuat inputan
Maret 2023 prop, lifecycle (mounting, update,
yang nantinya akan
unmounting) , state, handling event,
ditampilkan pada table,
perpedaan props dan state,
menghapus value yang telah
pengertian jsx, cara styling pada
ditampilkan pada table.
rect, membuat komponen, dll

B-3
Minggu/Tgl Kegiatan Hasil

Kamis, 09 Belajar untuk membuat proyek react 4. Mempelajari apa itu atomic
Maret 2023 kemudian mencoba cara design (atoms, molecules,
mengstyling pada react, dan organism, templates, dan
mencoba membuat props, dll pages)
Selain itu, pada minggu ini juga
Jumat 10 Mempelajari tentang handling
mengerjakan :
Maret 2023 event, onchange, usestate, membuat
inputan yang nantinya akan 1. Soal introduction react.
ditampilkan pada table, menghapus bagaimana cara menginstal
value yang telah ditampilkan pada Installation react
table, dll menggunakan CRA(Create
React App), bagaimana
menjalankan react pada local,
membuat project react
menggunakan vite, dan
menjalankannya pada local.
2. Mengubah proyek .html
menjadi komponen react JS,
menggunakan JSX (JavaScript
XML) untuk mengubah
HTML kedalam ReactJS
dengan tools
https://transform.tools/html-
to-jsx.
3. Membuat komponen-
komponen ReactJS yang
membagi halaman .html
menjadi bagian-bagian yang
lebih kecil (atomic design)
Minggu ke - 5

Senin, 13 Mempelajari tentang event 1. Mempelajari tentang event

Maret 2023 handling, apa itu event handling,
bagaimana cara membuat state dan
props, apa perbedaan state dan
props, bagaimana cara membuat
button, cara show dan delete data
yang pernah dibuat, dll.
handling, apa itu event
handling, bagaimana cara
membuat state dan props, apa
perbedaan state dan props,
bagaimana cara membuat
button, cara show dan delete

B-4
Minggu/Tgl Kegiatan Hasil

Selasa, 14 Mempelajari tentang bagaimana data yang pernah dibuat,

Maret 2023 kemampuan komunikasi yang
efektif, apa saja 5 elemen
komunikasi lasswell, apa itu
komunikasi sinkronus dan
asinkronus beserta kelebihan,
kelemahan, dan cara mengatasi
kekurangan tersebut.
Rabu, 15 Membahas tentang apa itu react
Maret 2023 hook, apa saja yang termasuk react
hook, usestate, useeffect, useref,
usememo, callback, dll
Kamis, 16 Mempelajari tentang apa itu react
Maret 2023 routing, tag router, tag browser
router, tag route, tag routes,
bagaimana cara kerjanya, dll
Jumat 17 Mengerjakan tugas react hook dan
Maret 2023 react router. Membuat halaman
createproduct dengan inputan dari
form kemudian bisa ditampilkan
data yang telah diinput sebelumnya,
membuat laman yang jika di klik
salah satu komponennya, maka akan
berpindah ke laman yang lain
mempelajari tentang
bagaimana kemampuan
komunikasi yang efektif, apa
saja 5 elemen komunikasi
lasswell, apa itu komunikasi
sinkronus dan asinkronus
beserta kelebihan, kelemahan,
dan cara mengatasi
kekurangan tersebut,
mempelajari tentang react
hook dan react routing.
2. Mengerjakan tugas react hook
dan react router. Membuat
halaman createproduct dengan
inputan dari form kemudian
bisa ditampilkan data yang
telah diinput sebelumnya,
membuat laman yang jika di
klik salah satu komponennya,
maka akan berpindah ke laman
yang lain

Minggu ke - 6

Senin, 20 Mempelajari tentang apa itu basic Minggu ini mempelajari tentang :
Maret 2023 form, apa itu controlled
1. Apa itu basic form, apa itu
component,apa itu uncontrolled
controlled component,apa itu
component, apa perbedaan
uncontrolled component, apa
controlled component dan
perbedaan controlled
uncontrolled component, dll
component dan uncontrolled
Selasa, 21 Mempelajari apa itu global state, apa component.
Maret 2023 itu redux, apa itu view, apa itu 2. Apa itu global state data
action, apa itu reducer, apa itu store, managemen, apa itu redux,
dan bagaimana siklusnya, kapan menggunakan redux,

B-5
Minggu/Tgl Kegiatan Hasil

bagaimana cara menginstal redux, apa saja komponen redux,

dll. bagaimana alur redux, apa itu
view, apa itu action, apa itu
Rabu, 22 Mengerjakan tugas react form yaitu
reducer, apa itu store, dan
Maret 2023 regex validasi, membuat form yang
bagaimana siklusnya,
nantinya berfungsi saat user
bagaimana cara menginstal
menginputkan data, dan
redux, dll.
menampilkan data yang diinput
Selain itu, pada minggu ini juga
pada tabel.
mengerjakan :
Kamis, 23 Melanjutkan materi tentang Global 1.
Tugas react form yaitu regex
Maret 2023 state data managemen. Kapan
validasi, membuat form yang
menggunakan redux, apa saja
nantinya berfungsi saat user
komponen redux, bagaimana alur
menginputkan data, dan
redux, dll.
menampilkan data yang
Jumat 24 Mengerjakan soal competence 2, diinput pada tabel.
Maret 2023 yaitu merubah coding html yang 2. Soal competence 2, yaitu
sebelumnya dibuat pada code merubah coding html yang
competence 1 menjadi ke bentuk sebelumnya dibuat pada code
react, membuat halaman about us, competence 1 menjadi ke
membuat validasi form, dan bentuk react, membuat
menampilkan alert data yang telah halaman about us, membuat
diinput user. validasi form, dan
menampilkan alert data yang
telah diinput user.
Minggu ke - 7

Senin, 27 Mempelajari ulang tentang apa itu Mempelajari tentang :

Maret 2023 redux, apa saja komposisi redux,
1. Apa itu redux, apa saja
mempelajari redux thunk, redux
komposisi redux, mempelajari
persist, mengapa membutuhkan
redux thunk, redux persist,
redux persist, bagaimana cara
mengapa membutuhkan redux
menginstall dan menggunakan
persist, bagaimana cara
redux persist.
menginstall dan menggunakan
Selasa, 28 Mempelajari tentang bagaimana redux persist.
Maret 2023 cara penggunaan dan coding redux 2. Cara penggunaan dan coding
reducer, redux store, slice, extra redux reducer, redux store,

B-6
Minggu/Tgl Kegiatan Hasil

reducer, action, dan bagaimana cara slice, extra reducer, action, dan
mengdispatch, dll. bagaimana cara mengdispatch
3. Apa itu react test, apa itu vitest,
Rabu, 29 Mempelajari tentang apa itu react
bagaimana cara menginstall
Maret 2023 test, apa itu vitest, bagaimana cara
vitest, bagaimana cara
menginstall vitest, bagaimana cara
membuat file .test.jsx,
membuat file .test.jsx, bagaimana
bagaimana cara snapshot
cara snapshot, dll
4. Bagaimana cara memberikan
Kamis, 30 Sosialisasi capstone untuk proyek validasi pada inputan file,
Maret 2023 akhir, pembagian tema, dan perkenalan rest api
bagaimana teknisnya. Selain itu, Mengerjakan tugas :
saat kelas, mempelajari tentang 1.
React global state management
kelanjutan react test, bagaimana
dengan menggunakan action
cara memberikan validasi pada
dan reducer
inputan file, perkenalan rest api 2. React testing dengan
Jumat 31 Engerjakan soal react global state menggunakan vitest
Maret 2023 management dengan menggunakan Selain itu, juga ada sosialisasi
action dan reducer, serta capstone yang menjelaskan
mengerjakan soal dan react testing. tentang pembagian tema, dan
bagaimana teknisnya.

Minggu ke - 8

Senin, 03 Mempelajari teori pengenalan Mempelajari :

April 2023 mengenai apa itu rest api, apa saja
1. Apa itu rest api, apa saja http
http method dasar, mengapa
method dasar, mengapa
memakai rest api, bagaimana
memakai rest api, bagaimana
alurnya, dll.
alurnya.
Selasa, 04 Mengulas kembali teori crud(create, 2. Teori crud(create, read, update,
April 2023 read, update, delete), bagaimana delete), bagaimana cara coding
cara coding method get(ambil data), method get(ambil data),
post(create data), put(update data), post(create data), put(update
dan delete(menghapus data) data), dan delete(menghapus
data).
Rabu, 05 Membahas tentang Authentication 3.
Authentication Http response
April 2023 Http response status codes, mengapa
status codes, mengapa
dibutuhkan Authentication,

B-7
Minggu/Tgl Kegiatan
bagaimana cara membuat token,
bagaimana cara menggunakan
private/protected root, untuk apa
private root, dll
Kamis, 06 Membahas tentang pengenalan
April 2023 dasar graphql, bagaimana cara
membuat akun pada hasura,
bagaimana cara membuat database
pada hasura, melakukan query dan
mutation pada hasura, memasang
apollo client, dll.
Jumat, 07 M engerjakan tugas Introduction 1.
April 2023 Restfull API, Restfull API ,
Authentication in React , dan
Introduction graphql and Apollo
Client Setup. Adapun tugas yang
dikerjakan adalah membuat akun di
Mock API, membuat endpoint, 2.
axios, CRUD, Authentication dan
Authorization, dan membuat akun,
query, mutation, serta memasang 3.
apollo pada hasura.
4. Introduction
Minggu ke - 9
Senin, 10 Membahas tentang apa itu query, Mempelajari :
April 2023 apa itu mutation, apa itu
subscription, apa itu client state dan
B-8
Hasil
dibutuhkan Authentication,
bagaimana cara membuat
token, bagaimana cara
menggunakan
private/protected root, untuk
apa private root.
4. Apa itu graphql, bagaimana
cara membuat akun,
melakukan query, melakukan
mutation pada hasura, dan
memasang apollo client.
Mengerjakan :
Introduction Restfull API,
yaitu membuat akun pada
mockapi, membuat endpoint
baru dengan spesifikasi yang
telah ditentukan, dan
menambahkan axios.
Restfull API , yaitu membuat
CRUD dengan data pada
mockapi dan library axios.
Authentication in React , yaitu
membuat authentication dan
authorization dengan dummy
data pada local storage.
graphql and
Apollo Client Setup, yaitu
membuat akun pada hasura,
membuat database, melakukan
query dan mutation, serta
memasang apollo client pada
projec react.
Minggu/Tgl Kegiatan Hasil

server state, dan bagaimana cara 1. Apa itu query, apa itu
codingnya. mutation, apa itu subscription,
apa itu client state dan server
Selasa, 11 Membahas tentang apa itu
state, dan bagaimana cara
April 2023 deployment, bagaimana cara
codingnya.
membuat akun pada surge.sh,
2. Apa itu deployment,
bagaimana cara menautkan proyek
bagaimana cara membuat akun
ke surge.sh
pada surge.sh, bagaimana cara
Rabu, 12 Membahas tentang apa itu eslint, menautkan proyek ke surge.sh
April 2023 bagaimana cara menginstall, eslint 3. Apa itu eslint, bagaimana cara
itu untuk apa, dan bagaimana cara menginstall, eslint itu untuk
bekerjanya. Selain itu juga apa, dan bagaimana cara
membahas tentang Hasura action. bekerjanya. Selain itu juga
membahas tentang Hasura
Kamis, 13 Membahas dan konsultasi tentang
action.
April 2023 judul dan Minimum Viable Product
Mengerjakan :
yang terdiri atas deskripsi produk
dan spesifikasi fitur produk untuk 1. Graphql Query and Mutation
tugas mini proyek. yang mengintegrasikan Graph
API hasura dengan project
Jumat, 14 Mengerjakan tugas graphql Query reactjs yang dibuat
April 2023 and Mutation yang 2. Subscription yang merubah
mengintegrasikan Graph API hasura data dengan memanfaatkan
dengan project reactjs yang dibuat, Query pada graphql menjadi
Subscription yang merubah data Subscribtion
dengan memanfaatkan Query pada 3. Deployment Vercel yang
graphql menjadi Subsctibtion, dan mendeploy aplikasi reactjs ke
Deployment vercel. Vercel.
Minggu ke - 10

Senin, 17 Pertemuan live session membahas Minggu ini mulai membahas dan
April 2023 tentang MVP. Jadi teman-teman mengerjakan proyek individu yaitu
sekelas mempresentasikan tentang tugas Mini Project.
MVP nya masing-masing.

Selasa, 18 Pertemuan live session melanjutkan

April 2023 pembahasan presentasi MVP.
Teman-teman sekelas
mempresenasikan bagaimana latar

B-9
Minggu/Tgl Kegiatan Hasil

belakang, fitur, dan tools program

yang akan dibuat

Rabu, 19 Pertemuan live session melanjutkan

April 2023 pembahasan presentasi MVP.
Teman-teman sekelas
mempresenatasikan mvpnya dan di
berikan saran oleh mentor terkait
fitur-fitur aplikasi yang akan dibuat
yang sekiranya kurang

Kamis, 20 Hari libur lebaran, namun tetap

April 2023 mengerjakan tugas proyek individu.

Jumat, 21 Hari libur lebaran, namun tetap

April 2023 mengerjakan tugas proyek individu.

Minggu ke - 11

Senin, 24 Libur nasional sehingga belajar Minggu ini merupakan hari libur
April 2023 secara mandiri nasional, yaitu Hari Raya Idul Fitri
1444 Hijriah. Sehingga belajar
Selasa, 25 Libur nasional sehingga belajar
secara mandiri.
April 2023 secara mandiri

Rabu, 26 Libur nasional sehingga belajar

April 2023 secara mandiri

Kamis, 27 Libur nasional sehingga belajar

April 2023 secara mandiri

Jumat, 28 Libur nasional sehingga belajar

April 2023 secara mandiri

Minggu ke - 12

Senin, 01 Libur nasional, hari buruh Minggu ini masih membahas dan
Mei 2023 internasional. Sehingga belajar mengerjakan proyek individu yaitu
secara mandiri tugas Mini Project.

Selasa, 02 Mengerjakan tugas mini proyek.

Mei 2023 Mulai membuat halaman-halaman
sederhana yang diperlukan

B-10
Minggu/Tgl Kegiatan Hasil

Rabu, 03 Mei Live session membahas tentang

2023 perkembangan aplikasi pada mini
proyek.

Kamis, 04 Mengerjakan tugas mini proyek

Mei 2023 dengan membuat beberapa fitur
yang diperlukan dalam pembuatan
aplikasi

Jumat, 05 Live session membahas tentang

Mei 2023 perkembangan aplikasi pada mini
proyek

Minggu ke - 13

Senin, 08 Hari pertama presentasi tugas mini Minggu ini merupakan minggu
Mei 2023 proyek. Teman sekelas mulai dimana jadwal presentasi
mempresentasikan tugasnya. berlangsung. Penulis mendapat
giliran pada hari ke-2. Di hari
Pada hari ini, penulis tidak
lainnya, penulis membuat akun
mendapat giliran presentasi
tautanedin.
sehingga hanya melanjutkan
mengerjakan aplikasi penulis. Adapun tugas yang perlu
dikumpulkan pada Mini Project
Selasa, 09 Hari ke-dua presentasi tugas mini
adalah figma, github, mvp.doc,
Mei 2023 proyek. Pada hari itu saat siang,
dan file ppt.
penulis mengerjakan aplikasi
penulis, dan malamnya
mendapatkan giliran ke 2 untuk
mempresentasikannya

Rabu, 10 Mei Hari ke-tiga presentasi tugas mini

2023 proyek. Teman sekelas bergiliran
mempresentasikan hasil kerjanya.

Kamis, 11 Hari ke-empat presentasi tugas mini

Mei 2023 proyek. Teman sekelas bergiliran
mempresentasikan hasil kerjanya.
Hari ini penulis membuat akun
tautanedin.

B-11
Minggu/Tgl Kegiatan Hasil

Jumat, 12 Hari terakhir untuk presentasi tugas

Mei 2023 mini project. Hari ini penulis
merangkai caption untuk
memposting pada laman
TautanedIn.
Minggu ke - 14

Senin, 15 Live session yaitu mentoring Minggu ini merupakan minggu

Mei 2023 capstone. Dimana pada sesi zoom pertama untuk membahas dan
tersebut, ada breaakout room per mengerjakan tugas proyek
kelompok. Dan pada hari itu, kelompok yaitu Capstone Project.
kelompok penulis dijelaskan oleh
Penulis sebagai bagian dari divisi
tim ui/ux terkait desain figma
Front-End Web, melakukan :
mereka.
1. Initial setup pada project,
Selasa, 16 Zoom live session profesional skill
review design UI/UX
Mei 2023 2, yaitu tentang teamworks &
2. Folder structuring pada project
collaboration.
3. Initial commit.
Rabu, 17 Mei Live session yaitu mentoring
2023 capstone. Dimana pada sesi zoom
tersebut, ada breaakout room per
kelompok. Dan pada hari itu,
kelompok penulis diberikan
kesempatan untuk mendapatkan sesi
breakout room per tim dengan
mentor

Kamis, 18 Tidak ada live session karena hari

Mei 2023 ini tanggal merah, namun pada hari
ini penulis mencoba mempelajari
lagi figma dari proyek aplikasi yang
akan dibuat

Jumat, 19 Live session yaitu profesional skill

Mei 2023 3, tentang time and task
management. Pada zoom ini, tiap
tim di breakout room dan
mendapatkan tugas untuk membuat

B-12
Minggu/Tgl Kegiatan Hasil

user story dan beberapa

mempresentasikannya.

Minggu ke - 15

Senin, 22 Zoom mentoring capstone project. Minggu ini merupakan minggu ke

Mei 2023 Seperti biasa, pada sesi mentoring, - 2 untuk membahas dan
ada breakout room untuk masing- mengerjakan tugas proyek
masing kelompok. Pada hari itu, kelompok yaitu Capstone Project.
membahas tentang desain figma dan
Penulis sebagai bagian dari divisi
juga kanban trello.
Front-End Web, melakukan :
Selasa, 23 Google meet untuk tiap kelompok.
1. Pembagian tugas perkelompok
Mei 2023 Pada hari ini dihadiri oleh mentor.
2. Penentuan library yang
Selain itu, pada hari ini juga
digunakan
membahas tentang tugas
3. Memulai slicing desain.
profesinonal skill, yaitu team canvas
profesional skill 3.

Rabu, 24 Mei Zoom mentoring capstone project.

2023 Seperti biasa, pada sesi mentoring,
ada breakout room untuk masing-
masing kelompok.

Kamis, 25 Google meet untuk tiap kelompok.

Mei 2023 Pada hari ini dihadiri oleh mentor.
Membahas tentang desain figma
yang telah direvisi oleh tim ui/ux

Jumat, 26 Google meet untuk tiap kelompok.

Mei 2023 Pada hari ini dihadiri oleh mentor.
Membahas tentang desain figma
yang telah direvisi oleh tim ui/ux

Minggu ke - 16

Senin, 29 Zoom mentoring capstone project. Minggu ini merupakan minggu ke

Mei 2023 Seperti biasa, pada sesi mentoring, - 3 untuk membahas dan
ada breakout room untuk masing- mengerjakan tugas proyek
masing kelompok. kelompok yaitu Capstone Project.

B-13
Minggu/Tgl Kegiatan Hasil

Selasa, 30 Mengerjakan tugas untuk capstone Penulis sebagai bagian dari divisi
Mei 2023 project. Pada hari ini kegiatannya Front-End Web, melakukan :
adalah persiapan untuk imprelentasi
1. Berhasil melakukan slicing
api
desain pada beberapa halaman
Rabu, 31 Mei Zoom mentoring capstone project. 2. Mencoba melakukan merging
2023 Seperti biasa, pada sesi mentoring, pada slicing desain yang telah
ada breakout room untuk masing- berhasil dibuat
masing kelompok. 3. Melakukan integrasi data
menggunakan dummy data.
Kamis, 01 Mengerjakan tugas untuk capstone
Juni 2023 project. Pada hari ini kegiatannya
adalah impelentasi api

Jumat, 02 Zoom mentoring capstone project.

Juni 2023 Seperti biasa, pada sesi mentoring,
ada breakout room untuk masing-
masing kelompok.

Minggu ke - 17

Senin, 05 Zoom mentoring capstone project. Minggu ini merupakan minggu ke

Juni 2023 seperti biasa, pada sesi mentoring, - 4 untuk membahas dan
ada breakout room untuk masing- mengerjakan tugas proyek
masing kelompok. kelompok yaitu Capstone Project.

Selasa, 06 Mengerjakan tugas untuk capstone Penulis sebagai bagian dari divisi
Juni 2023 project. pada hari ini kegiatannya Front-End Web, melakukan :
adalah memperbaiki slicing UI yang
1. Merging beberapa branch dan
masih conflicted.
melakukan code review
Rabu, 07 Juni Zoom mentoring capstone project. 2. Live pull requests terhadap
2023 seperti biasa, pada sesi mentoring, branch yang conflicted
ada breakout room untuk masing-
masing kelompok.

Kamis, 08 Mengerjakan tugas untuk capstone

Juni 2023 project. pada hari ini kegiatannya
adalah meet bersama kelomok untuk
mengisi dan menginputkan tautan
terkait pengembangan capstone
proyek perkelompok.

B-14
Minggu/Tgl Kegiatan Hasil

Jumat, 09 Mengerjakan tugas untuk capstone

Juni 2023 project. pada hari ini kegiatannya
adalah proses mengimplementasi
API

Minggu ke - 18

Senin, 12 Zoom mentoring capstone project. Minggu ini merupakan minggu ke

Juni 2023 seperti biasa, pada sesi mentoring, - 5 untuk membahas dan
ada breakout room untuk masing- mengerjakan tugas proyek
masing kelompok. kelompok yaitu Capstone Project.

Selasa, 13 Mengerjakan tugas untuk capstone Penulis sebagai bagian dari divisi
Juni 2023 project. pada hari ini kegiatannya Front-End Web, melakukan :
adalah melanjutkan untuk slicing
1. Slicing UI
untuk tambahan UI
2. Imlementasi login dengan API
Rabu, 14 Juni Zoom mentoring capstone project.
2023 seperti biasa, pada sesi mentoring,
ada breakout room untuk masing-
masing kelompok.

Kamis, 15 Mengerjakan tugas untuk capstone

Juni 2023 project. pada hari ini kegiatannya
adalah implementasi login dengan
API

Jumat, 16 Mengerjakan tugas untuk capstone

Juni 2023 project. pada hari ini kegiatannya
adalah implementasi login dengan
API

Minggu ke – 19

Senin, 19 Zoom mentoring capstone project. Minggu ini merupakan minggu ke

Juni 2023 Seperti biasa, pada sesi mentoring, - 5 untuk membahas dan
ada breakout room untuk masing- mengerjakan tugas proyek
masing kelompok. kelompok yaitu Capstone Project.

Selasa, 20 Mengerjakan tugas untuk capstone Penulis sebagai bagian dari divisi
Juni 2023 project. Pada hari ini kegiatannya Front-End Web, melakukan :

B-15
Minggu/Tgl Kegiatan Hasil

adalah mencoba implementasi api 1. Melanjutkan tugas

pada ubah profile mengerjakan capstone project
yaitu mencoba implementasi
Rabu, 21 Juni Zoom mentoring capstone project.
API pada ubah profile
2023 Seperti biasa, pada sesi mentoring,
2. Membuat handle klik untuk
ada breakout room untuk masing-
mengubah foto pada
masing kelompok.
ubahprofil
Kamis, 22 Mengerjakan tugas untuk capstone
Juni 2023 project. Pada hari ini kegiatannya
adalah mencoba implementasi api
pada ubah profile

Jumat, 23 Mengerjakan tugas untuk capstone

Juni 2023 project. Pada hari ini kegiatannya
adalah mencoba membuat handle
klik untuk mengubah foto pada
ubahprofil

Minggu ke – 20

Senin, 26 Memperbaiki logic pada aplikasi Minggu ini mempresentasikan

Juni 2023 menurut arahan dari QE. hasil kerja kelompok 15 pada tugas
Capstone Project.
Selasa, 27 Berkesempatan untuk
Juni 2023 mempresentasikan hasil kerja Setelah selesai presentasi,
kelompok kami pada tugas capstone selanjutnya kegiatan diisi dengan
project yang telah dikerjakan selama mengerjakan laporan akhir
lebih dari 2 bulan. kegiatan.

Rabu, 28 Juni Mengerjakan laporan akhir kegiatan

2023

Kamis, 29 Mengerjakan laporan akhir kegiatan

Juni 2023

Jumat, 30 Mengerjakan laporan akhir kegiatan

Juni 2023

B-16
Lampiran C. Bukti Hasil Mini Project

C-1
C-2
Lampiran D. Bukti Hasil Capstone Project

D-1
D-2
D-3