MPC Web — Mobile Programming Club

Website quản lý và giới thiệu Câu lạc bộ Lập trình Di động (MPC) — Khoa Công nghệ Thông tin, Trường Đại học Mở TP.HCM.

🛠️ Tech Stack

---

✨ Tính năng

🌐 Trang công khai

• Trang chủ — Hero banner, thống kê CLB, giới thiệu, quyền lợi thành viên, ban chủ nhiệm, gallery ảnh, FAQ, terminal tương tác (auto-typing + full-screen với 13 lệnh CLI)
• Hồ sơ thành viên — Trang cá nhân với slug tùy chỉnh (/members/:slug)
• Sitemap động — Tự động index bài viết, sự kiện, thành tựu, dự án, thành viên với alternates song ngữ vi/en
• Đa ngôn ngữ — Tiếng Việt (mặc định) & English qua next-intl
• Light / Dark mode — Chuyển đổi giao diện với next-themes
• API Docs — Swagger UI tự động tại /api-docs

🔐 Khu vực thành viên

• Xác thực cổng SSO tập trung (OIDC) qua NestJS SSO với cơ chế PKCE và JWKS verification
• Chỉnh sửa hồ sơ — Thông tin cá nhân, avatar, ảnh bìa, liên kết mạng xã hội, slug

⚙️ Quản trị (Admin Panel)

Module	Mô tả
Thành viên	Đồng bộ tự động từ SSO qua Cronjob, chỉnh sửa thông tin portfolio bổ sung (slug, socials, cover image, spotifyUri, bio, avatar override)
Ban / Phòng	Quản lý cơ cấu tổ chức CLB
Bài viết	Quy trình duyệt bài (Draft → Review → Published/Unlisted), lịch sử chỉnh sửa
Sự kiện	Quản lý workshop, seminar, cuộc thi với đăng ký, gallery
Thành tựu	Giải thưởng cá nhân, đội, CLB
Dự án	Showcase dự án với GitHub, tech stack, thành viên
Nhà tài trợ	Quản lý đối tác, phân hạng tài trợ
Thông báo	Thanh announcement bar với lịch trình, CTA, tuỳ chỉnh màu
FAQ	Câu hỏi thường gặp, hỗ trợ đa ngôn ngữ
Gallery	Quản lý ảnh trang chủ
Homepage	Tùy chỉnh nội dung hero, intro, stats
Cài đặt	Cấu hình site (tên, mô tả, logo, favicon, màu), auth (domain, chặn guest), footer social

---

🛠 Công nghệ

Lớp	Công nghệ
Framework	Next.js 16 (App Router, React Compiler, Turbopack)
UI	Tailwind CSS 4, Shadcn UI, Radix Primitives, Lucide Icons
Database	PostgreSQL (Supabase) + Prisma ORM 7 (pg adapter)
Auth	NestJS SSO (OIDC + PKCE + JWKS ES256)
Storage	Supabase Storage (avatar, cover, gallery)
i18n	next-intl (vi, en)
Data Table	TanStack Table v8
API Docs	next-swagger-doc + swagger-ui CDN
Lint & Format	Biome 2 + Ultracite, Husky, lint-staged, commitlint
Deploy	Docker / Standalone build

---

🚀 Bắt đầu

Yêu cầu

• Node.js ≥ 24
• pnpm ≥ 10
• PostgreSQL (hoặc Supabase project)

Cài đặt

git clone https://github.com/konnn04/mpc-web.git
cd mpc-web

# Kích hoạt đúng phiên bản pnpm
corepack enable pnpm

# Cấu hình biến môi trường
cp .env.example .env
# → Điền các giá trị DATABASE_URL, DIRECT_URL và SSO Client Credential

Biến môi trường

Biến	Mô tả
NEXT_PUBLIC_API_URL	URL API (mặc định: http://localhost:3000)
NEXT_PUBLIC_SITE_URL	URL của Landing Page (mặc định: http://localhost:3000), dùng làm gốc cho Redirect URL ({NEXT_PUBLIC_SITE_URL}/api/auth/callback)
SSO_ISSUER	Địa chỉ OIDC Issuer của SSO (mặc định: https://auth.mpclub.dev)
SSO_CLIENT_ID	Client ID được SSO cấp để tích hợp OIDC
SSO_CLIENT_SECRET	Client Secret tương ứng
SSO_SERVICE_API_KEY	Key kết nối server-to-server lấy dữ liệu thành viên từ SSO
SESSION_SECRET	Khóa mã hóa session cookie mpc_session tại landing page
CRON_SECRET	Token bảo mật để kích hoạt API cron job đồng bộ thành viên
DATABASE_URL	Connection pooler (port 6543)
DIRECT_URL	Direct connection (port 5432)
ADMIN_ACCOUNT	Email(s) root admin, JSON array
AUTH_ACCEPTED_DOMAINS	Domain email cho phép đăng nhập (phân cách dấu phẩy), để trống = tất cả
AUTH_REQUIRE_MEMBER_ROLE	true để chặn tài khoản GUEST đăng nhập

---

🐳 Deploy với Docker

docker compose up -d

Container chạy trên port 3000, standalone build, non-root user.

---

📁 Cấu trúc dự án

app/
├── [locale]/                  # Routes đa ngôn ngữ (vi, en)
│   ├── (main)/                # Trang chủ & các section
│   │   └── members/[slug]/    # Hồ sơ thành viên
│   ├── (private)/             # Yêu cầu đăng nhập
│   │   ├── (main)/profile/    # Chỉnh sửa hồ sơ cá nhân
│   │   └── admin/             # Admin panel (12 modules)
│   └── (public)/auth/         # Trang đăng nhập
├── api/                       # API routes
│   ├── auth/callback/         # OAuth callback
│   └── docs/                  # Swagger JSON spec
└── api-docs/                  # Swagger UI
components/
├── custom/                    # Components dự án (Header, Footer, Layout, …)
└── ui/                        # Shadcn UI components
configs/
├── prisma/                    # Schema & migrations (20 models)
├── i18n/                      # Cấu hình next-intl
├── messages/                  # File dịch (en.json, vi.json)
├── supabase/                  # Client, server, middleware helpers
└── swagger/                   # Swagger config

---

📋 Scripts

Lệnh	Mô tả
pnpm dev	Dev server với Turbopack
pnpm build	Build production
pnpm start	Chạy production server
pnpm lint:check	Kiểm tra linting (Biome)
pnpm lint:fix	Tự động sửa lint

---

🤝 Đóng góp

1. Fork repo
2. Tạo branch: git checkout -b feat/ten-tinh-nang
3. Commit theo Conventional Commits: feat:, fix:, docs:, …
4. Push & tạo Pull Request

---

📝 License

MIT License

👥 Team

Phát triển bởi MPC — Mobile Programming Club, Trường ĐH Mở TP.HCM.