UBC Launch Pad is a student-run software engineering club at the University of British Columbia. I previously worked on the club’s old website, but by mid-2019 the website was showing its age and had not been kept up to date with our refreshed branding. In April 2020, using designs provided by UBC Launch Pad’s design team, I built a prototype of a new website in 2 days, and worked with a few contributors to bring the prototype to completion and launch in a total of just 8 days!

The new website was built from the ground up to solve two main pain points of its predecessor: the lack of a modern web framework (which made the previous site difficult to build on top of), and the fact that almost all content was hardcoded (which made it difficult for new members to update the website). To remedy these problems, the new website:

• is built in Vue.js and TypeScript, to improve code reuse and have some self-documentation built in via static types
• is structured to fit our design, with each section of the vertically-scrolling website being a self-contained component and a set of shared utilities, styles, and components to make it effortless to implement new sections, animate them, and have them fit in with the rest of the website
• has a robust contribution guide featuring a wide variety of tips, tricks, and resources for making changes to the website
• features a comprehensive, self-documenting configuration system that can be used to easily toggle entire website sections and change the content of frequently-updated sections, such as the website’s featured projects, from a single TypeScript-based configuration file. This means configuration changes are inherently self-validating, and allows us to automatically generate comprehensive documentation from our type definitions

The redesigned website is still fully responsive!

In addition to the features listed above, I also worked on:

• making the website fully responsive across all screen sizes
• integrating with our hosting provider Netlify to automatically generate redirect links from site configuration
• designing and building a new way to browse our projects through interactive modals, which teams can customise in the site configuration to feature media (images or YouTube videos) and links of their choice. The modals can also generate links that can be shared to bring visitors directly to the project modal of their choice!

Effortlessly dive into a project for more details with the new website's modal-based projects showcase

Check out my pull requests in more detail on GitHub, and see the website live at ubclaunchpad.com!