Saint Brendans Gaelic Football Club
Project Overview
Saint Brendans Gaelic Football Club is a local football club that previously had no centralised online presence. This project involved designing and developing a website using React to improve communication, increase visibility, and support club growth through member and sponsor engagement.
Problem
The club relied on fragmented communication channels such as social media and word-of-mouth creating some several challenges:
• Difficulty in accessing up-to-date fixtures and match results from a centralised source.
• Limited visibility for sponsors.
• Difficulty promoting events and achievements.
As a result, engagement and growth opportunities were constrained..
Approach & Process
The approach focused on creating a centralised, action-oriented platform that serves three key user groups: Players & Members, to join and stay informed; Suppporters, to follow matches and updates, and; Sponsors, to gain visibility and explore partnership opportunities.
The website was designed to balance content visibility with clear calls-to-action.
The project followed a structured SDLC approach, combining design validation and component-based development.
Planning & Requirements
Key user groups (members, supporters, sponsors) were identified, and their primary needs were defined.
Design
High-fidelity wireframes and prototypes were created in Figma to define layout, content hierarchy, and user flows. This allowed early validation of key decisions such as CTA placement and navigation structure.
Development
The design was implemented using React focusing on reusable components such as cards, forms, and section layouts ensuring consistency and scalability.
Testing
The interface was continuously reviewed to improve usability, responsiveness, and clarity of key actions such as joining the club or viewing fixtures.
Technology & Implementation
The website was built using React, with Vite used as the build tool to support fast development and efficient bundling. Additional technologies are listed as follows:
• Figma was used to design high-fidelity designs to guide the development process.
• Material UI (MUI) was used to create consistent, accessible UI components and accelerate layout development.
• Dynamic data such as fixtures and news is managed through Firebase Firestore, allowing the application to fetch and display real-time content directly from the client.
• EmailJS was integrated to handle contact form submissions without requiring a dedicated backend service.
• GitHub was used for version control.
• The project was explored using Cloudflare’s ecosystem for deployment, including initial experimentation with Cloudflare Workers. However, the final architecture primarily relies on client-side data fetching and third-party services to minimise backend complexity.
Key features include:
• Reusable UI components.
• Structured layout for fixtures, news, and sponsors.
• Scalable codebase for future enhancements.
This approach improves maintainability and supports future development.
Outcome
The final product provides the club with a centralised platform for communication, engagement, and promotion. This project demonstrates my ability to:
• Apply full SDLC thinking from design to deployment.
• Translate real-world needs into digital solutions.
• Build scalable front-end systems using React.
• Design for multiple user groups with clear interaction goals.