Columbia Formula Racing Website

I individually designed, developed, and deployed the official website for Columbia’s Formula Racing team, one of the university’s largest and most visible engineering clubs. Built in React with Tailwind CSS and deployed via GitHub Pages, the site serves as both a public-facing showcase and an internal resource, balancing aesthetics, performance, and maintainability.

​

Visit the site here: https://fsae.engineering.columbia.edu/

Goals

• Create a modern, responsive website to represent the team’s cars, subteams, sponsors, and leadership.

• Centralize team information, media, and documentation for easier access by prospective members and supporters.

• Build a platform that future team members can easily maintain and expand.

• Improve the team’s online presence for recruitment, sponsorship, and visibility.

• Incorporate version control best practices to support collaborative updates over time.

​

Specs

• Front-end: React (with hooks and component architecture), Tailwind CSS for fast and consistent styling

• Tooling: GitHub Pages for deployment, Git for version control, Figma for design prototyping

• Performance: Optimized for responsiveness and mobile viewing with accessible semantic markup

• Codebase: Modular structure with reusable components and clear separation of content and layout

• Maintenance: Built with documentation and ease-of-update in mind for non-technical future users

​

Design process

• Started with low- and mid-fidelity mockups in Figma to explore layout, hierarchy, and visual direction.

• Identified key user flows: browsing cars, reading about subteams, contacting leadership, and accessing sponsor links.

• Iterated on section structure to balance visual interest (hero images, hover effects) with clarity and load performance.

• Used Tailwind for rapid prototyping and scalable styling decisions with consistent design tokens.

• Regularly validated the design with teammates and leadership for usability and polish.

​

Challenges

• Designing for a wide and varied audience: sponsors, students, alumni, and technical team members.

• Ensuring code clarity and maintainability for future contributors.

• Adapting dynamic, media-heavy content for a static-site workflow using GitHub Pages.

• Creating a structure that scales with the team’s evolving needs (e.g., news updates, new sponsors).

​

Outcomes

• Delivered a fully responsive, production-ready website visited by prospective sponsors, students, and engineering faculty.

• Improved team visibility and professionalism across outreach materials, applications, and recruitment events.

• Enabled non-technical team leads to request and suggest updates with confidence thanks to clear organization and GitHub workflow.

• Created a flexible content structure that allows for new cars, members, and sponsors to be added with minimal effort.

• Demonstrated initiative and ownership in delivering a full-stack project aligned with organizational goals.

​

Potential next steps

• Add a CMS-like markdown or Airtable backend to enable team members to update content without editing code.

• Integrate basic analytics to track traffic and engagement from outreach and event campaigns.

• Explore expanding the site with interactive components (e.g., car specs visualizer, subteam Q&A sections).

• Create a documentation guide for future developers to ensure long-term maintainability.