Tubes 1 WBD: Nimonspedia

Aplikasi web marketplace menggunakan Pure PHP, HTML, CSS, dan JavaScript dengan struktur folder Laravel (tanpa framework Laravel). Milestone 2 menambahkan backend Node.js untuk fitur real-time dan React SPA untuk halaman baru, semuanya diproksikan oleh Nginx di http://localhost:8080.

Deskripsi Aplikasi

Nimonspedia adalah aplikasi web marketplace yang dirancang untuk memenuhi Tugas Milestone 1 IF3110 dan diperluas pada Milestone 2. Aplikasi mengimplementasi tiga peran pengguna:

1. Buyer (Pembeli)

Buyer dapat register, login, menjelajahi produk, melakukan filter dan pencarian, menambahkan produk ke cart belanja, checkout, melihat riwayat pesanan, dan mengikuti lelang (Milestone 2).

2. Seller (Penjual)

Seller dapat register sebagai seller, login, mengelola toko (profil), melakukan CRUD pada produk, mengelola pesanan, membuka lelang produk (Milestone 2), serta berinteraksi lewat chat.

3. Admin (Milestone 2)

Admin dapat login, mengelola user, dan mengatur feature flags (checkout/chat/auction) melalui portal admin berbasis React.

Arsitektur (Milestone 2)

• Nginx (nginx/): reverse proxy & static server; meneruskan /api/v2/* ke Node.js dan /v2/* ke Vite/React, serta melayani PHP.
• PHP backend (php/src): session-based auth untuk buyer/seller dan seluruh fitur Milestone 1 (produk, cart, order, balance, dll).
• Node.js backend (nodejs/src): lelang, chat, push notification, feature flags, admin auth (JWT), dan WebSocket namespaces.
• React SPA (react/): halaman lelang (/v2/auctions), chat (/v2/chat), dan admin (/v2/admin), dibangun dengan Vite + TypeScript.
• PostgreSQL 16: database bersama untuk PHP dan Node.js, di-seed dengan data contoh.

Daftar requirement

• Lihat detail spesifikasi di dokumen Milestone (mis. milestone 2.txt); kebutuhan utama telah diterapkan di folder PHP, Node.js, dan React.

Instalasi

1. Clone repository

git clone https://github.com/Labpro-22/milestone-1-tugas-besar-if-3110-web-based-development-k03-13.git

2. Setup Environment File (PHP)

Pertama kali setup:

cp php/src/.env.example php/src/.env

Isi file .env:

DB_HOST=db
DB_PORT=5432
DB_DATABASE=nimonspedia
DB_USERNAME=postgres
DB_PASSWORD=postgres

Node.js env (JWT, API_KEY, VAPID keys) dikonfigurasi di docker-compose.yml; sesuaikan di sana bila perlu.

3. Start Docker

docker compose up -d --build

4. Setup Database (Hanya Sekali atau setelah reset)

docker compose exec php bash
cd /var/www/src/database
php setup_database.php   # migrations + seeders

5. Buka Aplikasi

• Halaman PHP: http://localhost:8080
• React SPA: http://localhost:8080/v2/auctions, /v2/chat, /v2/admin

Akun Uji (Setelah seeding)

Buyers:

• buyer1@example.com / buyer123
• buyer2@example.com / buyer123

Sellers:

• seller1@example.com / seller123
• seller2@example.com / seller123

Admin (Milestone 2):

• admin@example.com / admin123

Database Commands

Lokasi: cd /var/www/src/database

php setup_database.php     # Setup lengkap (migrations + seeders)
php run_migrations.php     # Hanya migrations
php run_seeders.php        # Hanya seeders
php rollback_migrations.php
php setup_database.php     # Reset + setup ulang

Tech Stack

• PHP - Backend legacy
• PostgreSQL 16 - Database
• Nginx - Reverse proxy & static server
• Node.js + Hono + Socket.io - API admin, lelang, chat, push, feature flags
• React (Vite + TypeScript) - SPA untuk lelang, chat, admin
• HTML, CSS, JS - Frontend PHP
• Docker - Containerization & volumes

Fitur Milestone 2

• Real-time auctions dengan countdown, bid, stop/cancel oleh seller.
• Real-time chat buyer-seller dengan WebSocket dan session/JWT handoff.
• Admin dashboard (JWT) untuk manajemen user & feature flags (checkout/chat/auction).
• Push notifications (VAPID) untuk chat dan event lelang.
• React SPA untuk pengalaman modern, tetap menjaga halaman PHP lama.

Milestone 2 Fitur & PIC

No	Nama Fitur	PIC
1	Auction List	13523150 - Benedictus Nelson
2	Auction Detail	13523150 - Benedictus Nelson
3	Chat	13523128 - Andi Farhan Hidayat
4	Admin Dashboard	13523133 - Rafa Abdussalam Danadyaksa
5	Admin Login	13523133 - Rafa Abdussalam Danadyaksa
6	Detail Produk	13523132 - Jonathan Levi
7	Product Management	13523132 - Jonathan Levi
8	Profil	13523128 - Andi Farhan Hidayat

URL Penting

• API Node.js: http://localhost:8080/api/v2
• Auction list: /v2/auctions (React)
• Auction detail: /v2/auctions/:id (React + WebSocket)
• Chat: /v2/chat (React + WebSocket)
• Admin portal: /v2/admin (JWT), login /v2/admin/login

Feature Flags & Push Notifications

• Feature flags (checkout/chat/auction) ditegakkan di middleware Node.js dan dapat diubah lewat portal admin.
• Push notifications memerlukan VAPID keys; set VAPID_PUBLIC_KEY, VAPID_PRIVATE_KEY, dan VAPID_EMAIL di docker-compose.yml. Browser harus memberi izin notifikasi.

Tips & Troubleshooting

Reset Database Lengkap

docker compose down
docker volume rm tubes_1_postgres_data   # Data akan hilang
docker compose up -d --build
docker compose exec php bash
cd /var/www/src/database
php setup_database.php

Lihat Data di Volume

docker volume ls
docker volume inspect tubes_1_postgres_data

Backup Database

docker compose exec db pg_dump -U postgres postgres > backup.sql
docker compose exec -T db psql -U postgres postgres < backup.sql

Logs

docker compose logs -f nodejs
docker compose logs -f php
docker compose logs -f nginx

Penjelasan Pembagian Tugas

NIM	Nama	Tanggung Jawab Utama	Status
13523133	Rafa Abdussalam Danadyaksa	Product Discovery (Halaman Home Buyer); Product Management (Product Management, Add Product, Edit Product, Delete Product, styling rich text editor)	Selesai, penyempurnaan styling rich text editor dilanjutkan
13523128	Andi Farhan Hidayat	Autentikasi, Database, dan Profil untuk Buyer & Seller (Login, Register, Profil, Dashboard); Komponen Pagination yang dapat digunakan ulang	Database, Profil, Dashboard selesai; Login/Register perlu penambahan disable dan loading state; Pagination selesai
13523150	Benedictus Nelson	Checkout & Orders (Shopping Cart, Checkout); Order History; Order Management; Navbar sesuai tipe pengguna	Selesai
13523132	Jonathan Levi	Balance Management (Pop-up top-up); Detail Product; Detail Store; Penyimpanan file biner; Toaster untuk error handling & feedback	Fitur utama selesai; Toaster selesai sebagian (perlu tindak lanjut jika diperlukan)

Hasil Tangkapan Layar

Seluruh berkas gambar disimpan di docs/tangkapan-layar/ untuk memudahkan pengelolaan.