Pengembangan Website SATUINBOX di PT. X

Penulis

  • Nathaniel Valentino Robert Universitas Kristen Maranatha
  • Andreas Widjaja Universitas Kristen Maranatha

DOI:

https://doi.org/10.28932/jste.v2i1.13292

Kata Kunci:

API, Frontend, Integrasi, Optimasi, Performa, UI/UX

Abstrak

Pesatnya perkembangan bisnis online menuntut solusi untuk pengelolaan komunikasi pelanggan yang efektif. PT. X mengembangkan platform berbasis tiket percakapan untuk mempermudah pengelolaan komunikasi antara penjual dan pelanggan. Tujuan dari kerja praktik ini adalah untuk mengembangkan frontend website dengan fokus pada implementasi desain UI/UX dan integrasi API agar tampilan responsif dan fungsional. Metode yang digunakan adalah Agile Scrum dengan pendekatan daily sprint dalam pengembangan perangkat lunak. Teknik pengumpulan data dilakukan melalui observasi langsung dan wawancara dengan tim pengembang. Selama kerja praktik, pemagang bertanggung jawab untuk mengimplementasikan desain UI/UX melalui proses slicing page, serta mengintegrasikan API backend dengan menggunakan Next.js dan TypeScript. Pengujian responsivitas dilakukan untuk memastikan tampilan berfungsi dengan baik pada berbagai perangkat. Hasil yang dicapai menunjukkan bahwa platform berhasil diterapkan dengan tampilan yang responsif dan fitur yang berfungsi secara optimal, termasuk integrasi API dan optimasi performa. Kesimpulan dari penelitian ini adalah bahwa pengembangan frontend berhasil meningkatkan kinerja platform dan memberikan pengalaman pengguna yang lebih baik.

Referensi

V. Stray, “An Empirical Investigation of the Daily Stand-Up Meeting in Agile Software Development Projects,” pp. 1-148, 2014.

j. v.-t. c. E. mijacobs, “Apa yang dimaksud dengan Scrum?,” Microsoft, 1 February 2024. [Online]. Available: https://learn.microsoft.com/id id/devops/plan/what-is-scrum. [Diakses 2 May 2025].

B. Frain, Responsive Web Design with HTML5 and CSS3, Packt Publishing Ltd, 2015, 2015.

Microsoft, “TypeScript is JavaScript with syntax for types.,” Microsoft, 2020. [Online]. Available: https://www.typescriptlang.org/. [Diakses 12 April 2025].

Tailwind Labs, “Tailwind CSS: Utility-First CSS Framework,” Tailwind Labs, 2023. [Online]. Available: https://v1.tailwindcss.com/. [Diakses 12 April 2025].

J. J. ". Sarjeant., “Promise based HTTP client for the browser and node.js,” Axios Project, 2020. [Online]. Available: https://github.com/axios/axios. [Diakses 12 May 2025].

TanStack, “TanStack Query: Powerful asynchronous state management for TS/JS, React, Solid, Vue, Svelte and Angular,” TanStack, 2023. [Online]. Available: https://tanstack.com/query/latest. [Diakses 12 April 2025].

Poimandres, “Zustand: A bear necessities state management solution for React,” 2023. [Online]. 8. Available: https://github.com/pmndrs/zustand. [Diakses 18 April 2025].

GitLab Inc., “GitLab: The most-comprehensive AI-powered DevSecOps platform,” GitLab Inc., 2023. [Online]. Available: https://about.gitlab.com/. [Diakses 12 April 2025].

Google, “Chrome DevTools Overview,” Chorme Developer, 2023. [Online]. Available: https://developer.chrome.com/docs/devtools?hl=id. [Diakses 12 April 2025].

ByteDance Ltd., “Lark: Collaboration & Communication Platform,” Lark, 2023. [Online]. Available: https://www.larksuite.com/en_sg. [Diakses 12 April 2025].

B. Frost, Atomic Design, Brad Frost, 2016. Available: https://atomicdesign.bradfrost.com/

R. F. Augusdi, A. A. Yunanto, D. I. Permatasari dan A. F. Muhammad, “Development of Sandbox English Conversation Training Applications with Atomic Design,” 2021. Available: https://www.researchgate.net/publication/356008303_Development_of_Sandbox_English_Conversation_Training_Applications _with_Atomic_Design

P. G. Amores, “Planning, Designing, and Building a Customized UI Library: A Step-by-StepGuide for Improving Frontend Development.,” pp. 19-192, 2024

O. Bhavare, “Optimizing Web Performance: Tree Shaking Explained,” Medium, 12 November 2023. [Online]. Available: https://medium.com/@omkarbhavare2406/optimizing-web-performance-tree-shaking-explained-007208163c88. [Diakses 15 April 2025].

D. Ihnatovich, “Tree Shaking in JavaScript: A Simple Explanation for Beginners,” Medium, October 2024. [Online]. Available: https://medium.com/@ignatovich.dm/tree-shaking-in-javascript-a-simple-explanation-for-beginners-7d7c85ad2e20. [Diakses 15 April 2025].

##submission.downloads##

Diterbitkan

2026-03-31

Terbitan

Vol 2 No 1 (2026)

Bagian

Artikel

Lisensi

Hak Cipta (c) 2026 Nathaniel Valentino Robert, Andreas Widjaja

Creative Commons License

Artikel ini berlisensi Creative Commons Attribution-NonCommercial 4.0 International License.