IPv6 Summit 2026 — Hệ Thống Website Chính Thức

IPv6 for AI & Data Centre Summit 2026 — Hội nghị quốc tế về hạ tầng IPv6 cho AI và Trung tâm Dữ liệu khu vực ASEAN. Website được xây dựng với Next.js 16, TypeScript, Tailwind CSS v4 và hỗ trợ song ngữ Anh–Việt hoàn chỉnh.

---

✨ Tổng Quan

Website phục vụ toàn bộ vòng đời của sự kiện: từ trang giới thiệu hội nghị, đăng ký tham dự, thu thập phản hồi (feedback), trưng bày nhà tài trợ, đến bảng quản trị dành riêng cho ban tổ chức. Toàn bộ nội dung được lưu trữ trong các file JSON riêng biệt theo ngôn ngữ, giúp dễ dàng cập nhật mà không cần sửa code.

---

🚀 Tính Năng Nổi Bật

Tính năng	Mô tả
🌐 Song ngữ (EN / VI)	Chuyển đổi ngôn ngữ tức thì, mọi nhãn và nội dung đều được Việt hoá hoàn toàn
📋 Form Đăng Ký	Đăng ký tham dự hội nghị, lưu trữ vào MongoDB
💬 Form Phản Hồi	Đánh giá sự kiện chi tiết sau khi tham dự
🏢 Trang Nhà Tài Trợ	Giới thiệu các đối tác và nhà tài trợ của hội nghị
🗂️ Admin Console	Bảng quản trị xem, duyệt, từ chối hồ sơ đăng ký; xuất Excel
🔐 Bảo Mật Admin	HTTP Basic Auth tuỳ chỉnh cho khu vực /admin
📱 Responsive	Tối ưu hiển thị trên mọi thiết bị từ mobile đến desktop
🎨 Premium UI	Glassmorphism, gold gradient, Material Symbols, micro-animations
🗄️ MongoDB	Lưu trữ và truy vấn hồ sơ đăng ký/phản hồi theo thời gian thực

---

🛠️ Công Nghệ Sử Dụng

• Framework: Next.js 16 (App Router)
• Language: TypeScript 5
• Styling: Tailwind CSS v4 + SCSS (custom design tokens)
• Database: MongoDB (Mongoose v9)
• Icons: Google Material Symbols (Outlined)
• Font: Inter (Google Fonts)
• Containerization: Docker + Docker Compose
• HTTP Client: Axios

---

📁 Cấu Trúc Thư Mục

├── app/
│   ├── (site)/                   # Các trang công khai
│   │   ├── page.tsx              # Trang chủ
│   │   ├── registration/         # Form đăng ký tham dự
│   │   ├── feedback/             # Form phản hồi sau sự kiện
│   │   └── sponsor/              # Trang nhà tài trợ
│   ├── (internal)/
│   │   └── admin/                # Bảng quản trị (yêu cầu xác thực)
│   │       ├── page.tsx          # Dashboard tổng hợp
│   │       ├── pending/          # Danh sách chờ duyệt
│   │       ├── approved/         # Danh sách đã duyệt
│   │       └── rejected/         # Danh sách từ chối
│   ├── api/                      # API Routes (Next.js)
│   ├── components/
│   │   ├── home/                 # Hero, Stats, Vision, Agenda sections
│   │   ├── admin/                # AdminConsole component
│   │   ├── forms/                # RegistrationForm, FeedbackForm
│   │   ├── layout/               # Header, Footer
│   │   ├── sponsor/              # Sponsor components
│   │   └── ui/                   # Shared UI primitives
│   ├── context/                  # LanguageContext (EN/VI)
│   ├── data/                     # JSON content files (song ngữ)
│   │   ├── admin.json / admin.vi.json
│   │   ├── home.json  / home.vi.json
│   │   ├── registration.json / registration.vi.json
│   │   ├── feedback.json / feedback.vi.json
│   │   ├── sponsor.json / sponsor.vi.json
│   │   └── site.json  / site.vi.json
│   ├── hooks/                    # useTranslation hook
│   └── layout.tsx                # Root layout
├── models/
│   └── SummitRequest.ts          # Mongoose schema
├── lib/
│   └── mongodb.ts                # Kết nối MongoDB
├── scripts/
│   └── seed-summit-requests.ts   # Seed dữ liệu mẫu
├── types/
│   └── admin-submission.ts       # TypeScript types
├── middleware.ts                  # HTTP Basic Auth cho /admin
├── Dockerfile
├── docker-compose.yml
└── .env.example

---

⚙️ Hướng Dẫn Cài Đặt

Yêu Cầu Hệ Thống

• Node.js 18+
• MongoDB 6+ (local hoặc Atlas)
• npm / yarn / pnpm

1. Clone & Cài Dependencies

git clone <repository-url>
cd IPV6

npm install

2. Cấu Hình Môi Trường

Sao chép file .env.example thành .env.local và điền các giá trị:

cp .env.example .env.local

# MongoDB — lưu trữ hồ sơ đăng ký và phản hồi
MONGODB_URI=mongodb://localhost:27017/ipv6_summit

# URL công khai (tuỳ chọn)
NEXT_PUBLIC_BASE_URL=http://localhost:3000

# Bảo vệ trang Admin bằng HTTP Basic Auth (tuỳ chọn)
ADMIN_BASIC_AUTH_USER=admin
ADMIN_BASIC_AUTH_PASS=your_password

3. Seed Dữ Liệu Mẫu (Tuỳ chọn)

npm run db:seed

4. Chạy Development Server

npm run dev

Truy cập http://localhost:3000 để xem website. Truy cập http://localhost:3000/admin để vào bảng quản trị.

---

📜 Scripts

npm run dev           # Chạy development server (Next.js Turbopack)
npm run build         # Build production
npm run start         # Chạy production server
npm run lint          # Kiểm tra ESLint
npm run db:seed       # Seed dữ liệu mẫu vào MongoDB
npm run scss:build    # Compile SCSS → CSS (một lần)
npm run scss:watch    # Compile SCSS → CSS (watch mode)

---

🐳 Chạy Với Docker

Development

# Build và chạy toàn bộ stack (Next.js + MongoDB)
docker-compose up --build

# Chạy ở background
docker-compose up -d

# Dừng
docker-compose down

Production

# Build production image
docker build -t ipv6-summit .

# Chạy container
docker run -p 3000:3000 --env-file .env.local ipv6-summit

---

🌐 Hệ Thống Đa Ngôn Ngữ (i18n)

Dự án sử dụng kiến trúc i18n tự xây dựng (không phụ thuộc thư viện bên ngoài):

• LanguageContext (app/context/) — quản lý trạng thái ngôn ngữ toàn cục (en | vi).
• useTranslation hook (app/hooks/) — load nội dung JSON tương ứng với ngôn ngữ hiện tại.
• File JSON song ngữ — mỗi module có 2 file: *.json (EN) và *.vi.json (VI).

Để thêm nội dung mới, chỉ cần cập nhật cả hai file JSON song ngữ tương ứng.

---

🗄️ Database Schema

Collection summitrequest (MongoDB):

Trường	Kiểu	Mô tả
publicId	String	ID công khai (ví dụ: V6-4821)
fullName	String	Họ và tên người đăng ký
jobTitle	String	Chức vụ
company	String	Công ty / Tổ chức
email	String	Địa chỉ email
phone	String	Số điện thoại
segment	String	Phân khúc (tier1, cloud, enterprise)
status	String	Trạng thái (pending, approved, rejected)
source	String	Nguồn gốc (registration, feedback)
notes	String	Ghi chú hoặc nội dung phản hồi
submittedAt	String	Ngày nộp hồ sơ

---

🔒 Bảo Mật Admin

Khu vực /admin được bảo vệ thông qua middleware.ts bằng HTTP Basic Auth. Để kích hoạt, thiết lập hai biến môi trường:

ADMIN_BASIC_AUTH_USER=admin
ADMIN_BASIC_AUTH_PASS=your_secure_password

Nếu không thiết lập, trang Admin vẫn truy cập được (phù hợp cho môi trường development nội bộ).

---

📝 Cập Nhật Nội Dung

Mọi nội dung văn bản đều được tách biệt khỏi code và lưu trong app/data/. Để thay đổi nội dung:

1. Mở file JSON tương ứng (ví dụ: app/data/home.vi.json)
2. Chỉnh sửa giá trị cần thay đổi
3. Lưu file — Next.js sẽ tự động hot-reload

Không cần sửa code TypeScript/TSX khi chỉ thay đổi nội dung văn bản.

---

🚀 Triển Khai (Deployment)

Vercel (Khuyến nghị)

1. Push code lên GitHub / GitLab
2. Kết nối repository với Vercel
3. Thêm biến môi trường MONGODB_URI trong Vercel dashboard
4. Deploy tự động mỗi khi push lên main

VPS / Server (PM2)

npm run build
pm2 start npm --name "ipv6-summit" -- start

Docker Compose (Production)

docker-compose -f docker-compose.yml up -d --build

---

📱 Responsive Breakpoints

Màn hình	Kích thước
Mobile	< 768px
Tablet	768px – 1024px
Laptop	1024px – 1440px
Desktop	> 1440px

---

🤝 Đóng Góp

1. Fork repository
2. Tạo feature branch: git checkout -b feature/ten-tinh-nang
3. Commit: git commit -m 'feat: mô tả thay đổi'
4. Push: git push origin feature/ten-tinh-nang
5. Tạo Pull Request vào nhánh main

---

📄 License

MIT License — xem file LICENSE để biết thêm chi tiết.

---

Dự án: IPv6 Summit 2026 — Official Website
Công nghệ: Next.js 16 · TypeScript · Tailwind CSS v4 · MongoDB
Phiên bản: 0.1.0
Cập nhật: Tháng 5, 2026