Firebird Hackathon | From event identity to digital infrastructure
MY CREATIVE CENTER designed and developed the complete Firebird Hackathon website, connecting immersive branding, project delivery, judging and event operations. The HKUST 35th-anniversary event brought together 104 teams and more than 200 participants from nine countries and regions.
A hackathon needs more than an event brochure. Participants need to understand industry challenges, follow the schedule, organise teams and submit work. Organisers need these steps to connect through a shared digital entry point. We delivered visual design, interaction development and API integration around the actual event journey.
Our scope covered the complete website design and development: information architecture, event visuals, responsive interfaces, motion, progress reporting, submissions, file storage, project presentation, judge assignment, score aggregation and voting. The frontend works with Cloudflare Workers, D1, R2 and Workers AI to connect participant experiences with the organising team’s daily operations.
This project expresses our approach to digital product design: information, behaviour and systems belong together. Technology creates visual impact while clarifying complex workflows, making large-file delivery visible and preserving usability across devices.
SYSTEM FLOW
- React frontend & real-time interaction
- Workers business API
- D1 data & R2 files
- Judging, operations & AI translation
01 / Frontend architecture: shared state for presentation and workflows
The interface uses React 18.3.1 with the DCLogic template runtime. Templates mount as React components, with state / setState driving form fields, view changes and feedback. URL hashes locate views such as challenges and submissions, connecting the event narrative with ongoing participant tasks.
- UI runtime
- React / ReactDOM 18.3.1 · DCLogic
- Views & preferences
- Hash-based view selection · language preference in localStorage
02 / Real-time visuals: particle systems and WebGL
The Firebird scene uses Three.js for real-time particles, with BufferGeometry, typed arrays and custom particle attributes organising the scene data. Shader-driven visuals and an EffectComposer / UnrealBloomPass bloom pipeline extend the brand into a dynamic scene. The configured scene combines 22,000 primary sampled particles and 460 embers to give the event identity a sense of spatial depth.
- Rendering engine
- Three.js 0.128.0 · WebGL
- Scene composition
- 22,000 primary sampled particles + 460 ember particles
- Post-processing
- EffectComposer · UnrealBloomPass bloom
03 / Motion orchestration: scrolling as part of the experience
GSAP and ScrollTrigger tie typography, sections and parallax to scroll progress. Lenis supplies smooth scrolling and synchronises ScrollTrigger updates. IntersectionObserver triggers viewport reveals and count-up effects, coordinating large-scale scenes with local feedback.
- Scroll animation
- GSAP / ScrollTrigger 3.12.5
- Smooth scrolling
- Lenis 1.0.42 · synchronised scroll events
- Accessibility
- Respects the prefers-reduced-motion preference
04 / Rendering budget: resource constraints in the implementation
The scene caps pixel density and monitors frame time. Persistent slow frames disable bloom while retaining the base scene, and scene updates are skipped when the page is hidden. A static Canvas 2D drawing path is also included. These choices put resource awareness into the rendering logic, adapting visual effects to device conditions and page visibility.
- Pixel ratio cap
- devicePixelRatio capped at 1.4
- Adaptive post-processing
- Accumulated frames above 42 ms trigger bloom disablement
05 / API separation: interface and business services
A JavaScript Worker handles requests through its Fetch entry point, routing event operations by HTTP method and path. The production domain supports same-origin /api routing. JSON APIs serve frontend submissions and data retrieval, Worker-generated HTML serves administrative views, and CSV responses support exports. Interface interactions, data operations and event administration share one backend implementation.
- Runtime & protocols
- Cloudflare Workers · Fetch API · HTTPS
- Interfaces & outputs
- Same-origin API · JSON · server-rendered HTML · CSV
06 / Data architecture: event state and project records
Cloudflare D1 stores structured event data for submissions, progress, judges, assignments, scores, public curation, votes and test flags. The Worker uses prepare / bind for parameterised SQL. R2 stores file contents while D1 stores their object keys. Resubmissions retain submission identifiers and history, preserve earlier values for blank fields and restrict which material fields may be updated, keeping project updates connected to judging references.
- Structured data layer
- Cloudflare D1 · parameterised SQL
- Data / file separation
- D1 stores metadata and object keys · R2 stores files
- Resubmission handling
- Retained project ID · material-field updates · history reconciliation
07 / File architecture: R2 signed uploads and temporary access
Cloudflare R2 stores project files. The Worker validates signing requests using team, project, material kind, filename and declared size, then implements AWS Signature V4 with Web Crypto SHA-256 / HMAC to generate S3-compatible temporary upload URLs. The browser uploads directly to R2 via XMLHttpRequest PUT, then submits object keys and project metadata to D1. Downloads also use time-limited signatures, separating transfer, business records and access authorisation.
- Object storage & signing
- Cloudflare R2 · S3-compatible API · AWS Signature V4
- Upload signature lifetime
- 3,600 seconds / 60 minutes
- Upload flow
- Request signature → PUT upload to R2 → file references in D1
- Transfer feedback & validation
- Progress, speed and ETA · file-kind and declared-size validation
08 / Judging and operations: assignments to ranking views
Judge-to-project assignments are stored in a mapping table and configured through an administrative matrix. The Worker writes assignments to D1 in batches of 40. Scores are organised by round, judge and project, with ON CONFLICT updates for dimensions, total scores, notes and timestamps to support repeated saves. Administrative features include publication controls, finalist flags, awards and cover management, progress summaries, rankings, participant-list preparation and CSV exports.
- Score record key
- Round × judge × project · ON CONFLICT updates
- Assignment writes
- D1 batch · 40 records per batch
- Operational outputs
- Project curation · ranking views · CSV exports
09 / Access and consistency: server-side rules
Administrative views use HTTP Basic authentication, with configuration such as the administrator password held in Cloudflare Secrets. Judging validates judge codes and supports an additional password check. Voting enforces the deadline server-side and uses hashed identifiers, composite database keys and a per-network, per-project time-window limit to handle repeated records. Historical votes are reconciled after project updates to keep the public presentation connected to the project record.
- Identity & configuration
- Admin authentication · judge-code validation · Cloudflare Secrets
- Vote record handling
- SHA-256 identifiers · composite keys · server-side deadline and frequency checks
10 / AI and languages: cross-regional judging and exchange
The interface supports Simplified Chinese, Traditional Chinese and English, persisting the language preference in localStorage. Server-side translation handles dynamic project descriptions and judging content. The source configures Cloudflare Workers AI’s @cf/meta/m2m100-1.2b model for Chinese-to-English translation and includes an optional Google Cloud Translation adapter. The current deployment has a confirmed Workers AI binding. Translation assists understanding across regions.
- Interface languages
- Simplified Chinese · Traditional Chinese · English
- AI translation configuration
- Workers AI · @cf/meta/m2m100-1.2b
- Application context
- Dynamic project descriptions · Chinese / English judging support
Organisational involvement and project significance
Founder Ma Ye participated in preparing and organising the event as an HKUST alumnus, Vice-President of the HKUST Mainland Alumni Association and Co-Chair of the organising committee. MY CREATIVE CENTER translated innovation-community needs into an interactive system for participation, submissions and collaboration—a concrete example of our work connecting design, technology and innovation practice.
一场黑客松需要的不只是活动展示页。参赛者需要理解企业命题、掌握赛程、组织团队、提交作品；组织团队需要让这些环节在同一个数字入口中协同。我们围绕真实的赛事流程，将视觉设计、交互开发与接口集成作为一个整体交付。
公司承担官网的整体设计与开发，覆盖信息架构、赛事视觉、响应式界面、交互动效，以及项目进度、作品提交、文件存储、作品展示、评委分配、评分汇总和投票等环节。前端与 Cloudflare Workers、D1、R2 及 Workers AI 协同，将参赛体验和组委会的日常运营连接为一套数字基础设施。
这项实践体现了我们的数字产品观：产品设计同时涉及信息、行为与系统。技术不只用于制造视觉冲击，也需要让复杂流程变得清晰、让大文件交付更可见，并为不同设备保留可用的体验。
技术流程 / SYSTEM FLOW
- React 前端与实时交互
- Workers 业务接口
- D1 数据与 R2 文件
- 评审、运营与 AI 翻译
01 / 前端架构：让展示与业务共享状态
官网以 React 18.3.1 与 DCLogic 模板运行时组织界面。模板挂载为 React 组件，使用 state / setState 驱动表单字段、视图切换和交互反馈；URL Hash 用于定位赛事命题和作品提交等页面视图。这样，官网既能承载完整的赛事叙事，也能处理连续的参赛操作。
- 界面运行时
- React / ReactDOM 18.3.1 · DCLogic
- 视图与偏好
- Hash 视图定位 · localStorage 语言偏好
02 / 实时视觉：粒子系统与 WebGL 渲染
火鸟视觉通过 Three.js 构建实时粒子场，采用 BufferGeometry、类型化数组和自定义粒子属性组织数据，并以着色器控制视觉表现。EffectComposer 与 UnrealBloomPass 叠加辉光，使品牌意象从平面标识延展为动态场景。场景由 22,000 个主体采样粒子与 460 个余烬粒子构成，让赛事品牌拥有可感知的空间层次。
- 渲染引擎
- Three.js 0.128.0 · WebGL
- 场景构成
- 22,000 个主体采样粒子 + 460 个余烬粒子
- 后期处理
- EffectComposer · UnrealBloomPass 辉光
03 / 动效编排：滚动是体验的一部分
GSAP 与 ScrollTrigger 将文字、区块和视差效果绑定到滚动进度，Lenis 负责平滑滚动并同步更新 ScrollTrigger。进入视口的展示与数字递增通过 IntersectionObserver 触发，让大型视觉与局部反馈各自承担清晰的叙事任务。
- 滚动动画
- GSAP / ScrollTrigger 3.12.5
- 平滑滚动
- Lenis 1.0.42 · 滚动事件同步
- 可访问性
- 读取 prefers-reduced-motion 偏好
04 / 渲染预算：把资源约束写进实现
页面对高密度屏幕的像素比设置上限，并监测渲染帧耗时：持续出现慢帧时关闭辉光后处理，保留基础场景渲染；页面隐藏时跳过该场景的帧更新。实现也提供 Canvas 2D 静态绘制路径。这些措施将资源意识落实到具体的渲染决策中，让视觉表现能够适应设备条件与页面使用状态。
- 像素比上限
- devicePixelRatio 最大 1.4
- 自适应后期
- 超过 42 ms 的慢帧累积触发关闭辉光
05 / 接口分层：交互与业务服务解耦
业务后端以 JavaScript Worker 的 Fetch 入口接收请求，按 HTTP 方法与路径分发赛事操作；正式域名下兼容同源 /api 路由。JSON API 用于前端提交和读取数据，后台汇总与分配界面由 Worker 返回 HTML，CSV 响应用于数据导出。这样，交互界面、数据操作与运营管理共享一套后端实现。
- 运行与协议
- Cloudflare Workers · Fetch API · HTTPS
- 接口与输出
- 同源 API · JSON · 服务端 HTML · CSV
06 / 数据架构：赛事状态与作品记录分层
Cloudflare D1 保存结构化赛事数据，围绕作品提交、项目进展、评委、作品分配、评分、公开展示、投票和测试标记组织数据实体。Worker 使用 prepare / bind 参数化 SQL 执行查询和写入，文件本体保存在 R2，D1 记录对应对象键。作品补交保留提交编号和历史记录，沿用留空字段的先前值，并限制可覆盖的材料字段，让作品更新与评审引用保持衔接。
- 结构化数据层
- Cloudflare D1 · 参数化 SQL
- 数据与文件分工
- D1 保存元数据与对象键 · R2 保存文件
- 补交机制
- 保留作品代号 · 材料字段更新 · 历史记录归并
07 / 文件架构：R2 签名直传与临时访问
文件由 Cloudflare R2 对象存储承接。Worker 根据团队、项目、材料类型、文件名和大小校验签名请求，通过 Web Crypto 的 SHA-256 / HMAC 实现 AWS Signature V4，生成 S3 兼容的临时上传地址。浏览器以 XMLHttpRequest PUT 直传 R2，完成后将对象键与项目元数据提交到 D1。下载也采用限时签名地址；传输层、业务记录和访问授权分别承担职责。
- 对象存储与签名
- Cloudflare R2 · S3 兼容 API · AWS Signature V4
- 上传签名有效期
- 3,600 秒 / 60 分钟
- 上传链路
- 请求签名 → PUT 直传 R2 → 文件引用写入 D1
- 传输反馈与校验
- 进度、速度、预计剩余时间 · 文件类型与声明大小校验
08 / 评审与运营：从分配矩阵到排名看板
评委与作品的关系通过分配表保存，组委会在矩阵界面配置分配，Worker 按每批 40 条写入 D1。评分按轮次、评委与作品组织，采用 ON CONFLICT 更新多维评分、总分、评语与时间戳，支持重复保存。后台还提供作品上墙、决赛标记、奖项与封面管理，以及进展汇总、排名看板、名单整理和 CSV 导出，把赛事运营从分散表格转为连贯流程。
- 评分记录键
- 轮次 × 评委 × 作品 · ON CONFLICT 更新
- 分配写入
- D1 batch · 每批 40 条
- 运营输出
- 作品管理 · 排名看板 · CSV 数据导出
09 / 访问与一致性：规则落实在服务端
管理界面使用 HTTP Basic 身份验证，后台密码等配置保存在 Cloudflare Secrets；评审操作校验评委码，并支持额外密码校验。投票在服务端检查截止时间，以哈希标识和数据库复合键处理重复记录，配合同一网络对同一作品的时间窗口频率控制。作品更新后，系统会归并历史提交关联的票数，让公开展示与作品记录保持一致。
- 身份与配置
- 管理认证 · 评委码校验 · Cloudflare Secrets
- 投票记录机制
- SHA-256 哈希标识 · 复合键 · 服务端截止与频控
10 / AI 与多语言：支持跨地区评审和交流
界面支持简体中文、繁体中文和英文，并在 localStorage 中保留语言偏好。动态作品介绍与评审内容通过服务端翻译接口处理，源码配置 Cloudflare Workers AI 的 @cf/meta/m2m100-1.2b 模型进行中文到英文翻译，并保留 Google Cloud Translation 的可配置适配路径。当前部署已确认绑定 Workers AI；这项能力用于语言辅助，让不同地区的参与者与评委更容易理解作品内容。
- 界面语言
- 简体中文 · 繁体中文 · English
- AI 翻译配置
- Workers AI · @cf/meta/m2m100-1.2b
- 业务场景
- 动态作品介绍 · 评审内容的中英理解辅助
组织参与与项目意义
公司创始人马烨 Ma Ye 以香港科技大学校友、香港科技大学内地生校友会副会长身份参与赛事筹备与举办，并担任赛事组委会联合主席。MY CREATIVE CENTER 将数字产品能力带入活动现场，把创新社区的需求转化为可交互、可提交、可协作的实际系统。这也是公司连接设计、技术与创新实践的一项具体案例。