blackspider-ops/gdg-ctf-challenge

# GDG CTF 平台 一个为 Google Developers Group 构建的夺旗赛 (CTF) 挑战平台，采用 React、TypeScript 和 Supabase 开发。 ## 项目概述 GDG CTF 平台是一个用于举办网络安全和编程挑战的 Web 平台。参与者可以解决 CTF 挑战，跟踪他们的进度，并在排行榜上竞争。 ## 功能特性 - **CTF 挑战系统**：多种难度级别的网络安全和编程挑战 - **实时排行榜**：跟踪参与者排名和分数 - **用户资料**：个人进度跟踪和统计数据 - **管理面板**：为组织者提供的综合管理工具 - **证书系统**：为表现优异者颁发证书 - **活动管理**：控制活动状态和设置 - **渐进式提示**：为遇到困难的参与者提供帮助系统 ## 技术栈 - **前端**：React 18 配合 TypeScript - **样式**：Tailwind CSS 配合自定义赛博主题组件 - **后端**：Supabase（PostgreSQL 数据库、身份验证、存储） - **构建工具**：Vite - **UI 组件**：Shadcn/ui 组件 ## 入门指南 ### 前置条件 - Node.js（v16 或更高版本） - npm 或 yarn 包管理器 ### 安装步骤 1. 克隆仓库： ``` git clone cd gdg-ctf-platform ``` 2. 安装依赖： ``` npm install ``` 3. 设置环境变量： 使用你的 Supabase 凭证创建一个 `.env` 文件： ``` VITE_SUPABASE_URL=your_supabase_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key ``` 4. 启动开发服务器： ``` npm run dev ``` 应用程序将可通过 `http://localhost:8080` 访问 ### 生产环境构建 ### 生产环境前置条件 - Node.js 18+ - 所有环境变量已配置 - Supabase 项目已设置适当的 RLS 策略 ### 构建命令 ``` # 安装依赖 npm install # Build for production npm run build # 在本地预览 production build npm run preview ``` 构建后的文件将位于 `dist` 目录中。 ### 生产环境部署 1. 在你的托管平台中设置环境变量 2. 构建项目：`npm run build` 3. 将 `dist` 文件夹内容部署到你的 Web 服务器 4. 配置你的 Web 服务器为所有路由提供 `index.html` 服务（SPA 路由） 5. 确保已启用 HTTPS 6. 在生产环境中测试所有功能 ### 托管建议 - **Vercel**：零配置部署，自动 HTTPS - **Netlify**：轻松部署，支持表单处理和重定向 - **AWS S3 + CloudFront**：可扩展的静态托管 - **Firebase Hosting**：Google 提供的带 CDN 的托管服务 ### 包含的性能优化 - ✅ 代码分割和懒加载 - ✅ 优化的包体积 - ✅ 图片优化就绪 - ✅ 字体预加载 - ✅ CSS 清理 - ✅ Gzip 压缩就绪 - ✅ 用于缓存的 Service worker - ✅ 用于移动端安装的 PWA manifest ### 响应式设计特性 - ✅ 移动优先的响应式设计 - ✅ 触控友好的界面 - ✅ 针对所有设备尺寸优化（320px 至 2560px+） - ✅ 带有移动端卡片布局的响应式表格 - ✅ 带有汉堡菜单的移动端导航 - ✅ 无障碍设计模式 ## 项目结构 ``` src/ ├── components/ # Reusable UI components ├── hooks/ # Custom React hooks ├── integrations/ # External service integrations ├── lib/ # Utility functions ├── pages/ # Main application pages └── types/ # TypeScript type definitions ``` ## 数据库结构 应用程序使用 Supabase，包含以下主要数据表： - `profiles` - 用户信息和角色 - `challenges` - 编程挑战定义 - `challenge_progress` - 用户在挑战中的进度 - `user_summary` - 汇总的用户统计数据 - `certificates` - 证书管理 - `event_settings` - 全局活动配置 ## 贡献指南 1. Fork 本仓库 2. 创建一个功能分支 3. 进行你的更改 4. 彻底测试 5. 提交 Pull Request ## 许可证 本项目采用 MIT 许可证授权。

标签：CTF平台, Google Developers Group, PostgreSQL, React, Shadcn/ui, Supabase, Syscall, Syscalls, Tailwind CSS, TypeScript, Vite, Web开发, 夺旗赛, 安全插件, 安全教育, 实时排行榜, 活动管理, 测试用例, 漏洞修复, 竞赛系统, 管理员面板, 网络安全, 网络安全培训, 自动化攻击, 自动化攻击, 认证证书系统, 隐私保护