Aplikasi berbasis web seperti Assurance Case Playground (ACP) memiliki antarmuka yang kompleks dan dinamis, sehingga membutuhkan struktur kode yang efisien dan mudah dipelihara. Masalah muncul ketika pengembangan tidak dilakukan secara modular, yang dapat menyebabkan duplikasi kode dan menyulitkan pemeliharaan di masa depan. Penelitian ini menerapkan pendekatan Component-Based Development (CBD) dalam pengembangan front-end ACP menggunakan React.js. Proses dilakukan melalui analisis kebutuhan, perancangan komponen, dan implementasi berdasarkan prinsip modular. Evaluasi dilakukan menggunakan alat analisis statis untuk menghitung Maintainability Index (MI) dari 22 komponen yang dikembangkan. Hasil pengujian menunjukkan rata-rata MI sebesar 122.8, termasuk kategori sangat mudah dipelihara. Selain itu, penerapan prinsip SOLID turut memperkuat struktur kode agar lebih fleksibel dan terorganisir. Penelitian ini menunjukkan bahwa pendekatan CBD mampu meningkatkan maintainability dan efisiensi pengembangan antarmuka pengguna, serta memberikan kontribusi dalam membangun arsitektur front-end yang tangguh untuk aplikasi web kompleks seperti ACP. Kata Kunci: component-based development, maintainability, front-end, assurance case, React.js