Platform Build · Milestone 01 of 06

ACL PLATFORM

M.01 · Project Setup & Auth Foundation · Windows 11 · Node.js + Python ready
M.01 — SETUP
ACL-PLATFORM-M01
Phase: Platform Build
OS: Windows 11
Prerequisites: Node.js ✓ Python ✓

Target M.01: Dari laptop kosong → project structure siap, kedua server bisa jalan, halaman login sudah tampil di browser, dan koneksi ke database ACL sudah terhubung. Semua dikerjakan step by step — tidak perlu paham kodenya, cukup ikuti instruksinya.

✓ Phase 1 & 2 Done
▶ M.01 — Now
○ M.02–M.06 — Next
Langkah 0 — Install Tools yang Belum Ada
Node.js
✓ Sudah Ada
Sudah ter-install. Verifikasi versi — pastikan minimal v18.
node --version
→ harus muncul: v18.x.x atau lebih tinggi
npm --version
→ harus muncul: v9.x.x atau lebih tinggi
Python 3.x
✓ Sudah Ada
Sudah ter-install. Verifikasi versi — pastikan minimal 3.9.
python --version
→ harus muncul: Python 3.9.x atau lebih tinggi
pip --version
→ harus muncul: pip 23.x atau lebih tinggi
Git
⬇ Perlu Install
Download Git for Windows — pilih installer 64-bit. Saat install, semua opsi bisa dibiarkan default.
https://git-scm.com/download/win
git --version
→ harus muncul: git version 2.x.x
VS Code
⬇ Perlu Install
Download VS Code untuk Windows. Ini adalah code editor tempat kamu akan melihat dan mengedit semua file project.
https://code.visualstudio.com/download
Setelah install, buka VS Code → pastikan bisa terbuka normal.
⚠ Setelah Install Git
Setelah install Git, tutup dan buka ulang terminal / command prompt — supaya Git dikenali oleh sistem. Kalau tidak, perintah git akan error "not recognized".
Langkah 1 — Buat GitHub Repository
1
Buat Repo di GitHub
Di browser · github.com · 3 menit
Browser
1
Buka github.com → login ke akun kamu → klik tombol "New" (tombol hijau di sidebar kiri) atau klik tanda "+" di pojok kanan atas → pilih "New repository".
2
Isi form seperti ini:
Repository name: alfa-capital-platform
Description: Alfa Capital Lab — Internal Trading Platform
Visibility: pilih Private (jangan Public)
Initialize this repository: centang "Add a README file"
3
Klik tombol "Create repository" (hijau di paling bawah).
4
Setelah repo terbuat, klik tombol hijau "Code" → tab "HTTPS" → copy URL-nya. Bentuknya: https://github.com/username-kamu/alfa-capital-platform.git
Langkah 2 — Clone Repo ke Laptop
2
Clone & Siapkan Folder di Laptop
Di laptop · Command Prompt / Terminal · 2 menit
Terminal
1
Buka Command Prompt di Windows: tekan Windows + R → ketik cmd → Enter.
2
Pindah ke folder tempat project akan disimpan. Rekomendasi: taruh di folder Documents.
Command Prompt — laptop kamu
rem Pindah ke folder Documents
cd %USERPROFILE%\Documents

rem Clone repo dari GitHub (ganti URL dengan URL repo kamu tadi)
git clone https://github.com/USERNAME-KAMU/alfa-capital-platform.git

rem Masuk ke folder project
cd alfa-capital-platform
3
Buat struktur folder utama project. Copy perintah ini satu per satu:
Buat folder struktur project
mkdir frontend
mkdir backend
mkdir docs
Hasil struktur folder
alfa-capital-platform/
├── frontend/ <-- Next.js app (nanti)
├── backend/ <-- FastAPI app (nanti)
├── docs/ <-- dokumentasi project
└── README.md
Langkah 3 — Setup Frontend (Next.js)
3
Init Next.js Project di Folder Frontend
Di laptop · Command Prompt · 5–10 menit (download dependencies)
Terminal
1
Masih di Command Prompt yang sama. Masuk ke folder frontend:
cd frontend
2
Jalankan perintah ini untuk membuat project Next.js. Waktu jalan nanti akan ada beberapa pertanyaan — jawab persis seperti di bawah:
Jalankan di terminal — proses download ±2-5 menit
npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
Kalau muncul pertanyaan di terminal saat perintah jalan, jawab semua dengan menekan Enter (berarti "Yes" / pakai default). Tidak perlu ubah apapun.
3
Install library tambahan yang dibutuhkan Platform:
Install UI & chart libraries
npm install @supabase/supabase-js @supabase/auth-helpers-nextjs
npm install recharts lucide-react
npm install zustand
npm install axios
4
Install shadcn/ui — ini adalah komponen UI yang akan dipakai untuk semua halaman Platform:
Setup shadcn/ui
npx shadcn@latest init

rem Saat ditanya pertanyaan, jawab:
Which style would you like to use? Default
Which color would you like to use as base color? Slate
Would you like to use CSS variables? Yes
5
Test apakah Next.js berjalan — ini untuk memastikan semuanya beres:
npm run dev

→ Tunggu sampai muncul:
✓ Ready in 2.3s
○ Local: http://localhost:3000
Buka di browser
http://localhost:3000
Kalau muncul halaman Next.js default (ada logo Next.js) → Frontend berhasil. Tekan Ctrl+C di terminal untuk stop server.
Langkah 4 — Setup Backend (FastAPI)
4
Init FastAPI Project di Folder Backend
Di laptop · Command Prompt baru · 5 menit
Terminal
1
Buka Command Prompt baru (jangan tutup yang lama). Pindah ke folder backend:
cd %USERPROFILE%\Documents\alfa-capital-platform\backend
2
Buat Python virtual environment — ini seperti "kotak terpisah" supaya library Python untuk project ini tidak bentrok dengan Python yang lain di laptop:
Buat virtual environment
python -m venv venv

rem Aktifkan virtual environment
venv\Scripts\activate

→ Kalau berhasil, di awal baris terminal akan muncul: (venv)
3
Install semua library Python yang dibutuhkan:
Install FastAPI dan dependencies
pip install fastapi uvicorn sqlalchemy psycopg2-binary
pip install pydantic pydantic-settings python-jose passlib python-multipart
pip install python-dotenv httpx
4
Buat struktur folder backend dan file utama:
Buat struktur folder backend
mkdir app
mkdir app\api
mkdir app\core
mkdir app\models
mkdir app\schemas
mkdir app\services
5
Buat file main.py — ini adalah pintu masuk utama FastAPI. Copy perintah ini ke terminal:
Buat file main.py
echo from fastapi import FastAPI > main.py
echo from fastapi.middleware.cors import CORSMiddleware >> main.py
Jangan khawatir soal isi file-nya dulu. Isi lengkap setiap file akan saya berikan satu per satu di langkah berikutnya. Langkah ini hanya memastikan folder dan struktur sudah terbentuk.
6
Simpan daftar library yang sudah terinstall — ini penting untuk nanti kalau project dipindahkan ke server lain:
pip freeze > requirements.txt
Langkah 5 — Buat File Konfigurasi (.env)
5
Setup Environment Variables
Di laptop · VS Code · Tempat menyimpan credentials & config
VS Code
1
Buka VS Code → klik File → Open Folder → pilih folder alfa-capital-platform yang ada di Documents. Ini akan membuka seluruh project di VS Code.
2
Di panel kiri VS Code, klik kanan folder frontend → pilih "New File" → beri nama .env.local
3
Isi file frontend/.env.local dengan konfigurasi berikut. Bagian yang perlu diisi nanti setelah Supabase dibuat:
frontend/.env.local
# ── Supabase Auth (isi setelah Step 6)
NEXT_PUBLIC_SUPABASE_URL=ISI_NANTI
NEXT_PUBLIC_SUPABASE_ANON_KEY=ISI_NANTI

# ── FastAPI Backend URL
NEXT_PUBLIC_API_URL=http://localhost:8000

# ── App Config
NEXT_PUBLIC_APP_NAME=Alfa Capital Platform
NEXT_PUBLIC_APP_ENV=development
4
Buat file .env di folder backend dengan cara yang sama (klik kanan folder backend → New File → .env). Isi dengan:
backend/.env
# ── Database ACL (PostgreSQL via Perl Forwarder)
DATABASE_URL=postgresql://thejourn_acl_user:PASSWORD@jakarta.kencang.com:8443/thejourn_acl_rnd

# ── JWT Secret (ganti dengan string random panjang)
JWT_SECRET_KEY=GANTI_DENGAN_RANDOM_STRING_PANJANG_MIN_32_KARAKTER
JWT_ALGORITHM=HS256
JWT_EXPIRE_MINUTES=480

# ── Supabase (isi setelah Step 6)
SUPABASE_URL=ISI_NANTI
SUPABASE_SERVICE_KEY=ISI_NANTI

# ── App
APP_ENV=development
CORS_ORIGINS=http://localhost:3000
⚠ Jangan pernah upload file .env ke GitHub
File .env berisi password dan secret key. Pastikan file .gitignore di root folder project sudah include .env dan .env.local. Next.js sudah otomatis buat .gitignore yang benar, tapi kita verifikasi di Step 7.
Langkah 6 — Setup Supabase (Auth)
6
Buat Supabase Project untuk Auth
Di browser · supabase.com · Free tier · 5 menit
Browser
1
Buka supabase.com → klik "Start your project" → login dengan akun GitHub kamu (ini cara paling gampang).
2
Klik "New Project" → isi:
Name: alfa-capital-platform
Database Password: buat password yang kuat, simpan di tempat aman
Region: pilih Southeast Asia (Singapore) — paling dekat dengan Indonesia
Klik "Create new project" → tunggu ±2 menit sampai selesai provisioning.
3
Setelah project ready, klik Settings (ikon gear di sidebar kiri) → pilih "API". Kamu akan melihat dua nilai penting:
Yang perlu dicopy dari Supabase → API Settings
# Project URL → copy ke NEXT_PUBLIC_SUPABASE_URL & SUPABASE_URL
https://xxxxxxxxxxxxx.supabase.co

# anon/public key → copy ke NEXT_PUBLIC_SUPABASE_ANON_KEY
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.xxxx...

# service_role key → copy ke SUPABASE_SERVICE_KEY (RAHASIA - jangan expose ke frontend)
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.yyyy...
4
Copy ketiga nilai tersebut ke file .env.local (frontend) dan .env (backend) yang dibuat di Step 5. Ganti bagian yang bertuliskan ISI_NANTI.
5
Di Supabase dashboard, klik Authentication → Providers → pastikan Email provider sudah enabled (biasanya sudah aktif by default). Matikan "Confirm email" dulu (supaya testing lebih mudah — bisa dinyalakan lagi nanti).
Langkah 7 — Verifikasi & Push ke GitHub
7
Cek .gitignore & Push Initial Commit
Di laptop · VS Code + Terminal · 3 menit
VS Code
1
Di VS Code, cari file .gitignore di folder root project (bukan di dalam frontend/backend). Kalau belum ada, buat file baru bernama .gitignore di root. Pastikan isinya include baris-baris ini:
Isi .gitignore di root project
# Environment files — JANGAN PERNAH DIUPLOAD
.env
.env.local
.env.*.local
*.env

# Dependencies
node_modules/
frontend/.next/
backend/venv/
backend/__pycache__/
**/*.pyc

# Build output
frontend/out/
frontend/build/
2
Kembali ke Command Prompt. Pindah ke folder root project, lalu push ke GitHub:
Command Prompt — root folder project
cd %USERPROFILE%\Documents\alfa-capital-platform

rem Konfigurasi Git identity (sekali saja, pakai email GitHub kamu)
git config --global user.email "EMAIL_GITHUB_KAMU"
git config --global user.name "NAMA_KAMU"

rem Add semua file ke Git
git add .

rem Commit pertama
git commit -m "M.01: Project setup — Next.js + FastAPI skeleton"

rem Push ke GitHub
git push origin main
Kalau muncul pop-up login GitHub saat push, login dengan akun GitHub kamu. Ini hanya sekali — setelah itu Git akan ingat credentials kamu.
M.01 — Exit Gate
CHECKLIST Semua ini harus ✓ sebelum kita lanjut ke M.02
Git terinstall — perintah git --version muncul versi
VS Code terinstall — bisa membuka folder project
GitHub repo terbuat — alfa-capital-platform sudah ada di GitHub (Private)
Next.js jalan — buka http://localhost:3000 muncul halaman Next.js default
FastAPI folder siap — folder backend/app sudah terbentuk, requirements.txt sudah ada
Supabase project terbuat — URL + anon key + service key sudah dicopy ke file .env
Push ke GitHub berhasil — file-file project sudah ada di repo, file .env tidak ikut terupload
✓ Cara Verifikasi Cepat — Tes Sebelum Lanjut
→Buka browser → localhost:3000 → muncul halaman Next.js? ✓
→Buka GitHub repo kamu → ada folder frontend, backend, docs? ✓
→Di GitHub, cek apakah ada file .env atau .env.local → harus TIDAK ada ✓
→Buka Supabase dashboard → project sudah status "Healthy"? ✓
M.01 selesai = fondasi platform sudah terpasang.
Kalau semua checklist centang, langsung lapor — kita masuk M.02:
Dashboard utama + koneksi ke database ACL Phase 1 yang sudah ada.
Next Milestone M.02
Dashboard &
Data Layer