System Requirements Document for mindmap-bayi

1. Introduction

mindmap-bayi adalah aplikasi web untuk membuat, menyusun, dan menyimpan mindmap tentang perkembangan bayi. Produk ini ditujukan bagi orang tua, pengasuh, dan pendidik anak usia dini yang ingin memetakan tiga aspek perkembangan bayi — perkembangan fisik, perkembangan kognitif, dan perkembangan sosioemosional — ke dalam satu struktur mindmap yang dapat dibaca, disunting, dan dibuka kembali.

Inti produk adalah satu tindakan yang jelas: pengguna membuat mindmap perkembangan bayi dengan tiga cabang aspek perkembangan sebagai kerangka wajib, lalu mengisi cabang-cabang tersebut dengan node-node topik yang dapat ditambah, diubah, dan dihapus. Mindmap disimpan pada backend sehingga dapat dibuka kembali pada sesi berikutnya.

Audiens produk adalah pengguna perorangan yang bekerja di meja rumah atau ruang kelas, bukan tim korporat. Karena itu antarmuka dirancang hangat, personal, dan mudah dibaca, dengan penekanan pada keterbacaan teks penjelasan dan kejelasan struktur cabang.

2. System Overview

mindmap-bayi adalah aplikasi web first-party dengan UI kustom yang dimiliki aplikasi. Pengguna anonim dapat melihat halaman Landing yang menjelaskan pembuatan mindmap perkembangan bayi dan mengarahkan ke akses produk. Untuk menyimpan mindmap secara persisten dan membukanya kembali, pengguna melakukan pendaftaran mandiri melalui Sign Up, dan verifikasi kembali melalui Login saat kembali. Setelah terverifikasi, pengguna bekerja di Mindmaps untuk menemukan mindmap tersimpan, dan di Mindmap Editor untuk membuat, menyusun, menyimpan, serta menambah, mengubah, dan menghapus node mindmap.

Aktor manusia aktif dalam produk ini adalah satu persona: Pembuat Mindmap Perkembangan Bayi. Backend aplikasi bertindak sebagai aktor non-persona yang menyimpan mindmap dan memuatnya kembali.

Batasan sempit yang berlaku saat ini:

• Produk ini adalah alat pembuatan dan penyimpanan mindmap perkembangan bayi. Ia tidak menyediakan kurikulum, penilaian klinis, diagnosis, skrining tumbuh kembang, atau rekomendasi medis.
• Tidak ada kolaborasi multi-pengguna, berbagi publik, komentar, atau kontrol izin berjenjang dalam lingkup saat ini.
• Tidak ada impor/ekspor, integrasi pihak ketiga, atau sinkronisasi lintas perangkat di luar penyimpanan backend aplikasi.
• Tidak ada konten faktual pihak ketiga yang dipasok sebagai sumber isi; isi node mindmap diisi oleh pengguna.

2a. Product Interpretation and Delivery Boundary

Kepemilikan delivery dan akses. Seluruh permukaan produk dimiliki dan dioperasikan oleh aplikasi (first-party, custom UI). Tidak ada permukaan yang dimiliki provider eksternal dan tidak ada delivery headless. Identitas dimiliki aplikasi: pengguna membuat identitasnya sendiri melalui pendaftaran mandiri, dan memverifikasi kembali identitas tersebut saat membuka mindmap tersimpan. Identitas ini diperlukan semata-mata untuk kontinuitas — agar mindmap yang disimpan tetap terikat pada pengguna yang benar dan dapat dibuka kembali pada sesi berikutnya. Identitas aplikasi tidak menetapkan izin berjenjang: tidak ada peran, visibilitas berbasis peran, atau kontrol izin atas state bersama, karena tidak ada state bersama lintas pengguna dalam lingkup saat ini.

Batas anonim dan terlindungi. Landing, Sign Up, dan Login dapat dijangkau tanpa identitas. Mindmaps dan Mindmap Editor memerlukan login. Interaksi yang menetapkan akses tidak dimiliki oleh halaman yang dilindungi: pendaftaran dan verifikasi kembali berada pada permukaan akses tersendiri yang dapat dijangkau secara anonim, dan state terlindungi tetap tidak tersedia sampai identitas ditetapkan.

Batas saat ini dan masa depan. Semua perilaku yang dijelaskan dalam dokumen ini adalah lingkup saat ini: pembuatan mindmap perkembangan bayi dengan tiga aspek wajib, penyuntingan node, dan penyimpanan backend yang dapat dibuka kembali. Tidak ada permintaan pengguna yang menetapkan horizon masa depan, sehingga tidak ada bagian masa depan yang diklaim.

2b. Source Content Inventory

Tidak ada direktif referensi dengan content_source dalam lingkup proyek ini, sehingga tidak ada inventaris konten sumber yang disertakan.

2c. Page Content and Component Coverage

Landing

• Informasi/state: penjelasan anonim tentang apa itu mindmap perkembangan bayi dan bahwa mindmap mencakup tiga aspek — fisik, kognitif, sosioemosional. Menampilkan judul besar, satu baris teks penjelasan, ilustrasi mindmap bergaya gambar tangan dengan node pusat "Bayi" bercabang ke tiga lengan berkode warna, dan tiga panel modular berkode warna (fisik = tomato, kognitif = sage, sosioemosional = teal). Tidak ada state pengguna yang dimuat di sini.
• Aksi utama: tombol pill tomato berlabel "Mulai Membuat Mindmap" yang mengarahkan pengguna anonim ke Sign Up.
• Aksi pendukung: tautan ke Login bagi pengguna yang sudah memiliki identitas.
• Entitas domain: aspek perkembangan (fisik, kognitif, sosioemosional) sebagai kategori visual; mindmap sebagai konsep yang dijelaskan.
• Tanggung jawab komponen: hero dua pertiga kiri untuk teks dan CTA; ilustrasi mindmap yang mengalir keluar tepi kanan viewport; tiga panel kategori sebagai urutan galeri; header dengan wordmark dan tautan akses.
• State: loading — tidak ada (konten statis). empty — tidak berlaku. success — halaman tampil penuh dan CTA dapat diklik. error — tidak berlaku untuk konten statis; jika navigasi ke Sign Up gagal, pengguna tetap berada di Landing dan dapat mencoba lagi. recovery — tidak ada state yang perlu dipulihkan.

Sign Up

• Informasi/state: formulir pendaftaran mandiri pada kartu putih yang mengambang di atas latar krem, kolom tunggal terpusat. Menjelaskan bahwa pendaftaran diperlukan agar mindmap dapat disimpan dan dibuka kembali.
• Aksi utama: mengirim pendaftaran untuk menetapkan identitas aplikasi milik pengguna.
• Aksi pendukung: berpindah ke Login; kembali ke Landing.
• Entitas domain: identitas pengguna aplikasi (kredensial pendaftaran).
• Tanggung jawab komponen: kartu formulir; field input; tombol kirim; pesan validasi inline; tautan silang ke Login.
• State: loading — tombol kirim menampilkan state sibuk selama permintaan berlangsung. empty — formulir kosong dengan helper text. success — identitas ditetapkan dan pengguna diarahkan ke Mindmaps. error — input tidak valid atau pendaftaran gagal; pesan kesalahan ditampilkan di dekat field terkait dan formulir tetap terisi. recovery — pengguna dapat memperbaiki input dan mengirim ulang tanpa kehilangan data yang sudah diketik.

Login

• Informasi/state: formulir verifikasi kembali pada kartu putih di latar krem, kolom tunggal terpusat. Menjelaskan bahwa login diperlukan untuk membuka mindmap tersimpan dan melanjutkan pengeditan.
• Aksi utama: memverifikasi identitas untuk membuka state terlindungi.
• Aksi pendukung: berpindah ke Sign Up; kembali ke Landing.
• Entitas domain: identitas pengguna aplikasi (kredensial verifikasi).
• Tanggung jawab komponen: kartu formulir; field input; tombol kirim; pesan kesalahan inline; tautan silang ke Sign Up.
• State: loading — tombol kirim menampilkan state sibuk. empty — formulir kosong. success — verifikasi berhasil dan pengguna diarahkan ke Mindmaps. error — kredensial tidak cocok atau verifikasi gagal; pesan kesalahan ditampilkan tanpa mengungkap detail sensitif. recovery — pengguna dapat mencoba lagi atau berpindah ke Sign Up.

Mindmaps

• Informasi/state: daftar mindmap tersimpan milik pengguna yang sedang terverifikasi, ditampilkan sebagai grid kartu galeri (3 kolom desktop, 2 tablet, 1 mobile). Setiap kartu menampilkan pratinjau mini mindmap, bilah kategori berwarna di tepi kiri, dan judul mindmap.
• Aksi utama: membuka mindmap tersimpan ke Mindmap Editor.
• Aksi pendukung: membuat mindmap baru; kembali ke Landing atau keluar dari sesi terverifikasi.
• Entitas domain: mindmap tersimpan (judul, pratinjau, kategori/aspek yang tercakup, waktu penyimpanan terakhir).
• Tanggung jawab komponen: grid kartu galeri; kartu mindmap dengan pratinjau dan bilah warna; state kosong dengan ajakan membuat mindmap pertama; kontrol pembuatan mindmap baru.
• State: loading — placeholder kartu selama daftar dimuat. empty — belum ada mindmap tersimpan; ditampilkan penjelasan singkat dan aksi membuat mindmap baru. success — daftar mindmap tampil dan setiap kartu dapat dibuka. error — daftar gagal dimuat; pesan kesalahan dan aksi coba lagi ditampilkan. recovery — memuat ulang daftar tanpa kehilangan konteks halaman.

Mindmap Editor

• Informasi/state: kanvas bebas dengan tekstur kertas halus, tempat node mindmap perkembangan bayi disusun. Node pusat "Bayi" bercabang ke tiga aspek perkembangan yang berkode warna (fisik = tomato, kognitif = sage, sosioemosional = teal). Setiap node adalah kartu kertas dengan sudut membulat, border hangat 1px, bayangan lembut, dan titik warna kecil di sudut kiri atas yang menandai kategori cabangnya. Konektor cabang berupa kurva halus.
• Aksi utama: menyimpan mindmap ke backend.
• Aksi pendukung: menambah node; mengubah node; menghapus node; menyusun/memindahkan node pada kanvas; mengubah judul mindmap; kembali ke Mindmaps.
• Entitas domain: mindmap; node mindmap (teks/label, kategori aspek, posisi pada kanvas, relasi induk–anak); tiga aspek perkembangan sebagai kategori cabang.
• Tanggung jawab komponen: kanvas dengan tekstur kertas; node card dengan titik kategori; konektor bezier; kontrol tambah/ubah/hapus node; kontrol penyimpanan; indikator status penyimpanan; kontrol kembali ke daftar.
• State: loading — mindmap yang dipilih dimuat ke kanvas. empty — mindmap baru tanpa node anak; kerangka tiga aspek perkembangan ditampilkan sebagai titik awal. success — perubahan node tersimpan dan status penyimpanan mengonfirmasi keberhasilan. error — penyimpanan gagal atau mindmap gagal dimuat; pesan kesalahan ditampilkan dan perubahan yang belum tersimpan dipertahankan di kanvas. recovery — pengguna dapat mencoba menyimpan ulang tanpa kehilangan perubahan yang sudah dibuat.

3. Functional Requirements

FR-1 — Membuat mindmap tentang perkembangan bayi As a Pembuat Mindmap Perkembangan Bayi, I should membuat mindmap tentang perkembangan bayi, so that saya memiliki satu peta topik perkembangan bayi yang dapat dibaca dan disimpan.

• Provenance: explicit
• Actor: Pembuat Mindmap Perkembangan Bayi. Trigger: pengguna terverifikasi membuka Mindmap Editor dan membuat mindmap baru, atau membuka mindmap tersimpan dari Mindmaps.
• Observable result: sebuah mindmap perkembangan bayi ada di kanvas Mindmap Editor dan dapat disimpan ke backend.
• Access state: memerlukan login; state terlindungi tidak tersedia sebelum identitas diverifikasi.
• Failure/recovery: jika mindmap gagal dimuat atau gagal disimpan, pesan kesalahan ditampilkan dan isi kanvas dipertahankan agar pengguna dapat mencoba lagi.
• Continuation: setelah tersimpan, mindmap muncul di Mindmaps dan dapat dibuka kembali.

FR-2 — Mindmap mencakup tiga aspek perkembangan As a Pembuat Mindmap Perkembangan Bayi, I should memiliki mindmap yang mencakup perkembangan fisik, perkembangan kognitif, dan perkembangan sosioemosional, so that ketiga aspek perkembangan bayi terwakili dalam satu struktur.

• Provenance: explicit
• Actor: Pembuat Mindmap Perkembangan Bayi. Trigger: mindmap dibuat atau dibuka di Mindmap Editor.
• Observable result: mindmap menampilkan tiga cabang aspek perkembangan — fisik, kognitif, sosioemosional — masing-masing dengan kode warna yang konsisten (fisik = tomato #C75B39, kognitif = sage #7A9B76, sosioemosional = teal #3A7D7B).
• Access state: memerlukan login.
• Failure/recovery: jika salah satu cabang aspek tidak tampil, pengguna dapat menambahkannya kembali sebagai node bercabang dari node pusat.
• Continuation: pengguna mengisi node-node turunan di bawah masing-masing aspek.

FR-3 — Menambah node mindmap As a Pembuat Mindmap Perkembangan Bayi, I should menambah node pada mindmap, so that saya dapat memperluas topik di bawah aspek perkembangan yang relevan.

• Provenance: explicit (bagian dari "menambah, mengubah, dan menghapus node mindmap" pada kontrak halaman)
• Actor: Pembuat Mindmap Perkembangan Bayi. Trigger: pengguna memilih aksi tambah node pada sebuah node atau pada kanvas.
• Observable result: node baru muncul di kanvas sebagai kartu kertas dengan titik warna kategori, terhubung ke node induknya oleh kurva halus.
• Access state: memerlukan login.
• Failure/recovery: jika node gagal ditambahkan, kanvas tetap pada state sebelumnya dan pengguna dapat mencoba lagi.
• Continuation: pengguna dapat langsung mengubah label node baru tersebut.

FR-4 — Mengubah node mindmap As a Pembuat Mindmap Perkembangan Bayi, I should mengubah node mindmap, so that label dan penempatan topik dapat saya perbaiki.

• Provenance: explicit
• Actor: Pembuat Mindmap Perkembangan Bayi. Trigger: pengguna memilih node dan mengubah label atau memindahkannya pada kanvas.
• Observable result: node menampilkan label atau posisi yang diperbarui, dan konektornya mengikuti.
• Access state: memerlukan login.
• Failure/recovery: jika perubahan gagal disimpan, perubahan tetap terlihat di kanvas dan pengguna dapat menyimpan ulang.
• Continuation: pengguna melanjutkan penyuntingan atau menyimpan mindmap.

FR-5 — Menghapus node mindmap As a Pembuat Mindmap Perkembangan Bayi, I should menghapus node mindmap, so that topik yang tidak relevan dapat saya bersihkan dari struktur.

• Provenance: explicit
• Actor: Pembuat Mindmap Perkembangan Bayi. Trigger: pengguna memilih aksi hapus pada sebuah node.
• Observable result: node dan konektornya hilang dari kanvas.
• Access state: memerlukan login.
• Failure/recovery: jika penghapusan gagal, node tetap ada dan pengguna dapat mencoba lagi.
• Continuation: pengguna melanjutkan penyuntingan atau menyimpan mindmap.

FR-6 — Menyimpan mindmap ke backend As a Pembuat Mindmap Perkembangan Bayi, I should menyimpan mindmap ke backend, so that pekerjaan saya tidak hilang dan dapat dibuka kembali pada sesi berikutnya.

• Provenance: required_inference (kontrak: "Mindmap tersimpan pada backend agar dapat dibuka kembali pada sesi berikutnya")
• Actor: Pembuat Mindmap Perkembangan Bayi. Trigger: pengguna memilih aksi simpan di Mindmap Editor.
• Observable result: mindmap tersimpan pada backend dan status penyimpanan mengonfirmasi keberhasilan.
• Access state: memerlukan login; mindmap terikat pada identitas pengguna yang menyimpannya.
• Failure/recovery: jika penyimpanan gagal, pesan kesalahan ditampilkan dan perubahan yang belum tersimpan dipertahankan di kanvas untuk dicoba ulang.
• Continuation: mindmap tersimpan muncul di Mindmaps.

FR-7 — Menemukan dan membuka mindmap tersimpan As a Pembuat Mindmap Perkembangan Bayi, I should melihat daftar mindmap tersimpan dan membukanya, so that saya dapat melanjutkan pekerjaan yang sudah ada.

• Provenance: required_inference (kontrak halaman Mindmaps)
• Actor: Pembuat Mindmap Perkembangan Bayi. Trigger: pengguna terverifikasi membuka Mindmaps.
• Observable result: daftar mindmap tersimpan tampil sebagai grid kartu galeri dengan pratinjau mini, bilah kategori berwarna, dan judul; memilih kartu membuka mindmap di Mindmap Editor.
• Access state: memerlukan login.
• Failure/recovery: jika daftar gagal dimuat, pesan kesalahan dan aksi coba lagi ditampilkan; jika belum ada mindmap, state kosong dengan ajakan membuat mindmap baru ditampilkan.
• Continuation: pengguna membuka mindmap dan melanjutkan penyuntingan.

FR-8 — Pendaftaran mandiri As a Pembuat Mindmap Perkembangan Bayi, I should mendaftar sendiri sebelum menyimpan mindmap secara persisten, so that mindmap saya terikat pada identitas saya dan dapat dibuka kembali.

• Provenance: required_inference (kontrak: "Pengguna melakukan pendaftaran mandiri sebelum menyimpan mindmap secara persisten")
• Actor: Pembuat Mindmap Perkembangan Bayi. Trigger: pengguna anonim memilih "Mulai Membuat Mindmap" di Landing atau berpindah ke Sign Up.
• Observable result: identitas aplikasi milik pengguna ditetapkan dan pengguna diarahkan ke Mindmaps.
• Access state: Sign Up dapat dijangkau tanpa identitas; state terlindungi tetap tidak tersedia sampai identitas ditetapkan.
• Failure/recovery: input tidak valid atau pendaftaran gagal menampilkan pesan kesalahan di dekat field terkait, dan formulir tetap terisi agar dapat dikirim ulang.
• Continuation: pengguna membuat mindmap pertamanya di Mindmap Editor.

FR-9 — Verifikasi kembali saat membuka mindmap tersimpan As a Pembuat Mindmap Perkembangan Bayi, I should memverifikasi kembali identitas saya saat membuka mindmap tersimpan, so that mindmap yang saya buka benar-benar milik saya.

• Provenance: required_inference (kontrak: "Pengguna melakukan verifikasi kembali saat membuka mindmap tersimpan")
• Actor: Pembuat Mindmap Perkembangan Bayi. Trigger: pengguna kembali dan membuka Login, atau mencoba menjangkau Mindmaps/Mindmap Editor tanpa sesi terverifikasi.
• Observable result: verifikasi berhasil dan pengguna diarahkan ke Mindmaps dengan mindmap tersimpannya tersedia.
• Access state: Login dapat dijangkau tanpa identitas; Mindmaps dan Mindmap Editor memerlukan login.
• Failure/recovery: kredensial tidak cocok menampilkan pesan kesalahan tanpa mengungkap detail sensitif; pengguna dapat mencoba lagi atau berpindah ke Sign Up.
• Continuation: pengguna membuka mindmap tersimpan dan melanjutkan pengeditan.

FR-10 — Halaman Landing menjelaskan produk dan mengarahkan ke akses As a Pembuat Mindmap Perkembangan Bayi, I should memahami apa yang dilakukan mindmap-bayi dari halaman Landing, so that saya dapat memutuskan untuk mulai membuat mindmap.

• Provenance: required_inference (kontrak halaman Landing)
• Actor: Pembuat Mindmap Perkembangan Bayi (anonim). Trigger: pengguna mengunjungi Landing.
• Observable result: halaman menampilkan judul besar, satu baris penjelasan, ilustrasi mindmap dengan node pusat "Bayi" dan tiga lengan berkode warna, tiga panel kategori, serta tombol "Mulai Membuat Mindmap".
• Access state: dapat dijangkau tanpa identitas.
• Failure/recovery: jika navigasi ke Sign Up gagal, pengguna tetap berada di Landing dan dapat mencoba lagi.
• Continuation: pengguna masuk ke Sign Up atau Login.

4. User Personas

Pembuat Mindmap Perkembangan Bayi

Konteks produk. Persona ini adalah orang tua, pengasuh, atau pendidik anak usia dini yang ingin menyusun pemahaman tentang perkembangan bayi ke dalam satu peta yang rapi. Ia bekerja di meja rumah atau ruang kelas, sering sambil membaca penjelasan yang lebih panjang, dan menghargai tampilan yang hangat serta mudah dibaca alih-alih dasbor padat.

Tujuan utama. Menghasilkan mindmap perkembangan bayi yang lengkap, mencakup ketiga aspek — fisik, kognitif, dan sosioemosional — dan menyimpannya agar dapat dibuka kembali serta dilanjutkan kapan saja.

Tanggung jawab berulang yang diterima. Menyusun cabang-cabang topik perkembangan bayi ke dalam struktur mindmap yang dapat dibaca dan disimpan. Tanggung jawab ini mencakup: membuat mindmap baru; memastikan tiga cabang aspek perkembangan hadir; menambah node di bawah aspek yang relevan; mengubah label dan penempatan node; menghapus node yang tidak relevan; menyimpan mindmap ke backend; menemukan mindmap tersimpan dan membukanya kembali.

Input dan keputusan. Persona memutuskan topik apa yang masuk ke setiap aspek perkembangan, bagaimana node disusun dan diberi label, kapan struktur dianggap selesai, dan kapan mindmap disimpan. Ia juga memutuskan untuk mendaftar dan memverifikasi kembali identitasnya agar pekerjaannya tersimpan.

Interaksi dengan peserta lain. Persona adalah satu-satunya aktor manusia aktif dalam lingkup saat ini. Ia berinteraksi dengan backend aplikasi, yang menyimpan mindmap dan memuatnya kembali; backend tidak mengambil keputusan produk atas namanya. Tidak ada peserta manusia lain yang menerima, meninjau, atau menyetujui hasil kerjanya dalam lingkup saat ini.

Keberhasilan yang dapat diamati. Mindmap dengan tiga cabang aspek perkembangan tampil di kanvas, node-node tambahan tersusun di bawah aspek yang tepat, dan mindmap tersimpan muncul kembali di daftar Mindmaps pada sesi berikutnya setelah verifikasi.

Yang membedakan peran ini. Pekerjaannya adalah pengorganisasian pengetahuan, bukan pengukuran atau penilaian: ia memetakan topik, bukan menilai kondisi bayi. Karena itu keberhasilan diukur dari kelengkapan dan keterbacaan struktur mindmap, bukan dari skor, diagnosis, atau laporan.

5. Core User Flows

Flow A — Memahami produk dan memulai akses (anonim)

1. Pengguna anonim membuka Landing.
2. Pengguna membaca judul besar, satu baris penjelasan, dan ilustrasi mindmap dengan node pusat "Bayi" yang bercabang ke tiga lengan berkode warna (fisik, kognitif, sosioemosional), serta tiga panel kategori di bawahnya.
3. Pengguna memutuskan untuk mulai dan memilih tombol pill tomato "Mulai Membuat Mindmap".
4. Aplikasi membawa pengguna ke Sign Up.
5. Jika pengguna sudah memiliki identitas, ia memilih tautan ke Login sebagai gantinya.
6. Jika navigasi gagal, pengguna tetap berada di Landing dan dapat mencoba lagi.

Flow B — Pendaftaran mandiri dan pembuatan mindmap pertama

1. Pengguna berada di Sign Up dan melihat formulir pada kartu putih di atas latar krem, dengan penjelasan bahwa pendaftaran diperlukan agar mindmap dapat disimpan dan dibuka kembali.
2. Pengguna mengisi field pendaftaran dan mengirim formulir; tombol menampilkan state sibuk.
3. Jika input tidak valid atau pendaftaran gagal, pesan kesalahan muncul di dekat field terkait dan formulir tetap terisi; pengguna memperbaiki input dan mengirim ulang.
4. Setelah identitas ditetapkan, aplikasi mengarahkan pengguna ke Mindmaps.
5. Karena belum ada mindmap tersimpan, Mindmaps menampilkan state kosong dengan ajakan membuat mindmap baru.
6. Pengguna memilih aksi membuat mindmap baru dan masuk ke Mindmap Editor.
7. Di kanvas bertekstur kertas, pengguna melihat node pusat "Bayi" dengan tiga cabang aspek perkembangan yang berkode warna.
8. Pengguna menambah node di bawah aspek yang relevan; setiap node baru muncul sebagai kartu kertas dengan titik warna kategori dan terhubung oleh kurva halus yang menggambar dirinya.
9. Pengguna mengubah label node dan memindahkannya pada kanvas sampai struktur terasa rapi.
10. Pengguna menghapus node yang tidak relevan; node dan konektornya hilang dari kanvas.
11. Pengguna memilih aksi simpan; status penyimpanan mengonfirmasi keberhasilan dan mindmap tersimpan pada backend.
12. Jika penyimpanan gagal, pesan kesalahan ditampilkan dan perubahan yang belum tersimpan tetap ada di kanvas; pengguna mencoba menyimpan ulang.
13. Setelah berhasil, pengguna kembali ke Mindmaps dan mindmap barunya tampil sebagai kartu galeri dengan pratinjau mini, bilah kategori berwarna, dan judulnya.

Flow C — Verifikasi kembali dan melanjutkan mindmap tersimpan

1. Pada sesi berikutnya, pengguna membuka Login dan melihat formulir verifikasi pada kartu putih di latar krem, dengan penjelasan bahwa login diperlukan untuk membuka mindmap tersimpan dan melanjutkan pengeditan.
2. Pengguna memasukkan kredensialnya dan mengirim formulir; tombol menampilkan state sibuk.
3. Jika kredensial tidak cocok, pesan kesalahan ditampilkan tanpa mengungkap detail sensitif; pengguna mencoba lagi atau berpindah ke Sign Up.
4. Setelah verifikasi berhasil, aplikasi mengarahkan pengguna ke Mindmaps.
5. Mindmaps memuat daftar mindmap tersimpan; selama pemuatan, placeholder kartu ditampilkan.
6. Jika daftar gagal dimuat, pesan kesalahan dan aksi coba lagi ditampilkan; pengguna memuat ulang tanpa kehilangan konteks halaman.
7. Pengguna memilih kartu mindmap yang ingin dilanjutkan; aplikasi membuka mindmap tersebut di Mindmap Editor.
8. Selama pemuatan, kanvas menampilkan state pemuatan; setelah selesai, node pusat, tiga cabang aspek perkembangan, dan node-node turunannya tampil.
9. Pengguna melanjutkan penyuntingan — menambah, mengubah, atau menghapus node — lalu menyimpan kembali.
10. Jika mindmap gagal dimuat, pesan kesalahan ditampilkan dan pengguna dapat kembali ke Mindmaps untuk mencoba lagi.

Flow D — Menjaga kelengkapan tiga aspek perkembangan

1. Pengguna berada di Mindmap Editor dengan sebuah mindmap terbuka.
2. Pengguna memeriksa bahwa tiga cabang aspek perkembangan hadir: fisik (tomato), kognitif (sage), sosioemosional (teal).
3. Jika salah satu cabang aspek tidak tampil, pengguna menambahkannya kembali sebagai node yang bercabang dari node pusat "Bayi".
4. Pengguna menambahkan node-node topik di bawah masing-masing aspek sampai ketiga aspek terisi.
5. Pengguna menyimpan mindmap; status penyimpanan mengonfirmasi keberhasilan.
6. Mindmap yang tersimpan menampilkan ketiga aspek tersebut saat dibuka kembali dari Mindmaps.

6. Visuals Colors and Theme

Arah kreatif bersifat otoritatif untuk bagian ini. Muse: Charles & Ray Eames — warm mid-century modernism, dengan headline "Peta Tumbuh Kembang Bayi".

Palet (light mode)

Tidak ada biru atau indigo sebagai warna primer. Tidak ada hitam murni (#000000) atau putih murni (#FFFFFF) sebagai ground halaman; putih hanya untuk permukaan.

Tipografi

• Headings: Jost, weight 600–700, sentence case (bukan all-caps), tracking sedikit rapat (-0.01em).
• Body: Literata.
• Skala modular 1.333: 48 / 36 / 27 / 20 / 15 / 13.
• Hero landing: 48px mobile → 72px desktop. Judul bagian: 36px mobile → 48px desktop. Judul node: 27px mobile → 32px desktop. Body: 16–18px dengan line-height 1.6. Teks kartu node: 14–16px. Micro-label: Jost 500, all-caps, tracking 0.08em, 11–12px.
• Ukuran hero dan judul menggunakan clamp(...) dengan ukuran mobile sebagai batas bawah sehingga teks tetap utuh pada 375px, 768px, dan 1280px.

Bahasa bentuk

Organic-modern dengan geometri lembut. Kartu node adalah persegi panjang membulat (radius 12–16px) dengan border hangat 1px (#E8E0D4) dan bayangan offset sangat lembut (0 2px 8px rgba(43,38,32,0.06)). Konektor cabang adalah kurva bezier SVG halus, stroke 2.5px, warna muted warm grey. Tombol berbentuk pill atau membulat lembut (radius 8px). Pembatas bagian adalah garis horizontal tipis 1px (#E8E0D4). Tanpa sudut keras, tanpa neon, tanpa glassmorphism.

Ritme spasi dan layout

Grid modular bergaya galeri. Lebar konten maksimum 1200px dengan padding samping 24px di mobile dan 48px di desktop. Landing adalah narasi vertikal: hero, lalu tiga bagian berkode warna sebagai panel modular. Editor menggunakan kanvas bebas dengan tekstur kertas halus. Halaman daftar mindmap adalah grid kartu (3 kolom desktop, 2 tablet, 1 mobile) dengan whitespace lega. Halaman auth terpusat satu kolom dengan formulir pada kartu putih yang mengambang di ground krem.

Gaya imagery

Ilustrasi dan diagram bergaya gambar tangan yang hangat. Mindmap itu sendiri adalah imagery utama. Ikon mid-century sederhana untuk setiap kategori: tangan kecil untuk fisik, otak atau bola lampu kecil untuk kognitif, wajah tersenyum untuk sosioemosional — digambar dengan goresan tebal dan ramah dalam palet Eames. Tanpa foto stok bayi, tanpa render 3D, tanpa gradien. Bahasa visualnya flat, hangat, dan ilustratif.

7. Signature Design Concept

"Meja Gambar yang Terbuka" — hero landing sebagai poster Eames yang hidup.

Hero memenuhi lebar viewport dengan ground krem #F7F2E8. Dua pertiga kiri didominasi headline Jost 700 "Peta Tumbuh Kembang Bayi" pada 48px mobile / 72px desktop dalam charcoal #2B2620, diikuti satu baris body Literata 18px dalam muted warm grey #8C8175. Di bawahnya, satu tombol pill tomato #C75B39 berlabel "Mulai Membuat Mindmap".

Di sisi kanan, ilustrasi mindmap bergaya gambar tangan mengalir keluar tepi kanan viewport seperti poster yang tidak dibingkai kartu: node pusat "Bayi" dalam tomato, bercabang ke tiga lengan berkode warna — fisik (tomato #C75B39), kognitif (sage #7A9B76), sosioemosional (teal #3A7D7B) — masing-masing dengan node daun yang lebih kecil. Garis cabang adalah kurva bezier halus 2.5px dalam muted warm grey.

Di bawah hero, tiga panel modular berkode warna menyusun urutan galeri: setiap panel adalah permukaan putih dengan border hangat 1px dan bayangan lembut, dengan micro-label Jost 500 all-caps dan titik warna kategori. Komposisinya tidak terpusat, tidak memakai gradient blob, dan tidak memakai biru.

Konsep ini hanya menyusun ulang konten, state, dan kontrol yang sudah diterima — judul, penjelasan, ilustrasi tiga aspek, dan CTA — tanpa menambah perilaku, halaman, atau tujuan baru.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Focal subject: ilustrasi mindmap bergaya gambar tangan dengan node pusat "Bayi" dalam tomato dan tiga lengan berkode warna yang mengalir keluar tepi kanan viewport.
• Input → transformation → outcome: saat pengguna menggulir halaman, garis cabang pada ilustrasi hero menggambar dirinya sendiri (stroke-dashoffset 300ms) dan node-node daun muncul dengan fade dan scale lembut (200ms ease-out); hasilnya adalah diagram yang terbaca lengkap saat hero berada penuh di viewport, tanpa mengubah konten atau menambah perilaku baru.
• Motion vocabulary: transisi lembut seperti film — fade dan scale halus, garis yang menggambar diri, hover node yang mengangkat 2px dengan bayangan melebar, crossfade halaman 250ms. Tanpa spring memantul, tanpa partikel, tanpa parallax yang mengganggu.
• Composed first frame: ground krem penuh, headline besar di kiri, satu baris body di bawahnya, tombol pill tomato, dan ilustrasi mindmap yang sudah terlihat sebagian dengan node pusat "Bayi" dan pangkal tiga lengan cabang — komposisi terbaca utuh bahkan sebelum animasi berjalan.
• Reduced-motion state: dengan prefers-reduced-motion, semua animasi berhenti; garis cabang tampil penuh tanpa menggambar diri, node tampil tanpa fade, dan ilustrasi tetap utuh serta terbaca. Tidak ada konten yang hanya dapat dijangkau melalui gerakan.

Tidak ada permintaan 3D/WebGL eksplisit dari pengguna dan hero dimensionality dari arah kreatif adalah layered_2d, sehingga tidak ada Canvas/R3F/Drei yang diwajibkan.

9. Non-Functional Requirements

• Keterbacaan lintas viewport (explicit, dari arah kreatif): headline, wordmark, label, angka, teks kartu, dan kontrol tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px; teks membungkus atau menskalakan dengan clamp(...) beserta ukuran mobile-nya. Tidak ada elemen lain yang menutupi bagian mana pun dari teks atau kontrol yang dapat dibaca. Imagery dan dekorasi boleh terpotong atau keluar tepi sesuai arah kreatif selama tidak menutupi teks atau kontrol yang dapat dibaca.
• Konten bergerak (explicit, dari arah kreatif): jika ada konten yang bergerak atau dapat digulir, ia boleh melewati tepi viewport atau kontainer, tetapi setiap item harus menjadi terbaca penuh saat melewatinya. Dengan prefers-reduced-motion, gerakan berhenti dan item ditampilkan utuh — membungkus ke baris atau berada dalam baris yang dapat digulir horizontal (overflow-x: auto).
• Aksesibilitas warna (required_inference): teks charcoal #2B2620 di atas ground krem #F7F2E8 dan permukaan putih harus mempertahankan kontras yang memadai untuk teks body dan label; warna kategori tidak boleh menjadi satu-satunya pembawa makna — setiap cabang aspek juga diberi label teks.
• Persistensi (required_inference): mindmap tersimpan pada backend dan tetap terikat pada identitas pengguna yang menyimpannya, sehingga dapat dibuka kembali pada sesi berikutnya.
• Kontinuitas identitas (required_inference): state terlindungi (Mindmaps, Mindmap Editor) hanya tersedia setelah identitas diverifikasi; permukaan akses (Landing, Sign Up, Login) dapat dijangkau secara anonim.
• Performa interaksi (required_inference): penambahan node, penggambaran konektor, dan transisi halaman harus terasa mulus pada kanvas editor agar penyuntingan tidak terputus; animasi mengikuti tempo restrained yang ditetapkan arah kreatif.
• Ketahanan kesalahan (required_inference): kegagalan memuat atau menyimpan mindmap tidak boleh menghilangkan perubahan yang belum tersimpan di kanvas; pengguna harus dapat mencoba ulang.

10. Tech Stack

• Frontend: React (aplikasi web) dengan UI kustom sesuai arah kreatif.
• Backend: Python / FastAPI untuk melayani penyimpanan dan pemuatan mindmap serta penetapan dan verifikasi identitas aplikasi.
• Storage: penyimpanan persisten untuk mindmap dan identitas pengguna, diakses melalui backend.
• Kontainerisasi: Docker dan docker-compose untuk menjalankan aplikasi dan storage secara lokal.
• Kubernetes: tidak disertakan; tidak ada kebutuhan deployment yang menetapkannya dalam lingkup saat ini.

Tidak ada pilihan teknologi lain yang ditetapkan secara eksplisit oleh pengguna, sehingga tidak ada substitusi yang dilakukan.

11. Assumptions and Constraints

• [Assumption — required_inference] Identitas dimiliki aplikasi dan ditetapkan melalui pendaftaran mandiri, karena mindmap harus tetap terikat pada pengguna yang benar agar dapat dibuka kembali pada sesi berikutnya.
• [Assumption — required_inference] Verifikasi kembali dilakukan melalui formulir login pada permukaan akses tersendiri yang dapat dijangkau secara anonim; halaman terlindungi tidak memiliki interaksi yang menetapkan akses ke dirinya sendiri.
• [Assumption — required_inference] Mindmap disimpan pada backend aplikasi, bukan hanya di perangkat pengguna, karena kontrak menyatakan mindmap dapat dibuka kembali pada sesi berikutnya.
• [Constraint — explicit] Mindmap harus mencakup tiga aspek: perkembangan fisik, perkembangan kognitif, dan perkembangan sosioemosional.
• [Constraint — explicit] Tiga aspek perkembangan menggunakan pengodean warna yang konsisten di seluruh produk: fisik = tomato #C75B39, kognitif = sage #7A9B76, sosioemosional = teal #3A7D7B.
• [Constraint — explicit] Palet, tipografi (Jost untuk heading, Literata untuk body), bahasa bentuk, layout, dan gaya imagery mengikuti arah kreatif; biru/indigo sebagai warna primer dan template SaaS biru-putih generik dilarang.
• [Constraint — explicit] Tidak ada foto stok bayi atau orang tua; semua imagery bersifat ilustratif dan diagrammatic.
• [Constraint — explicit] Tidak ada animasi spring yang memantul atau micro-interaction yang terasa kekanak-kanakan; gerakan bersifat lembut dan seperti film.
• [Constraint — explicit] Tidak ada dasbor padat atau tabel data rapat; layout bersifat lega dan bergaya galeri.
• [Constraint — explicit] Hitam murni (#000000) dan putih murni (#FFFFFF) tidak digunakan sebagai ground halaman; putih hanya untuk permukaan.
• [Constraint — scope] Tidak ada kolaborasi multi-pengguna, berbagi publik, komentar, atau kontrol izin berjenjang dalam lingkup saat ini.
• [Constraint — scope] Tidak ada kurikulum, penilaian klinis, diagnosis, skrining tumbuh kembang, atau rekomendasi medis.
• [Constraint — scope] Tidak ada impor/ekspor, integrasi pihak ketiga, atau sinkronisasi lintas perangkat di luar penyimpanan backend aplikasi.
• [Constraint — scope] Tidak ada konten faktual pihak ketiga yang dipasok sebagai sumber isi; isi node mindmap diisi oleh pengguna.
• [Default — not specified by user] Penyimpanan persisten konkret (misalnya basis data relasional) tidak ditetapkan oleh pengguna; pilihan penyimpanan mengikuti kebutuhan backend FastAPI dan tidak mengubah perilaku produk.

12. Glossary

• Mindmap: struktur peta topik yang terdiri dari node pusat dan cabang-cabang turunan, dalam produk ini berpusat pada "Bayi".
• Node: satu kartu kertas pada kanvas mindmap yang memuat label topik dan titik warna kategori cabangnya.
• Node pusat: node akar "Bayi" dari mana tiga cabang aspek perkembangan berasal.
• Aspek perkembangan: salah satu dari tiga kategori wajib — fisik, kognitif, sosioemosional.
• Perkembangan fisik: aspek perkembangan bayi yang berkaitan dengan pertumbuhan dan kemampuan motorik; dikodekan tomato #C75B39.
• Perkembangan kognitif: aspek perkembangan bayi yang berkaitan dengan kemampuan berpikir dan belajar; dikodekan sage #7A9B76.
• Perkembangan sosioemosional: aspek perkembangan bayi yang berkaitan dengan interaksi sosial dan emosi; dikodekan teal #3A7D7B.
• Konektor cabang: kurva bezier halus yang menghubungkan sebuah node dengan node induknya.
• Kanvas: area kerja bebas di Mindmap Editor dengan tekstur kertas halus tempat node disusun.
• Pendaftaran mandiri: penetapan identitas aplikasi oleh pengguna sendiri melalui Sign Up.
• Verifikasi kembali: pemeriksaan identitas melalui Login saat pengguna kembali untuk membuka mindmap tersimpan.
• State terlindungi: mindmap tersimpan dan ruang penyuntingannya, yang hanya tersedia setelah identitas diverifikasi.