System Requirements Document for winter-buatkan

1. Introduction

winter-buatkan adalah sebuah website marketplace dua sisi untuk pasar Indonesia. Produk ini mempertemukan Pembeli (Buyer) yang mencari, membandingkan, dan membeli produk, dengan Penjual (Seller) yang memasang, memperbarui, dan memantau penawaran produknya agar dapat ditemukan dan terjual.

Niat produk yang diturunkan dari sumber: membangun satu marketplace tempat pembeli dapat menelusuri katalog produk, mengevaluasi detail produk, mengumpulkan pilihan ke dalam keranjang, menyelesaikan pemesanan, dan meninjau riwayat pesanannya; dan tempat penjual dapat memasang produk baru, mengedit informasi produk, serta memantau pesanan masuk yang terkait dengan produknya. Identitas, pesanan, daftar produk, dan hubungan kepemilikannya dipertahankan secara durable, dan akses ke data serta pekerjaan penjual dibatasi berdasarkan peran penjual.

Audiens: pengguna ritel Indonesia yang mobile-first, muda hingga menengah, yang berbelanja dan berjualan dari perangkat seluler maupun desktop.

2. System Overview

winter-buatkan adalah aplikasi web marketplace dengan antarmuka kustom milik aplikasi sendiri dan identitas yang dimiliki aplikasi. Dua aktor manusia aktif beroperasi di dalamnya:

• Pembeli (Buyer) — menelusuri dan mencari produk, melihat detail produk, mengumpulkan pilihan ke keranjang, menyelesaikan checkout, dan meninjau pesanan.
• Penjual (Seller) — memasang dan mengedit produk, mengelola daftar produknya, dan memantau pesanan masuk.

Alur anonim dimulai di Landing, yang menjelaskan marketplace, pihak yang dilayani, dan cara berbelanja atau menjual. Sign Up menyediakan pendaftaran mandiri bagi pembeli atau penjual yang mulai menggunakan marketplace, dan Login menyediakan verifikasi kembali bagi pembeli dan penjual untuk mengakses pekerjaan marketplace mereka. Setelah identitas terbentuk, pembeli bekerja melalui Products, Product Details, Cart, Checkout, dan My Orders; penjual bekerja melalui Seller Products, Product Editor, dan Seller Orders.

Backend aplikasi menyimpan identitas, daftar produk, pesanan, dan kepemilikan produk-penjual secara durable, serta menegakkan pembatasan akses berbasis peran penjual pada data dan pekerjaan penjual.

Pengecualian sempit saat ini: tidak ada kapabilitas di luar alur belanja pembeli dan pengelolaan jualan penjual yang dijelaskan di atas. Tidak ada fitur masa depan yang dijanjikan dalam dokumen ini.

2a. Product Interpretation and Delivery Boundary

winter-buatkan dikirim sebagai aplikasi web first-party dengan antarmuka kustom yang dimiliki aplikasi. Identitas dimiliki aplikasi: pembeli dan penjual membuat akun mereka sendiri melalui pendaftaran mandiri dan masuk kembali melalui verifikasi kredensial. Karena pesanan, daftar produk, dan kepemilikan produk harus tetap terikat pada peserta yang benar dan dapat dilanjutkan kembali, permukaan yang menyimpan pekerjaan spesifik aktor bersifat terlindungi, sementara Landing, Login, dan Sign Up dapat dijangkau tanpa identitas.

Penelusuran produk, halaman detail produk, dan halaman masuk pendaftaran dapat dilihat tanpa identitas. Keranjang, checkout, riwayat pesanan pembeli, serta seluruh pekerjaan penjual memerlukan identitas yang sudah terbentuk dan peran yang sesuai. Pembatasan akses ini adalah pembatasan peran pada pekerjaan penjual dan pada penyelesaian pembelian serta riwayat pesanan pembeli; tidak ada model izin lain yang diperkenalkan.

Semua pekerjaan yang dijelaskan di sini bersifat current. Tidak ada horizon masa depan yang diterima, dan tidak ada permukaan pihak ketiga atau eksternal yang menjadi pemilik alur yang diterima.

2b. Source Content Inventory

Tidak ada direktif referensi dengan content_source yang diberikan, sehingga tidak ada inventaris konten sumber yang disertakan.

2c. Page Content and Component Coverage

Landing

• Informasi/state: penjelasan anonim tentang marketplace, pihak yang dilayani (pembeli dan penjual), dan cara berbelanja atau menjual produk. Poster tipografis penuh viewport: tiga kata bertumpuk JUAL, BELI, TEMUKAN dalam Anton, masing-masing pada blok warna penuh-bleed sendiri (hitam di atas paper, putih di atas merah, hitam di atas kuning), dipisahkan aturan hitam 2px. Di bawahnya, pita marquee diagonal hitam dengan teks Anton putih yang menggulirkan nama penjual dan frasa penawaran melintasi viewport.
• Aksi utama: tombol solid hitam MULAI BELANJA dengan bayangan offset kuning, dipin di kiri-bawah hero, 32px dari tepi, menuju Products. Tautan ke Login dan Sign Up.
• Aksi pendukung: navigasi bar atas tetap dengan wordmark winter-buatkan dalam Anton 24px all-caps dan garis bawah merah yang beranimasi saat hover; tautan ke Products, Login, dan Sign Up.
• Entitas domain: tidak ada entitas yang dimiliki; hanya konten pengantar dan navigasi.
• Tanggung jawab komponen: hero poster tipografis; pita marquee diagonal; bar navigasi tetap; tombol CTA.
• State: loading — hero dirender segera karena statis; empty — tidak berlaku; success — hero dan navigasi tampil; error — tidak berlaku; recovery — jika marquee tidak dapat dimuat, baris tetap dapat digulir horizontal.

Login

• Informasi/state: permukaan verifikasi kembali untuk pembeli dan penjual. Judul Anton besar, panel paper dengan bidang Archivo.
• Aksi utama: mengirim kredensial untuk masuk dan melanjutkan ke pekerjaan marketplace yang sesuai peran.
• Aksi pendukung: tautan ke Sign Up bagi pengguna yang belum memiliki akun; tautan kembali ke Landing.
• Entitas domain: identitas pengguna (kredensial, peran pembeli atau penjual).
• Tanggung jawab komponen: formulir kredensial; penanganan kesalahan kredensial; pengalihan pasca-masuk.
• State: loading — tombol kirim menampilkan status proses; empty — bidang kosong dengan label; success — identitas terverifikasi dan pengguna diarahkan ke pekerjaan marketplace-nya; error — kredensial tidak cocok ditampilkan sebagai pesan kesalahan tanpa mengungkap keberadaan akun; recovery — pengguna dapat memperbaiki input dan mengirim ulang, atau beralih ke Sign Up.

Sign Up

• Informasi/state: permukaan pendaftaran mandiri bagi pembeli atau penjual yang mulai menggunakan marketplace. Judul Anton besar, panel paper dengan bidang Archivo.
• Aksi utama: membuat akun baru dengan memilih peran pembeli atau penjual, lalu mengirim pendaftaran.
• Aksi pendukung: tautan ke Login bagi pengguna yang sudah memiliki akun; tautan kembali ke Landing.
• Entitas domain: identitas pengguna baru (kredensial, peran pembeli atau penjual).
• Tanggung jawab komponen: formulir pendaftaran; pemilihan peran; validasi input; pengalihan pasca-pendaftaran.
• State: loading — tombol kirim menampilkan status proses; empty — bidang kosong dengan label; success — akun terbentuk dan pengguna diarahkan ke pekerjaan marketplace sesuai perannya; error — input tidak valid atau kredensial sudah dipakai ditampilkan sebagai pesan kesalahan; recovery — pengguna dapat memperbaiki input dan mengirim ulang, atau beralih ke Login.

Products

• Informasi/state: ruang penelusuran dan pencarian produk yang tersedia bagi pembeli. Grid editorial asimetris: satu kartu produk hero selebar 2× dengan gambar penuh-bleed dan harga Anton besar, dikelilingi kartu-kartu lebih kecil dalam grid 3 kolom rapat. Kartu produk bertepi keras tanpa radius, dengan hover yang mengubah latar dari paper ke merah secara snap.
• Aksi utama: menelusuri daftar produk dan mencari produk; membuka Product Details dari sebuah kartu.
• Aksi pendukung: menambahkan produk ke keranjang dari kartu; navigasi ke Cart; navigasi ke Login/Sign Up.
• Entitas domain: produk (nama, harga, gambar, penjual pemilik).
• Tanggung jawab komponen: grid produk asimetris; kontrol pencarian; kartu produk dengan hover snap; kontrol tambah ke keranjang.
• State: loading — grid menampilkan placeholder kartu; empty — pesan bahwa tidak ada produk yang cocok dengan pencarian, dengan saran mengubah kata kunci; success — daftar produk tampil; error — kegagalan memuat daftar ditampilkan dengan aksi coba lagi; recovery — pengguna dapat mengulang pencarian atau memuat ulang daftar.

Product Details

• Informasi/state: informasi lengkap satu produk agar pembeli dapat mengevaluasinya sebelum membeli: nama, harga, gambar, deskripsi, dan penjual pemiliknya. Gambar produk diperlakukan sebagai potongan poster dengan latar warna datar.
• Aksi utama: menambahkan produk ke keranjang; melanjutkan ke Cart.
• Aksi pendukung: kembali ke Products; navigasi ke Login/Sign Up bila pembeli belum beridentitas.
• Entitas domain: produk (nama, harga, gambar, deskripsi, penjual pemilik).
• Tanggung jawab komponen: panel gambar produk; blok informasi dan harga; kontrol tambah ke keranjang.
• State: loading — kerangka detail produk; empty — produk tidak ditemukan ditampilkan dengan tautan kembali ke Products; success — detail produk tampil; error — kegagalan memuat detail ditampilkan dengan aksi coba lagi; recovery — pengguna dapat kembali ke Products atau memuat ulang.

Cart

• Informasi/state: daftar produk yang dipilih pembeli beserta jumlah dan total. Tata letak split dua kolom: kolom kiri panel hitam dengan angka Anton putih untuk total pesanan; kolom kanan paper-putih dengan bidang Archivo.
• Aksi utama: meninjau item yang dipilih dan melanjutkan ke Checkout.
• Aksi pendukung: mengubah jumlah item; menghapus item dari keranjang; kembali ke Products.
• Entitas domain: item keranjang (produk, jumlah, harga satuan, subtotal), total pesanan.
• Tanggung jawab komponen: daftar item keranjang; kontrol jumlah dan hapus; panel total hitam; tombol lanjut ke checkout.
• State: loading — kerangka daftar item; empty — pesan keranjang kosong dengan tautan ke Products; success — item dan total tampil; error — kegagalan memperbarui keranjang ditampilkan dengan aksi coba lagi; recovery — pengguna dapat mengulang perubahan atau menghapus item bermasalah.
• Akses: memerlukan identitas pembeli yang sudah terbentuk.

Checkout

• Informasi/state: alur penyelesaian pemesanan dan pembelian produk oleh pembeli, termasuk ringkasan item dan total. Tata letak split dua kolom: kolom kiri panel hitam dengan angka Anton putih untuk total pesanan; kolom kanan paper-putih dengan bidang Archivo untuk data pemesanan.
• Aksi utama: mengisi data pemesanan yang diperlukan dan menyelesaikan pembelian.
• Aksi pendukung: kembali ke Cart untuk meninjau ulang; navigasi ke My Orders setelah selesai.
• Entitas domain: pesanan (item, jumlah, total, data pemesanan, pembeli pemilik), produk.
• Tanggung jawab komponen: formulir data pemesanan; panel ringkasan dan total; tombol selesaikan pembelian; penanganan kegagalan penyelesaian.
• State: loading — tombol selesaikan menampilkan status proses; empty — checkout tanpa item diarahkan kembali ke Cart; success — pesanan tercatat dan pembeli diarahkan ke My Orders; error — kegagalan penyelesaian ditampilkan dengan aksi coba lagi tanpa menggandakan pesanan; recovery — pembeli dapat mengulang penyelesaian atau kembali ke Cart.
• Akses: memerlukan identitas pembeli yang sudah terbentuk.

My Orders

• Informasi/state: riwayat pesanan yang telah dibuat pembeli, dengan status dan total tiap pesanan.
• Aksi utama: meninjau pesanan yang telah dibuat.
• Aksi pendukung: membuka rincian pesanan; kembali ke Products untuk berbelanja lagi.
• Entitas domain: pesanan (item, jumlah, total, status, pembeli pemilik).
• Tanggung jawab komponen: daftar pesanan; blok rincian pesanan; penanda status.
• State: loading — kerangka daftar pesanan; empty — pesan belum ada pesanan dengan tautan ke Products; success — daftar pesanan tampil; error — kegagalan memuat riwayat ditampilkan dengan aksi coba lagi; recovery — pembeli dapat memuat ulang riwayat.
• Akses: memerlukan identitas pembeli yang sudah terbentuk.

Seller Products

• Informasi/state: ruang revisitable bagi penjual untuk menelusuri dan mengelola daftar produknya, termasuk status tiap produk.
• Aksi utama: menelusuri daftar produk milik penjual dan membuka Product Editor untuk memasang produk baru atau mengedit produk yang ada.
• Aksi pendukung: menghapus produk dari daftar; navigasi ke Seller Orders.
• Entitas domain: produk (nama, harga, gambar, deskripsi, penjual pemilik).
• Tanggung jawab komponen: daftar produk penjual; kontrol tambah produk; kontrol edit dan hapus; penanda status produk.
• State: loading — kerangka daftar produk; empty — pesan belum ada produk dengan aksi memasang produk pertama; success — daftar produk penjual tampil; error — kegagalan memuat daftar ditampilkan dengan aksi coba lagi; recovery — penjual dapat memuat ulang daftar.
• Akses: memerlukan identitas penjual yang sudah terbentuk; data dan pekerjaan penjual dibatasi berdasarkan peran penjual.

Product Editor

• Informasi/state: ruang fokus untuk memasang produk baru dan mengedit informasi produk penjual, termasuk nama, harga, gambar, dan deskripsi.
• Aksi utama: menyimpan produk baru atau menyimpan perubahan pada produk yang ada.
• Aksi pendukung: membatalkan penyuntingan dan kembali ke Seller Products; mengunggah atau mengganti gambar produk.
• Entitas domain: produk (nama, harga, gambar, deskripsi, penjual pemilik).
• Tanggung jawab komponen: formulir produk; kontrol unggah gambar; validasi input; tombol simpan dan batal.
• State: loading — formulir memuat data produk yang diedit; empty — formulir kosong untuk produk baru; success — produk tersimpan dan penjual kembali ke Seller Products; error — input tidak valid atau penyimpanan gagal ditampilkan dengan pesan kesalahan; recovery — penjual dapat memperbaiki input dan menyimpan ulang tanpa kehilangan isian.
• Akses: memerlukan identitas penjual yang sudah terbentuk; data dan pekerjaan penjual dibatasi berdasarkan peran penjual.

Seller Orders

• Informasi/state: daftar pesanan masuk yang terkait dengan produk penjual, termasuk item dan jumlahnya.
• Aksi utama: memantau pesanan masuk yang terkait dengan produk penjual.
• Aksi pendukung: membuka rincian pesanan masuk; navigasi ke Seller Products.
• Entitas domain: pesanan (item, jumlah, total, pembeli pemilik), produk (penjual pemilik).
• Tanggung jawab komponen: daftar pesanan masuk; blok rincian pesanan; penanda produk terkait.
• State: loading — kerangka daftar pesanan masuk; empty — pesan belum ada pesanan masuk; success — daftar pesanan masuk tampil; error — kegagalan memuat daftar ditampilkan dengan aksi coba lagi; recovery — penjual dapat memuat ulang daftar.
• Akses: memerlukan identitas penjual yang sudah terbentuk; data dan pekerjaan penjual dibatasi berdasarkan peran penjual.

3. Functional Requirements

FR-1 — Membangun website marketplace (explicit) As a Pembeli (Buyer) and Penjual (Seller), I should have a marketplace website where buyers can find and purchase products and sellers can offer and manage their products, so that both sides of the marketplace can complete their work in one place.

• Trigger/input: pengguna membuka marketplace.
• Observable result: marketplace tersedia dengan alur belanja pembeli dan alur pengelolaan jualan penjual.
• Access state: sebagian permukaan dapat dijangkau tanpa identitas; pekerjaan spesifik aktor memerlukan identitas.
• Failure/recovery: bila permukaan gagal dimuat, pengguna dapat memuat ulang.
• Continuation: pengguna melanjutkan ke penelusuran produk atau ke pekerjaan penjualannya.
• Owner: seluruh permukaan first-party yang tercantum di bagian 2c.

FR-2 — Pendaftaran mandiri atau login pembeli sebelum menyelesaikan pembelian dan mengakses riwayat pesanan (required_inference) As a Pembeli (Buyer), I should be able to register myself or log in before completing a purchase and accessing my order history, so that my orders and their ownership remain bound to me and can be resumed.

• Trigger/input: pembeli memilih untuk menyelesaikan pembelian atau membuka riwayat pesanannya tanpa identitas aktif.
• Observable result: pembeli diarahkan ke Sign Up atau Login, dan setelah identitas terbentuk, dapat melanjutkan ke Checkout atau My Orders.
• Access state: Sign Up dan Login dapat dijangkau tanpa identitas; Checkout dan My Orders memerlukan identitas pembeli.
• Failure/recovery: kredensial tidak cocok atau input tidak valid ditampilkan sebagai pesan kesalahan, dan pembeli dapat memperbaiki input atau beralih antara pendaftaran dan login.
• Continuation: pembeli melanjutkan ke penyelesaian pembelian atau ke riwayat pesanannya.
• Owner: Sign Up, Login, Checkout, My Orders.

FR-3 — Pendaftaran mandiri atau login penjual sebelum memasang, mengubah, atau memantau data marketplace miliknya (required_inference) As a Penjual (Seller), I should be able to register myself or log in before listing, changing, or monitoring my marketplace data, so that my product listings and incoming orders remain bound to me.

• Trigger/input: penjual memilih untuk memasang, mengubah, atau memantau data marketplace miliknya tanpa identitas aktif.
• Observable result: penjual diarahkan ke Sign Up atau Login, dan setelah identitas terbentuk, dapat melanjutkan ke pekerjaan penjualannya.
• Access state: Sign Up dan Login dapat dijangkau tanpa identitas; Seller Products, Product Editor, dan Seller Orders memerlukan identitas penjual.
• Failure/recovery: kredensial tidak cocok atau input tidak valid ditampilkan sebagai pesan kesalahan, dan penjual dapat memperbaiki input atau beralih antara pendaftaran dan login.
• Continuation: penjual melanjutkan ke pengelolaan produk atau pemantauan pesanan masuk.
• Owner: Sign Up, Login, Seller Products, Product Editor, Seller Orders.

FR-4 — Mempertahankan identitas, pesanan, daftar produk, dan hubungan kepemilikannya secara durable (required_inference) As a Pembeli (Buyer) and Penjual (Seller), I should have my identity, orders, product listings, and their ownership relationships retained durably, so that my work persists across sessions and remains attached to the correct participant.

• Trigger/input: pembeli atau penjual membuat akun, menyimpan produk, atau menyelesaikan pesanan.
• Observable result: identitas, daftar produk, pesanan, dan kepemilikan produk-penjual tetap tersedia saat pengguna kembali.
• Access state: data spesifik aktor hanya dapat diakses oleh aktor pemiliknya.
• Failure/recovery: bila pemuatan data gagal, pengguna dapat memuat ulang tanpa kehilangan data yang sudah tersimpan.
• Continuation: pengguna melanjutkan pekerjaannya dari keadaan yang tersimpan.
• Owner: backend aplikasi, ditampilkan melalui My Orders, Seller Products, Product Editor, Seller Orders.

FR-5 — Membatasi akses ke data dan pekerjaan penjual berdasarkan peran penjual (required_inference) As a Penjual (Seller), I should have access to seller data and seller work restricted by the seller role, so that seller-side data and work remain limited to the correct role.

• Trigger/input: pengguna mencoba membuka permukaan atau data penjual.
• Observable result: hanya pengguna dengan peran penjual yang dapat mengakses data dan pekerjaan penjual.
• Access state: Seller Products, Product Editor, dan Seller Orders dibatasi berdasarkan peran penjual.
• Failure/recovery: akses tanpa peran yang sesuai tidak membuka data penjual, dan pengguna diarahkan untuk masuk dengan identitas yang sesuai.
• Continuation: penjual yang sah melanjutkan pekerjaannya; pengguna lain kembali ke permukaan yang dapat dijangkau.
• Owner: backend aplikasi, ditegakkan pada Seller Products, Product Editor, Seller Orders.

FR-6 — Menelusuri dan mencari produk (required_inference) As a Pembeli (Buyer), I should be able to browse and search available products, so that I can find products I want to buy.

• Trigger/input: pembeli membuka Products dan memasukkan kata kunci atau menelusuri daftar.
• Observable result: daftar produk yang tersedia ditampilkan, dan hasil pencarian menyempit sesuai kata kunci.
• Access state: dapat dijangkau tanpa identitas.
• Failure/recovery: bila tidak ada produk yang cocok, pesan kosong ditampilkan dengan saran mengubah kata kunci; bila daftar gagal dimuat, pembeli dapat mencoba lagi.
• Continuation: pembeli membuka Product Details dari produk yang dipilih.
• Owner: Products.

FR-7 — Melihat detail produk (required_inference) As a Pembeli (Buyer), I should be able to view complete product information, so that I can evaluate a product before buying it.

• Trigger/input: pembeli memilih sebuah produk dari Products.
• Observable result: nama, harga, gambar, deskripsi, dan penjual pemilik produk ditampilkan.
• Access state: dapat dijangkau tanpa identitas.
• Failure/recovery: bila produk tidak ditemukan, pesan ditampilkan dengan tautan kembali ke Products; bila detail gagal dimuat, pembeli dapat mencoba lagi.
• Continuation: pembeli menambahkan produk ke keranjang atau kembali menelusuri produk.
• Owner: Product Details.

FR-8 — Menampung dan meninjau produk yang dipilih sebelum melanjutkan pemesanan (required_inference) As a Pembeli (Buyer), I should be able to hold and review the products I have selected before continuing to order, so that I can confirm my selection and its total.

• Trigger/input: pembeli menambahkan produk ke keranjang dan membuka Cart.
• Observable result: item yang dipilih, jumlah, dan total pesanan ditampilkan.
• Access state: memerlukan identitas pembeli yang sudah terbentuk.
• Failure/recovery: bila keranjang kosong, pesan kosong ditampilkan dengan tautan ke Products; bila pembaruan keranjang gagal, pembeli dapat mencoba lagi.
• Continuation: pembeli melanjutkan ke Checkout atau kembali menambah produk.
• Owner: Cart.

FR-9 — Menyelesaikan pemesanan dan pembelian produk (required_inference) As a Pembeli (Buyer), I should be able to complete the ordering and purchase of products, so that I obtain the products I selected.

• Trigger/input: pembeli membuka Checkout dari keranjang dan mengisi data pemesanan yang diperlukan.
• Observable result: pesanan tercatat dengan item, jumlah, dan totalnya, dan pembeli diarahkan ke My Orders.
• Access state: memerlukan identitas pembeli yang sudah terbentuk.
• Failure/recovery: bila penyelesaian gagal, pesan kesalahan ditampilkan dan pembeli dapat mencoba lagi tanpa menggandakan pesanan; bila checkout tidak memiliki item, pembeli diarahkan kembali ke Cart.
• Continuation: pembeli meninjau pesanannya di My Orders.
• Owner: Checkout.

FR-10 — Meninjau pesanan yang telah dibuat (required_inference) As a Pembeli (Buyer), I should be able to review the orders I have made, so that I can track what I have purchased.

• Trigger/input: pembeli membuka My Orders.
• Observable result: daftar pesanan yang telah dibuat beserta status dan totalnya ditampilkan.
• Access state: memerlukan identitas pembeli yang sudah terbentuk.
• Failure/recovery: bila belum ada pesanan, pesan kosong ditampilkan dengan tautan ke Products; bila riwayat gagal dimuat, pembeli dapat mencoba lagi.
• Continuation: pembeli membuka rincian pesanan atau kembali berbelanja.
• Owner: My Orders.

FR-11 — Memasang produk baru (required_inference) As a Penjual (Seller), I should be able to list a new product, so that buyers can find and purchase it.

• Trigger/input: penjual membuka Product Editor dari Seller Products dan mengisi informasi produk.
• Observable result: produk baru tersimpan dan muncul di daftar produk penjual.
• Access state: memerlukan identitas penjual yang sudah terbentuk; dibatasi berdasarkan peran penjual.
• Failure/recovery: bila input tidak valid atau penyimpanan gagal, pesan kesalahan ditampilkan dan penjual dapat memperbaiki input lalu menyimpan ulang tanpa kehilangan isian.
• Continuation: penjual kembali ke Seller Products dan melihat produk barunya.
• Owner: Product Editor.

FR-12 — Mengedit informasi produk penjual (required_inference) As a Penjual (Seller), I should be able to edit my product information, so that my listings stay accurate and findable.

• Trigger/input: penjual membuka Product Editor untuk produk yang sudah ada.
• Observable result: perubahan pada nama, harga, gambar, atau deskripsi produk tersimpan dan tercermin di daftar produk penjual.
• Access state: memerlukan identitas penjual yang sudah terbentuk; dibatasi berdasarkan peran penjual.
• Failure/recovery: bila input tidak valid atau penyimpanan gagal, pesan kesalahan ditampilkan dan penjual dapat memperbaiki input lalu menyimpan ulang tanpa kehilangan isian.
• Continuation: penjual kembali ke Seller Products dan melihat perubahan.
• Owner: Product Editor.

FR-13 — Menelusuri dan mengelola daftar produk penjual (required_inference) As a Penjual (Seller), I should be able to browse and manage my product listings, so that I can keep my offerings in order.

• Trigger/input: penjual membuka Seller Products.
• Observable result: daftar produk milik penjual beserta statusnya ditampilkan, dan penjual dapat membuka editor atau menghapus produk.
• Access state: memerlukan identitas penjual yang sudah terbentuk; dibatasi berdasarkan peran penjual.
• Failure/recovery: bila belum ada produk, pesan kosong ditampilkan dengan aksi memasang produk pertama; bila daftar gagal dimuat, penjual dapat mencoba lagi.
• Continuation: penjual membuka Product Editor atau melanjutkan ke Seller Orders.
• Owner: Seller Products.

FR-14 — Memantau pesanan masuk yang terkait dengan produk penjual (required_inference) As a Penjual (Seller), I should be able to monitor incoming orders related to my products, so that I know what has been ordered from me.

• Trigger/input: penjual membuka Seller Orders.
• Observable result: daftar pesanan masuk yang terkait dengan produk penjual beserta item dan jumlahnya ditampilkan.
• Access state: memerlukan identitas penjual yang sudah terbentuk; dibatasi berdasarkan peran penjual.
• Failure/recovery: bila belum ada pesanan masuk, pesan kosong ditampilkan; bila daftar gagal dimuat, penjual dapat mencoba lagi.
• Continuation: penjual membuka rincian pesanan masuk atau kembali ke Seller Products.
• Owner: Seller Orders.

4. User Personas

Pembeli (Buyer)

Konteks produk: Pembeli adalah pengguna yang mencari dan menelusuri produk di marketplace, membandingkan penawaran, lalu menyelesaikan pembelian. Ia bekerja terutama dari perangkat seluler, sering kali tanpa identitas aktif saat mulai menelusuri.

Tujuan utama: menemukan produk yang diinginkan dan menyelesaikan pembelian atas produk yang dipilih.

Tanggung jawab yang diterima: mencari produk, melihat detail produk, dan melakukan pemesanan. Tanggung jawab berulangnya adalah menelusuri katalog, mengevaluasi detail produk, mengumpulkan pilihan ke keranjang, menyelesaikan checkout, dan meninjau riwayat pesanannya.

Input dan keputusan: kata kunci pencarian; pemilihan produk dari daftar; keputusan menambahkan produk ke keranjang; keputusan menyelesaikan pembelian; data pemesanan yang diperlukan saat checkout.

Interaksi dengan peserta lain: Pembeli berinteraksi dengan Penjual secara tidak langsung melalui daftar produk dan detail produk yang dipasang penjual, dan pesanannya menjadi pesanan masuk yang dipantau penjual. Pembeli juga berinteraksi dengan permukaan identitas Sign Up dan Login untuk membentuk dan memverifikasi identitasnya sebelum menyelesaikan pembelian dan mengakses riwayat pesanannya.

Keberhasilan yang dapat diamati: pembelian selesai atas produk yang dipilih, dan pesanan tersebut tersedia untuk ditinjau di riwayat pesanannya.

Yang membedakan perannya: Pembeli adalah sisi permintaan — ia mengonsumsi katalog dan menghasilkan pesanan. Ia tidak mengelola daftar produk dan tidak memantau pesanan masuk; pekerjaannya berakhir pada pesanan yang tercatat dan dapat ditinjau.

Penjual (Seller)

Konteks produk: Penjual adalah pengguna yang menawarkan produk di marketplace dan mengelola daftar jualannya agar dapat ditemukan pembeli. Ia bekerja melalui permukaan penjual yang dibatasi berdasarkan peran penjual.

Tujuan utama: produknya terjual melalui marketplace.

Tanggung jawab yang diterima: memasang dan memperbarui informasi produk serta memantau pesanan masuk. Tanggung jawab berulangnya adalah memasang produk baru, mengedit informasi produk, menelusuri dan mengelola daftar produknya, dan memantau pesanan masuk yang terkait dengan produknya.

Input dan keputusan: informasi produk (nama, harga, gambar, deskripsi); keputusan memasang produk baru atau mengedit produk yang ada; keputusan menghapus produk dari daftar; pemantauan pesanan masuk.

Interaksi dengan peserta lain: Penjual berinteraksi dengan Pembeli secara tidak langsung — produk yang dipasangnya menjadi yang ditelusuri dan dibeli Pembeli, dan pesanan Pembeli menjadi pesanan masuk yang dipantaunya. Penjual juga berinteraksi dengan permukaan identitas Sign Up dan Login untuk membentuk dan memverifikasi identitasnya sebelum memasang, mengubah, atau memantau data marketplace miliknya.

Keberhasilan yang dapat diamati: produk penjual tersedia dan dapat ditemukan di marketplace, dan pesanan masuk yang terkait dengan produknya terlihat di daftar pesanan masuk.

Yang membedakan perannya: Penjual adalah sisi penawaran — ia menghasilkan dan memelihara katalog, dan pekerjaannya berlanjut sebagai pemantauan pesanan masuk. Ia tidak menyelesaikan pembelian dan tidak memiliki riwayat pesanan pembeli; aksesnya ke data dan pekerjaan penjual dibatasi berdasarkan peran penjual.

5. Core User Flows

Alur 1 — Pembeli menemukan dan membeli produk

1. Konteks awal: Pembeli membuka Landing tanpa identitas aktif. Ia melihat poster tipografis JUAL / BELI / TEMUKAN dan pita marquee nama penjual dan frasa penawaran.
2. Pembeli menekan tombol MULAI BELANJA dan masuk ke Products.
3. Di Products, Pembeli memasukkan kata kunci atau menelusuri grid editorial asimetris. Hasil pencarian menyempit sesuai kata kunci. Bila tidak ada produk yang cocok, ia melihat pesan kosong dan mengubah kata kuncinya.
4. Pembeli memilih sebuah produk dan membuka Product Details. Ia melihat nama, harga, gambar, deskripsi, dan penjual pemilik produk.
5. Pembeli memutuskan untuk menambahkan produk ke keranjang. Bila ia belum beridentitas, ia diarahkan ke Sign Up atau Login; setelah identitasnya terbentuk, ia melanjutkan.
6. Di Cart, Pembeli meninjau item, jumlah, dan total pada panel hitam dengan angka Anton putih. Ia dapat mengubah jumlah atau menghapus item. Bila keranjang kosong, ia melihat pesan kosong dengan tautan ke Products.
7. Pembeli melanjutkan ke Checkout, mengisi data pemesanan yang diperlukan pada kolom paper-putih, dan meninjau ringkasan serta total di panel hitam.
8. Pembeli menyelesaikan pembelian. Bila penyelesaian gagal, ia melihat pesan kesalahan dan dapat mencoba lagi tanpa menggandakan pesanan.
9. Hasil yang dapat diamati: pesanan tercatat dengan item, jumlah, dan totalnya, dan Pembeli diarahkan ke My Orders.
10. Langkah berikutnya: Pembeli meninjau pesanannya di My Orders, membuka rinciannya, atau kembali ke Products untuk berbelanja lagi.

Alur 2 — Pembeli meninjau riwayat pesanannya

1. Konteks awal: Pembeli sudah memiliki identitas dan setidaknya satu pesanan.
2. Pembeli membuka My Orders. Bila ia belum beridentitas, ia diarahkan ke Login atau Sign Up terlebih dahulu.
3. Hasil yang dapat diamati: daftar pesanan yang telah dibuat beserta status dan totalnya ditampilkan.
4. Kegagalan dan pemulihan: bila belum ada pesanan, ia melihat pesan kosong dengan tautan ke Products; bila riwayat gagal dimuat, ia dapat mencoba lagi.
5. Langkah berikutnya: Pembeli membuka rincian pesanan atau kembali ke Products.

Alur 3 — Penjual memasang produk baru

1. Konteks awal: Penjual membuka Seller Products tanpa identitas aktif dan diarahkan ke Sign Up atau Login.
2. Penjual mendaftar sendiri atau masuk. Setelah identitasnya terbentuk dan peran penjualnya dikenali, ia dapat mengakses pekerjaan penjualannya.
3. Di Seller Products, Penjual melihat daftar produknya. Bila belum ada produk, ia melihat pesan kosong dengan aksi memasang produk pertama.
4. Penjual membuka Product Editor dan mengisi nama, harga, gambar, dan deskripsi produk baru.
5. Penjual menyimpan produk. Bila input tidak valid atau penyimpanan gagal, ia melihat pesan kesalahan dan dapat memperbaiki input lalu menyimpan ulang tanpa kehilangan isian.
6. Hasil yang dapat diamati: produk baru tersimpan dan muncul di daftar produk penjual.
7. Langkah berikutnya: Penjual kembali ke Seller Products dan melihat produk barunya, atau melanjutkan ke Seller Orders.

Alur 4 — Penjual mengedit informasi produk

1. Konteks awal: Penjual sudah beridentitas dan memiliki setidaknya satu produk di Seller Products.
2. Penjual memilih produk dan membuka Product Editor.
3. Penjual mengubah nama, harga, gambar, atau deskripsi produk.
4. Penjual menyimpan perubahan. Bila input tidak valid atau penyimpanan gagal, ia melihat pesan kesalahan dan dapat memperbaiki input lalu menyimpan ulang tanpa kehilangan isian.
5. Hasil yang dapat diamati: perubahan tersimpan dan tercermin di daftar produk penjual.
6. Langkah berikutnya: Penjual kembali ke Seller Products dan melihat perubahannya.

Alur 5 — Penjual memantau pesanan masuk

1. Konteks awal: Penjual sudah beridentitas dan memiliki produk yang dipesan Pembeli.
2. Penjual membuka Seller Orders.
3. Hasil yang dapat diamati: daftar pesanan masuk yang terkait dengan produk penjual beserta item dan jumlahnya ditampilkan.
4. Kegagalan dan pemulihan: bila belum ada pesanan masuk, ia melihat pesan kosong; bila daftar gagal dimuat, ia dapat mencoba lagi.
5. Langkah berikutnya: Penjual membuka rincian pesanan masuk atau kembali ke Seller Products.

Alur 6 — Penjual mengelola daftar produknya

1. Konteks awal: Penjual sudah beridentitas dan membuka Seller Products.
2. Penjual menelusuri daftar produknya beserta status tiap produk.
3. Penjual memutuskan untuk membuka Product Editor pada sebuah produk, atau menghapus produk dari daftar.
4. Hasil yang dapat diamati: daftar produk penjual mencerminkan keputusan tersebut.
5. Kegagalan dan pemulihan: bila daftar gagal dimuat, ia dapat mencoba lagi.
6. Langkah berikutnya: Penjual melanjutkan ke Product Editor atau ke Seller Orders.

6. Visuals Colors and Theme

Arah kreatif bersifat otoritatif untuk bagian ini.

Muse dan headline: Paula Scher. Headline arah: typographic maximalism for a marketplace that refuses to be a template — pasar yang ramai, bukan utilitas yang tenang.

Palet (light mode):

Rasio warna kurang lebih 60% paper ground / 25% tipografi dan aturan hitam / 10% blok merah / 5% aksen kuning. Warna selalu datar dan bertepi keras — tidak ada gradien.

Tipografi:

• Display/heading: Anton, all-caps, leading 0.9, letterspacing -0.02em. Non-negotiable untuk display.
• Body: Archivo pada berat regular, line-height 1.5.
• Subhead dan label seksi: Archivo Black.
• Skala: modular 1.5 untuk display, 1.25 untuk UI. Display hero clamp(56px, 12vw, 160px); headline seksi clamp(36px, 7vw, 72px); subhead 28px; body 18px; UI 16px; metadata 14px; label uppercase 12px dengan tracking 0.1em.

Bahasa bentuk: hanya tepi keras — border-radius nol pada kartu, tombol, dan input. Pita diagonal dan strip tipografi terotasi memotong seksi. Blok warna adalah persegi sempurna yang bleed ke tepi viewport. Tombol adalah persegi solid dengan border hitam 2px dan bayangan offset keras 4px 4px 0 #111. Chip kategori adalah tag persegi dengan satu sudut terpotong melalui clip-path: polygon(...).

Ritme spasi: grid poster dengan blok warna penuh-lebar sebagai pemisah seksi; padding seksi yang lebar dan konsisten; aturan hitam 2px sebagai pemisah tipografis.

Gaya imagery: fotografi produk diperlakukan sebagai potongan poster — kontras tinggi, crop rapat, latar warna datar (merah, kuning, atau paper). Tidak ada foto lifestyle stok. Avatar penjual duotone (hitam + satu aksen). Header kategori memakai pictogram besar bergaya Scher: sederhana, tebal, satu warna, terbaca seperti signage transit tetapi lebih lantang. Sesekali gambar produk penuh-bleed dengan pita merah diagonal memotong sepertiga bawah, membawa nama produk dalam Anton putih.

Yang dihindari: border-radius pada kartu, tombol, atau input; gradient blob atau bayangan lembut; hero terpusat dengan paragraf subteks dan tombol biru; Inter, Roboto, Poppins, atau sans netral sebagai suara heading; grid kartu identik dengan hover-lift beradius 12px dan bayangan lembut; biru/indigo primer (#0057FF, #2563EB, #4F46E5); foto lifestyle stok; animasi dekoratif yang melunak perlahan.

Keterbacaan: headline, wordmark, label, angka, serta teks dan kontrol kartu tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskala (misalnya font-size: clamp(...) dengan ukuran selulernya) agar muat, dan tidak ada elemen lain yang menutupi bagian mana pun darinya. Gambar, dekorasi, dan gerak mengikuti arah kreatif dan boleh terpotong, bleed, terotasi, tumpang tindih, atau terpotong persis seperti yang diminta arah, selama tidak menutupi teks atau kontrol yang terbaca.

7. Signature Design Concept

Poster wall pasar. Layar pertama Landing adalah poster tipografis penuh viewport, bukan carousel produk. Tiga kata bertumpuk — JUAL, BELI, TEMUKAN — mengisi viewport dari tepi ke tepi dalam Anton pada clamp(56px, 12vw, 160px), masing-masing duduk di blok warna penuh-bleed sendiri: JUAL hitam di atas paper #F4F1EA, BELI putih di atas merah #E63329, TEMUKAN hitam di atas kuning #F5C400. Aturan hitam tipis 2px memisahkan setiap blok. Di bawah tumpukan, pita marquee diagonal hitam dengan teks Anton putih menggulirkan nama penjual dan frasa penawaran melintasi viewport. Satu tombol solid hitam MULAI BELANJA dengan bayangan offset kuning dipin di kiri-bawah hero, 32px dari tepi. Tidak ada headline terpusat, tidak ada paragraf subteks, tidak ada gradient blob — tipografinya adalah hero.

Konsep ini hanya menyusun ulang konten, state, dan kontrol yang sudah diterima: penjelasan marketplace, pihak yang dilayani, cara berbelanja atau menjual, dan navigasi ke Products, Login, serta Sign Up. Tidak ada perilaku, halaman, atau tujuan baru yang diperkenalkan.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: flat

Landing Hero Motion Brief

• Focal subject: tumpukan tipografis tiga kata JUAL / BELI / TEMUKAN pada blok warna penuh-bleed, dengan pita marquee diagonal di bawahnya.
• Input → transformation → outcome: saat Landing dimuat, setiap baris headline meluncur naik dari blok warnanya dengan stagger 80ms; saat pengguna menggulir, pita marquee diagonal bergerak melintasi viewport dan blok warna menyapu antar seksi. Hasilnya adalah hero yang terasa seperti poster yang dicetak di depan mata, lalu pembaca diarahkan ke tombol MULAI BELANJA menuju Products.
• Motion vocabulary: staggered word reveals pada pemuatan hero; colour-block wipes antar seksi saat gulir; marquee ticker untuk nama penjual dan strip penawaran; hover state yang membalik latar kartu dari paper ke merah dengan potongan keras tanpa easing (poster snap).
• Composed first frame: tiga blok warna bertumpuk memenuhi viewport, aturan hitam 2px di antaranya, pita marquee diagonal hitam di bawah, dan tombol MULAI BELANJA dengan bayangan offset kuning di kiri-bawah.
• Reduced-motion state: semua marquee menjadi baris yang dapat digulir horizontal sehingga setiap item dapat dibawa sepenuhnya ke dalam tampilan; staggered reveal menjadi instan; colour-block wipe menjadi fade opacity sederhana.

9. Non-Functional Requirements

NFR-1 — Durabilitas data marketplace (required_inference) Identitas, pesanan, daftar produk, dan hubungan kepemilikan produk-penjual harus dipertahankan secara durable sehingga pekerjaan pembeli dan penjual tetap tersedia saat mereka kembali. Rasional: tanpa penyimpanan durable, pesanan dan daftar produk tidak dapat dilanjutkan atau ditinjau kembali.

NFR-2 — Pembatasan akses berbasis peran penjual (required_inference) Akses ke data dan pekerjaan penjual harus dibatasi berdasarkan peran penjual, sehingga pengguna tanpa peran penjual tidak dapat membaca atau mengubah data penjual. Rasional: data dan pekerjaan penjual terikat pada pemiliknya.

NFR-3 — Keterbacaan dan keseluruhan teks serta kontrol (explicit, dari arah kreatif) Headline, wordmark, label, angka, serta teks dan kontrol kartu harus tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskala agar muat, dan tidak boleh ditutupi elemen lain. Rasional: keterbacaan adalah syarat yang dinyatakan secara eksplisit.

NFR-4 — Dukungan reduced motion (explicit, dari arah kreatif) Ketika prefers-reduced-motion aktif, marquee harus menjadi baris yang dapat digulir horizontal sehingga setiap item dapat dibawa sepenuhnya ke dalam tampilan, staggered reveal menjadi instan, dan colour-block wipe menjadi fade opacity sederhana. Rasional: arah kreatif mensyaratkan susunan statis yang tetap dapat digunakan.

NFR-5 — Integritas penyelesaian pesanan (required_inference) Penyelesaian pembelian harus idempoten terhadap percobaan ulang, sehingga kegagalan sementara tidak menggandakan pesanan. Rasional: pembeli harus dapat mencoba lagi tanpa merusak riwayat pesanannya.

10. Tech Stack

• Frontend: React — antarmuka web kustom untuk seluruh permukaan yang tercantum di bagian 2c. [Default — not specified by user]
• Backend: Python/FastAPI — satu backend bersama yang melayani identitas, katalog produk, keranjang, pesanan, dan pekerjaan penjual, serta menegakkan pembatasan akses berbasis peran penjual. [Default — not specified by user]
• Storage: basis data relasional untuk identitas, produk, pesanan, dan hubungan kepemilikan produk-penjual. [Default — not specified by user]
• Containerization: Docker dan docker-compose untuk menjalankan frontend dan backend bersama-sama. [Default — not specified by user]

Tidak ada pilihan teknologi yang dinyatakan pengguna selain permintaan membangun website marketplace, sehingga seluruh entri di atas adalah default yang diberi label dan bukan perilaku produk.

11. Assumptions and Constraints

• A1 (required_inference): Identitas dimiliki aplikasi. Pembeli dan penjual membentuk identitas mereka sendiri melalui pendaftaran mandiri dan memverifikasinya kembali melalui login. Ini diperlukan agar pesanan, daftar produk, dan kepemilikan produk tetap terikat pada peserta yang benar dan dapat dilanjutkan kembali.
• A2 (required_inference): Landing, Login, dan Sign Up dapat dijangkau tanpa identitas; Cart, Checkout, My Orders, Seller Products, Product Editor, dan Seller Orders memerlukan identitas yang sesuai. Products dan Product Details dapat dijangkau tanpa identitas.
• A3 (required_inference): Pembatasan akses hanya berlaku pada pekerjaan penjual dan pada penyelesaian pembelian serta riwayat pesanan pembeli. Tidak ada model izin lain, peran tambahan, atau kontrol visibilitas lain yang diperkenalkan.
• A4 (explicit): Arah kreatif bersifat otoritatif untuk bagian 6, 7, dan 8. Palet, tipografi, bahasa bentuk, tata letak, dan gerak mengikuti arah tersebut; template SaaS indigo/biru-di-atas-putih dilarang untuk proyek ini.
• A5 (explicit): Tidak ada kapabilitas masa depan yang diterima. Seluruh perilaku dalam dokumen ini bersifat current.
• A6 (explicit): Tidak ada permukaan pihak ketiga atau eksternal yang menjadi pemilik alur yang diterima; seluruh permukaan adalah first-party milik aplikasi.
• C1 (explicit): Border-radius nol pada kartu, tombol, dan input; warna selalu datar tanpa gradien; tidak ada foto lifestyle stok.
• C2 (explicit): Anton adalah suara display yang tidak dapat digantikan; Inter, Roboto, Poppins, dan sans netral serupa tidak digunakan sebagai suara heading.

12. Glossary

• Marketplace — aplikasi web dua sisi tempat pembeli menemukan dan membeli produk dan penjual menawarkan serta mengelola produknya.
• Pembeli (Buyer) — aktor manusia yang menelusuri, mengevaluasi, dan membeli produk serta meninjau riwayat pesanannya.
• Penjual (Seller) — aktor manusia yang memasang, mengedit, dan mengelola produknya serta memantau pesanan masuk.
• Produk — item yang ditawarkan penjual di marketplace, dengan nama, harga, gambar, deskripsi, dan penjual pemilik.
• Keranjang — kumpulan produk yang dipilih pembeli sebelum melanjutkan ke pemesanan.
• Pesanan — catatan pembelian yang dibuat pembeli, dengan item, jumlah, total, status, dan pembeli pemilik.
• Pesanan masuk — pesanan yang terkait dengan produk seorang penjual dan dipantau melalui Seller Orders.
• Peran penjual — pembatasan akses yang membatasi data dan pekerjaan penjual kepada pengguna dengan peran penjual.
• Identitas aplikasi — akun yang dibentuk melalui pendaftaran mandiri dan diverifikasi kembali melalui login, dimiliki oleh aplikasi.
• Poster snap — hover state yang membalik latar kartu dari paper ke merah dengan potongan keras tanpa easing.
• Colour-block wipe — transisi seksi berupa sapuan blok warna penuh-lebar saat gulir.