UTM Billiards Club: Site Documentation

Last updated: April 2026 | Made by Marco Anthony Ayuste (Class of 2027)

1. Site Overview

The UTMBC website is a React single-page application built with Vite, TypeScript, and Tailwind CSS. It provides club information, schedules, live rankings, rules, an AI FAQ chatbot, and a browser-based 8-ball game.

Pages

Route	Page	Purpose
`/`	Home	3D hero, current schedule, upcoming tournaments
`/league`	League	League info, how to join, Elo system, schedule
`/practice`	Practice	Practice session details, current + past schedule
`/tournaments`	Tournaments	Tournament info, schedule, 2v2 bracket generator
`/rankings`	Rankings	Live standings from Google Sheet with search/filter
`/rules`	Rules	BCA 8-ball rules + club decorum (tabbed)
`/about`	About	Mission, values, learning goals
`/people`	People	Executive team carousels with click-to-expand cards
`/contact`	Contact	Contact info, email, message form
`/join`	Join	Embedded Google Form for registration
`/game`	Game	Browser-based 8-ball pool game

2. Tech Stack

Layer	Technology
Framework	React 19 + TypeScript (strict mode)
Build Tool	Vite
Styling	Tailwind CSS + custom CSS
Routing	React Router v7
3D	Three.js (pool table hero scene)
Deploy	Netlify (static SPA)
Data	Google Sheets CSV (rankings), JSON (FAQ, events)

3. How to Run Locally

Install dependencies

npm install

Start dev server

npm run dev

Open http://localhost:5173 in your browser.

Build for production

npm run build

4. How to Deploy to Netlify

Push the repo to GitHub.
Log in to Netlify and import the repo.
Set Build command: npm run build
Set Publish directory: dist
Deploy.

5. How to Update Schedules & Tournaments

All schedule and tournament data lives in one file: public/data/events.json.

The JSON has two top-level sections: current (active season) and past (archived season).

Add a new tournament

{
  "date": "2026-04-15",
  "start": "1:00 PM",
  "end": "6:00 PM",
  "location": "Blind Duck Pub (Student Centre)",
  "format": "1-on-1 8-ball",
  "notes": "Prize: $50 gift card"
}

Use ISO date format (YYYY-MM-DD) for the date field.

6. How Rankings Work

Rankings are pulled live from a published Google Sheet (tab: Ranked Pool Standings). The sheet must be shared as "Anyone with the link -> Viewer".

Fetches CSV export on page load
Names abbreviated (first name + last initial)
Search by name and filter by tier
Top 3 shown on a podium

7. How the Chatbot Works

The chatbot is a client-side FAQ bot that runs entirely in the browser (no server required).

Loads public/data/faq.json and public/data/events.json
Uses Jaccard similarity, synonym expansion, and intent detection to match questions
Resolves dynamic templates with live schedule data
Floating chat bubble on every page with quick-action chips

8. How to Update the People Page

Edit src/pages/People.tsx. Each team member is an object in the newTeam or foundingTeam array:

{ name: 'Name', role: 'Role', desc: 'Bio.', img: '/img/photo.png' }

Place headshot images in public/img/. Cards are clickable and open an expanded modal.

9. How to Update FAQ Data

Edit public/data/faq.json. Dynamic answer templates: {{leagueDays}}, {{practiceSessions}}, {{tournaments}}, {{location}}, {{schedule}}.

10. Common Issues & Fixes

Issue	Fix
Rankings blank	Check Google Sheet is shared as "Anyone with the link -> Viewer"
Schedule not updating	Edit `public/data/events.json`, redeploy
Chatbot not responding	Check `public/data/faq.json` exists and is valid JSON
Build fails	Run `npm install` then `npm run build`
CSP blocking requests	Check `index.html` Content-Security-Policy meta tag

11. Contact

Club email: utmbc@studentorg.utoronto.ca
Instagram: @utmbilliards
Site developer: Marco Anthony Ayuste