Behind the Build: The Story of HackCanada 🚀

When we started working on HackCanada, we didn’t just want another hackathon website. We wanted a platform that truly feels alive — fast, minimal, and developer-friendly — a place that reflects the energy of the hackathon community across Canada.

This post takes you behind the scenes of how we built it, what we learned, and why we chose the tech stack we did.

🌍 The Idea

The goal was simple:

“Create a sleek, responsive site for HackCanada that’s blazing fast and effortless to maintain.”

HackathonsCanada wanted a modern web experience to represent their national hackathon events — a place for participants, organizers, and sponsors to connect. We aimed to make the site modular, performance-oriented, and scalable for future events.

🏗️ The Tech Stack

We handpicked each tool to make development fast, consistent, and modern:

- Astro: The foundation of the site. Astro’s island architecture gave us static-site performance with the flexibility of React components.

- React: Used for all interactive UI components.

- TypeScript: Ensures type safety and a clean developer experience.

- TailwindCSS: For effortless styling and consistent design tokens.

- shadcn/ui: Beautiful, pre-built components powered by Radix UI.

- Lucide Icons: Lightweight, open-source icons for our UI.

- PNPM: Our package manager of choice — faster installs and better monorepo support.

⚙️ Project Structure

We kept things modular and human-readable: