Studi Kasus Teman Bicara: Platform Support Mental Health Anonim

Masa remaja penuh dengan gejolak emosi. Terkadang, kita butuh tempat untuk bercerita tanpa takut dihakimi atau diketahui identitas aslinya. Inilah latar belakang saya membangun Teman Bicara—sebuah komunitas support mental health anonim untuk remaja Indonesia.

Live Demo: teman-bicara.vercel.app

💡 Konsep Utama

Teman Bicara dirancang dengan prinsip Full Anonymity. Identitas asli pengguna (email/password) tersimpan aman, namun yang tampil di publik (saat memposting cerita atau komentar) hanyalah username pilihan mereka.

Fitur utamanya meliputi:

• Stories Feed: Membaca dan memberi dukungan pada cerita orang lain.
• Rich-text Editor: Menulis cerita berformat (bold, list, heading) dengan Tiptap.
• Comments System: Interaksi positif di setiap postingan.

🛠️ Keputusan Teknologi

Saya menggunakan ekosistem Next.js modern yang difokuskan pada kecepatan, keamanan, dan mobile-first experience.

• Framework: Next.js 16 (App Router), React 19, TypeScript
• Styling: Tailwind CSS v4 & Framer Motion (Neo-brutalist UI)
• Database: Neon PostgreSQL + Prisma 7 ORM
• Autentikasi: Auth.js v5 (Credentials provider dengan JWT) + bcryptjs
• Form & Validasi: React Hook Form + Zod
• Editor & Keamanan: Tiptap v3 + isomorphic-dompurify
• Testing: Vitest (Unit) & Playwright (E2E)

🔐 Mengamankan Konten & Data (Tantangan Utama)

1. Mencegah XSS Attack pada Rich Text

Membiarkan user menginput HTML melalui rich-text editor adalah celah keamanan besar. Solusi: Saya mengimplementasikan isomorphic-dompurify. Setiap konten HTML yang masuk dari Tiptap disanitasi secara ketat sebelum disimpan atau di-render, memastikan platform aman dari serangan Cross-Site Scripting (XSS).

2. Autentikasi & Sesi

Karena platform ini anonim, kepercayaan user pada sistem login sangat penting. Solusi: Saya menggunakan Auth.js v5 dengan JWT. Kombinasi Server Actions Next.js dan middleware menjaga rute terproteksi. Data sensitif di-hash menggunakan bcryptjs.

3. Pengujian Berkelanjutan (Testing)

Aplikasi yang menangani isu sensitif tidak boleh mudah error. Solusi: Saya menerapkan testing pipeline komprehensif:

• Vitest untuk unit test validasi schema Zod, logika sanitasi DOMPurify, dan komponen React.
• Playwright untuk pengujian End-to-End (E2E), memastikan flow otentikasi, posting cerita, dan interaksi komentar berjalan mulus di production build.

📱 Mobile-First Design

Mayoritas remaja mengakses internet melalui smartphone. Oleh karena itu, saya merancang UI secara mobile-first dengan menempatkan bottom navigation bar yang intuitif dan mengusung estetik neo-brutalist yang modern dan bersahabat.

Membangun "Teman Bicara" bukan sekadar latihan teknis full-stack, tapi juga tentang memahami user empathy, merancang sistem keamanan XSS, dan menjaga kualitas kode melalui automated testing.