Sistem Pengumuman Kelulusan — PKBM Yalatif

Aplikasi web untuk pengumuman kelulusan siswa PKBM Yalatif. Siswa dapat mencari data kelulusan menggunakan NIS, NISN, atau nama. Admin dapat mengelola data siswa dan mengatur status pengumuman per jenjang.

Live: https://yalatif.info

---

Teknologi

Layer	Stack
Frontend	React 18, TypeScript, Vite, TailwindCSS, Framer Motion
Backend	Node.js, Express, TypeScript, Prisma ORM
Database	PostgreSQL
Auth	JWT
Deploy	PM2 + Nginx + Let's Encrypt

---

Struktur Project

yalatif/
├── backend/              # Express API
│   ├── prisma/
│   │   ├── schema.prisma
│   │   └── migrations/
│   └── src/
│       ├── index.ts
│       ├── lib/
│       ├── middleware/
│       └── routes/
│           ├── auth.ts       # Login admin
│           ├── students.ts   # CRUD data siswa (protected)
│           ├── config.ts     # Konfigurasi pengumuman (protected)
│           └── public.ts     # Endpoint publik (search, check)
├── frontend/             # React SPA
│   └── src/
│       ├── pages/
│       │   ├── LandingPage.tsx
│       │   ├── LoginPage.tsx
│       │   ├── AnnouncementPage.tsx
│       │   └── dashboard/
│       ├── components/
│       ├── stores/
│       └── lib/
├── nginx/
│   ├── yalatif.info.conf # Nginx config
│   └── setup.sh          # Script setup Nginx + SSL
└── ecosystem.config.js   # PM2 config

---

Instalasi & Development

Prasyarat

• Node.js >= 20
• PostgreSQL
• npm

1. Clone & Install Dependencies

git clone https://github.com/bieyas/kelulusan.git
cd kelulusan

# Backend
cd backend && npm install

# Frontend
cd ../frontend && npm install

2. Setup Environment

# Backend
cp backend/.env.example backend/.env
# Edit backend/.env sesuai konfigurasi lokal

# Frontend
echo 'VITE_API_URL=http://localhost:5003' > frontend/.env

Variabel backend (.env):

Variabel	Keterangan
DATABASE_URL	Connection string PostgreSQL
JWT_SECRET	Secret key untuk JWT (gunakan string acak panjang)
JWT_EXPIRES_IN	Masa berlaku token, contoh: 7d
PORT	Port backend, default 3001
UPLOAD_DIR	Direktori penyimpanan file upload
MAX_FILE_SIZE_MB	Batas ukuran file upload dalam MB
ALLOWED_ORIGIN	Origin frontend untuk CORS

3. Setup Database

cd backend

# Jalankan migrasi
npx prisma migrate dev

# Generate Prisma Client
npx prisma generate

# (Opsional) Seed data awal
npm run db:seed

4. Jalankan Development Server

# Backend (terminal 1)
cd backend && npm run dev

# Frontend (terminal 2)
cd frontend && npm run dev

---

API Endpoints

Public (tanpa auth)

Method	Endpoint	Keterangan
GET	/api/public/config	Status pengumuman per jenjang
GET	/api/public/search?q=	Cari siswa (NIS/NISN/Nama)
POST	/api/public/check	Cek kelulusan dengan token
GET	/api/health	Health check

Auth

Method	Endpoint	Keterangan
POST	/api/auth/login	Login admin

Students (memerlukan JWT)

Method	Endpoint	Keterangan
GET	/api/students	List semua siswa
POST	/api/students	Tambah siswa
PUT	/api/students/:id	Update siswa
DELETE	/api/students/:id	Hapus siswa
DELETE	/api/students/bulk	Hapus banyak siswa
POST	/api/students/import	Import massal dari JSON

Config (memerlukan JWT)

Method	Endpoint	Keterangan
GET	/api/config/announcement	Status pengumuman per jenjang
PUT	/api/config/announcement	Update status pengumuman

---

Deploy ke Production

Prasyarat Server

• Ubuntu 20.04+
• Node.js >= 20 (via nvm)
• PM2 (npm install -g pm2)
• Nginx
• Domain yang sudah diarahkan ke IP server

Langkah Deploy

# 1. Clone di server
git clone https://github.com/bieyas/kelulusan.git /home/user/yalatif
cd /home/user/yalatif

# 2. Install dependencies
cd backend && npm install --omit=dev
cd ../frontend && npm install

# 3. Setup .env production
cp backend/.env.example backend/.env
# Edit backend/.env dengan nilai production
echo 'VITE_API_URL=https://yalatif.info' > frontend/.env

# 4. Migrasi & generate Prisma
cd backend && npx prisma migrate deploy && npx prisma generate

# 5. Build
cd backend && npm run build
cd ../frontend && npm run build

# 6. Setup Nginx + SSL (pastikan DNS sudah diarahkan)
bash nginx/setup.sh

# 7. Jalankan dengan PM2
pm2 start ecosystem.config.js
pm2 save
pm2 startup

Update / Redeploy

cd /home/basuki/yalatif
git pull
cd backend && npm run build
cd ../frontend && npm run build
pm2 restart ecosystem.config.js

---

Jenjang yang Didukung

• Paket A (setara SD)
• Paket B (setara SMP)
• Paket C (setara SMA)