🎨 Lucia-Strapi Portfolio

Portfolio full-stack modern yang dibangun dengan Strapi CMS dan Next.js. Proyek ini menunjukkan kemampuan dalam pengembangan web full-stack dengan arsitektur headless CMS.

✨ Fitur Utama

• Headless CMS: Strapi sebagai backend untuk mengelola konten portfolio
• Frontend Modern: Next.js 14 dengan App Router, TypeScript, dan Tailwind CSS
• Dua Mode Berjalan:
  • Mode Pengembangan Lokal (ringan dengan SQLite)
  • Mode Container (produksi dengan MySQL + Podman)
• Responsif & Modern: Desain yang optimal di semua perangkat
• Optimized Images: Next.js Image Optimization terintegrasi

🚀 Tech Stack

Backend:

• Strapi v5
• MySQL / SQLite
• Node.js 18+

Frontend:

• Next.js 14 (App Router)
• TypeScript
• Tailwind CSS
• Axios untuk API calls

DevOps:

• Podman/Docker
• Docker Compose
• GitHub Actions (opsional)

📁 Struktur Proyek

lucia-strapi/ ├── backend/ # Strapi CMS │ ├── src/ # Kode sumber Strapi │ ├── config/ # Konfigurasi database, admin, dll │ └── Dockerfile # Untuk build container ├── frontend/ # Next.js App │ ├── src/ # Kode sumber Next.js │ ├── components/ # Komponen React │ └── Dockerfile # Untuk build container ├── docker-compose.yaml # Konfigurasi multi-container └── .gitignore # File yang di-exclude dari Git

text

⚡ Cara Menjalankan Proyek

📦 Prasyarat

• Node.js 18+ atau Bun
• Git terinstal
• Podman atau Docker (opsional, untuk mode container)

🖥️ Mode Pengembangan Lokal (Ringan)

1. Clone Repository

git clone https://github.com/yusufmalik2008/lucia-strapi.git
cd lucia-strapi
2. Setup Backend (Strapi)
bash
cd backend
bun install  # atau npm install
cp .env.example .env  # edit .env jika diperlukan
bun run build
bun run develop
# Strapi akan berjalan di http://localhost:1337
3. Setup Frontend (Next.js)
bash
cd ../frontend
bun install  # atau npm install
cp .env.local.example .env.local  # edit jika diperlukan
bun run dev
# Next.js akan berjalan di http://localhost:3000
🐳 Mode Container (Dengan Podman/Docker)
1. Build dan Jalankan Semua Service
bash
# Dari root project
podman-compose up -d  # atau docker-compose up -d
2. Akses Aplikasi
Strapi Admin: http://localhost:1337/admin

Portfolio Website: http://localhost:3000

Debug Page: http://localhost:3000/debug

3. Perintah Berguna
bash
# Lihat logs
podman-compose logs -f

# Hentikan semua container
podman-compose down

# Hentikan dan hapus volume (data akan hilang!)
podman-compose down -v
🔧 Konfigurasi Database
SQLite (Mode Pengembangan)
Digunakan secara default di mode lokal. Data disimpan di backend/.tmp/data.db

MySQL (Mode Container)
Konfigurasi otomatis melalui docker-compose.yaml:

Database: strapi

User: strapi

Password: strapi_password

🌐 Environment Variables
Backend (Strapi)
env
# backend/.env
DATABASE_CLIENT=mysql  # atau sqlite
DATABASE_HOST=mysql    # localhost untuk sqlite
DATABASE_PORT=3306
DATABASE_NAME=strapi
DATABASE_USERNAME=strapi
DATABASE_PASSWORD=strapi_password
Frontend (Next.js)
env
# frontend/.env.local
NEXT_PUBLIC_STRAPI_URL=http://localhost:1337  # untuk local
# atau http://strapi:1337 untuk mode container
📊 Struktur Content Type di Strapi
Proyek portfolio memiliki content type "Project" dengan field:

title (Text)

description (Text)

slug (UID)

content (Rich Text)

technologies (JSON array)

project_url (Text)

github_url (Text)

published_date (Date)

featured (Boolean)

featured_image (Media)

🚢 Deployment
Frontend (Vercel - Gratis)
Push ke GitHub

Import di Vercel

Set environment variable NEXT_PUBLIC_STRAPI_URL

Backend (Railway/Render - Ada Free Tier)
Deploy container Strapi

Setup database (MySQL/PostgreSQL)

Update frontend API URL

Alternatif: Full Stack di Railway
Deploy seluruh stack (docker-compose.yaml) ke Railway.

🐛 Troubleshooting
"Cannot connect to database"
Pastikan database service berjalan

Cek credentials di .env

Untuk MySQL: pastikan mysql2 package terinstal

"Port already in use"
bash
# Cek process yang menggunakan port
netstat -ano | findstr :1337  # Windows
lsof -i :1337                 # Mac/Linux
"Memory usage high"
Hapus node_modules dan build caches

Gunakan mode lokal untuk pengembangan

Batasi jumlah project di database

🤝 Berkontribusi
Fork repository

Buat branch fitur (git checkout -b fitur-baru)

Commit perubahan (git commit -m 'Tambahkan fitur')

Push ke branch (git push origin fitur-baru)

Buat Pull Request

Lihat CONTRIBUTING.md untuk detail lebih lanjut.

📄 Lisensi
MIT License - lihat LICENSE file untuk detail.

🙏 Credit
Dibangun dengan:

Strapi - Headless CMS terbaik

Next.js - React framework

Podman - Container engine