← All work
Case study · 2025

Hello World Hacks

The website for Hello World Hacks 2025 at RCCIIT, with 3D models, a section-aware AI chatbot grounded in event data, and full schedule, tracks and prizes.

Next.jsTypeScriptReact Three FiberDreiGeminiTailwind CSSRadix UILenisVercel AnalyticsLive site ↗Source ↗
helloworldhacks.vercel.app
Hello World Hacks — screenshot of the live site

Overview

This is the official site for Hello World Hacks 2025, a hackathon run by GDGC RCCIIT with RCCTECHZ, where I was a co-organiser. It is a single long page covering the hero, upcoming events, schedule, tracks, prizes, sponsors, partners and FAQ, with extra pages for mentors and events. The site has animated 3D models and AstroBot, a chatbot that answers questions about the hackathon and can scroll you to the right section.

The problem

Hackathon participants ask the same questions on Discord over and over: dates, tracks, prizes, how to register. I wanted the site to answer those questions itself, without the bot inventing details that organisers would later have to correct.

What I built

  • A Next.js App Router site where each section has an anchor ID, with Lenis smooth scrolling, a custom cursor, a loader and background music.
  • 3D hero and "rangers" scenes using React Three Fiber and Drei useGLTF, with the GLB animations played through useAnimations.
  • AstroBot, whose intents are checked in layers: "play music" and "stop music" toggle the audio element, and "go to" or "show me" plus a section name scrolls to that section. Everything else goes to Gemini 2.0 Flash.
  • A single hackathon-info.ts file (dates, organisers, schedule, tracks, prizes) that is both the content source and the only context in the bot's prompt. The prompt runs at temperature 0.2 and tells the model to refuse anything outside that data.
  • A keyword-based fallback responder that answers date, track and prize questions from the same data if the Gemini call fails.
  • Vercel Analytics for traffic. CopilotKit is installed, but the live bot calls the Gemini REST API directly.

Architecture

A static-first Next.js site with one client-side call to Gemini.

flowchart LR
  subgraph client["Browser"]
    page["Single page sections"]
    three["R3F scenes with GLB models"]
    bot["AstroBot chatbot"]
    audio["Theme music player"]
  end
  subgraph content["Content"]
    info["hackathon-info.ts"]
  end
  subgraph ext["External"]
    gem["Gemini 2.0 Flash REST"]
    va["Vercel Analytics"]
  end
  page --> three
  bot -->|"scrollIntoView"| page
  bot -->|"toggle"| audio
  info --> page
  info -->|"prompt context"| bot
  bot -->|"generateContent"| gem
  page --> va

System design

How a message to AstroBot is routed.

sequenceDiagram
  participant U as Visitor
  participant B as AstroBot
  participant P as Page
  participant G as Gemini
  U->>B: Type a message
  alt mentions play or stop music
    B->>P: Toggle audio element
    B-->>U: Music status
  else go to or show me plus a section name
    B->>P: scrollIntoView on section id
    B-->>U: Navigated to section
  else general question
    B->>G: Prompt with hackathon info and rules
    alt response ok
      G-->>B: Answer text
      B-->>U: Answer
    else request fails
      B->>B: Keyword fallback over the same data
      B-->>U: Canned answer
    end
  end

Learnings

  • Keeping the bot's knowledge in one data file meant that updating the schedule updated the site and the bot together.
  • Handling navigation and music on the client before calling the model made those actions instant and free.
  • The Gemini key is a NEXT_PUBLIC_ variable called from the browser. That was acceptable for a short-lived event site, but a small server route would keep it private.