Remaking the GDSC website

Remaking the GDSC website

Benjamin Tang, Natalie Hoang, Gavin Cartier, Avi Rami — University of California, Davis.

Introduction

Our goal was to recreate the website, blending a sleek, modern design and visuals with intuitive, navigable, and easily editable pages. These pages would include project displays, team information, GDSC-hosted event information, and contact information for the club. This website was to be made accessible on all screen sizes, including mobile.

Our Team

Team: Benjamin Tang, Natalie Hoang, Gavin Cartier, Avi Rami

Tech Director: Shubhada Martha

Timeframe & Tools

We began development in March 2025 and ended in May of the same year. The tools and technologies we used were React, Typescript and TailwindCSS for the frontend, and Firebase and Node for the backend.

Understanding the Problem

The website for our club, GDSC, was a bit lackluster. It was difficult to navigate, unintuitive, and didn’t contain features such as team information, project displays, and admin control interfaces. As such, this made it hard for prospective members to learn about the club, and hard for GDSC event attendees to learn about our events.

Our Solution

We built a new website for GDSC using designs provided by our designers. Key features of the frontend include a navigable headbar with links to the website pages, such as GDSC events, teams, and contact information. The main page of the website is also made with modern visuals and animated value propositions of the club’s influence and membership for interested visitors.

Design Process

The design of the website was provided to us by the club, and our job was to turn the Figma blueprint they gave us into a functional and responsive website.

Development Highlights

We broke down the design into reusable components using React, such as a shared Header, Footer, and page-specific sections. This helped maintain consistency across the site and simplified future updates. We implemented client-side routing using React Router, allowing users to navigate between pages seamlessly without full page reloads. A key focus was ensuring the website was mobile-friendly, which we accomplished by using TailwindCSS breakpoints to adapt the design to various screen sizes.

Challenges & Lessons Learned

One challenge was translating precise Figma layouts into flexible, responsive code, which required careful use of relative units, consistent spacing, and breakpoints to accomplish. Layout elements would sometimes shift unpredictably, or spacing would break, especially when switching between screen sizes. To address this, we focused on using relative units, maintaining consistent spacing, and applying TailwindCSS breakpoints more effectively. Additionally, aligning our interpretations of the design as a team was a collaborative challenge. We learned to communicate more clearly by sharing screenshots, meeting frequently, and commenting directly in Figma to clarify expectations. This reduced rework and kept everyone aligned.

Next Steps & Future Work

Additional features to improve the website could include pages for news, forwarding GDSC social media posts, and more dynamic styling for the website appearance. Implementing these features elegantly with the backend would be important for maintaining project scalability.

Shoutouts & Thanks

It was a privilege to work on a project that impacts the club directly and helps current and future GDSC members have an online space to learn about the club, see their work shown, and stay updated with events. We are grateful to the GDSC board and to each other for working together on this important milestone for GDSC.