Development of the SATUINBOX Website at PT. X

Authors

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

DOI:

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

Keywords:

API, Frontend, Integration, Optimization, Performance, UI/UX

Abstract

The rapid growth of online businesses demands solutions for effective customer communication management. PT. X developed a ticket-based chat platform to facilitate communication management between sellers and customers. The purpose of this internship project is to develop the frontend of the website with a focus on implementing a responsive and functional UI/UX design and API integration. The method used is Agile Scrum with a daily sprint approach in software development. Data collection techniques were carried out through direct observation and interviews with the development team. During the internship, the intern was responsible for implementing the UI/UX design through page slicing and integrating the backend API using Next.js and TypeScript. Responsiveness testing was performed to ensure proper functionality across various devices. The results showed that the platform was successfully implemented with a responsive interface and features that function optimally, including API integration and performance optimization. The conclusion of this study is that the frontend development successfully improved the platform's performance and enhanced the user experience.

References

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].

Published

2026-03-31

Issue

Section

Articles