Skip to content
aboutexperienceprojectsside questsSay hi
all projects

~/project/nwplus.md

nwPlus.io

The club behind Western Canada's largest hackathons

Timeline
September 2022 - March 2025
Type
Website
Team
Donald Lee, with nwPlus dev and design team
My role
Developer, then Dev Director
nwplus.ioGitHub
nwplus.io · preview

## overview

nwPlus is the UBC club that runs nwHacks, HackCamp, and cmd-f. nwplus.io is where students find out what we do, which hackathon is coming up, who's on the team, and how to join. It's also where sponsors look before they decide to support us.

I worked on it as a developer, then as Dev Director I suggested a full revamp and led the dev team through it.

hackathons developed for
12+hackathons developed for
hackers per year
1000+hackers per year
developers led
9developers led

## keeping-it-up-to-date

Keeping it up to date

Club websites get passed down from team to team. Nothing changes for months, then a lot changes at once: a new hackathon opens, new teams are hired and announced, applications open and close. If updating the site is a pain, it falls behind, and that's not a good look for sponsors or hackers.

As a developer, most of my work was keeping up with those updates. Looking back at my commits, a lot of them are the same few changes, every season, and each one meant editing the code, getting it reviewed, and redeploying the site:

  • Updating the team section with everyone's profile, role, and socials every year.
  • Opening and closing application statuses for HackCamp, nwHacks, and cmd-f.
The dev team behind HackCamp 2024.
The dev team behind HackCamp 2024.

## why-a-revamp

Why a revamp?

When I became Dev Director, I wanted to make our site easier to update and easier for visitors find information and get a sense of what our club is like

  • It wasn't the most modern (last revamp was years ago).
  • The stats sponsors care about, like how many hackers and projects we've had, were hard to find.
  • We had a lot of nice features, but they were hidden where most people would never see them.
The nwPlus team at nwGala 2026.
The nwPlus team at nwGala 2026.

## the-revamp

The revamp

So I suggested a revamp. I wanted the site to feel more modern and actually show our club culture. The site has three main visitors: hackers looking for the next event, students who might want to join, and sponsors deciding whether to support us. I wanted each of them to find what they came for quickly.

For students thinking about joining, photos from our socials, like our events and team hangouts show the people behind the hackathons. A club website is also our hiring page. When we're looking for new execs, seeing that we actually have fun together makes people want to apply.

We moved the stats to the top where sponsors would see them right away. I built a new hero section, a hackathons section where each event gets its own planet, a mobile navbar, a newsletter signup with a confirmation step, and a section for sponsors. Before it went live in fall 2024, we went through a few rounds of testing as a team.

The new hero section.
The new hero section.
The stats, now right near the top.
The stats, now right near the top.
The team section, which gets updated every year.
The team section, which gets updated every year.

## opening-applications-without-a-developer

Opening applications without a developer

Opening applications shouldn't need a developer. The organizers running each hackathon know when applications open, and they shouldn't have to wait on a code change to tell people.

So right after the revamp, I moved each hackathon's dates and whether applications are open into Firebase. The site reads them when it loads. It also sorts the hackathons on its own: the next one shows first, an event stays up for three days after it starts, and past events move to the back. Since our admin portal already writes to Firebase, organizers can open or close applications and change dates from there, and the site updates right away, with no pull request and no deploy.

Each hackathon gets its own planet. The order and application status come from Firebase.
Each hackathon gets its own planet. The order and application status come from Firebase.

## key-learnings

What I learned

  1. 01

    People come to a hackathon website to find something specific, like when the event is or whether applications are open. They want it fast, so that information should be the easiest thing to find.

  2. 02

    A website should be easy to keep up to date. Letting organizers change things through our admin portal, instead of asking a developer every time reduces a lot of friction.

## built-with

Frontend

  • Next.js
  • React
  • styled-components
  • Lottie

Backend & deploy

  • Firebase
  • Firestore
  • Firebase Hosting
  • GitHub Actions

## next-project

HonkHonkHire

AI mock interviews tailored to you

read the write-up