Contract frontend build

Findaside

Football Match Planner

Findaside is a football match-planning platform for hosts and players. I worked on the frontend implementation after initially being involved with the UI team, building the React interface across dashboards, game creation, booking, groups, payments, maps, and authenticated user flows.

Problem

The product needed a working frontend for two user types: hosts who create and manage games, and players who discover, join, and coordinate around those games.

Opportunity

Turn the product requirements into a usable React application with authenticated flows, route-based pages, map views, game creation, group management, and payment screens.

Outcome

Findaside demonstrates contract frontend delivery: taking product requirements and turning them into routed, authenticated, responsive React screens for a real match-planning workflow.

Reflection

The project pushed me to focus less on visual exploration and more on implementation quality: page structure, state handling, authenticated flows, responsive layouts, and making complex screens usable.

Stack

ReactTypeScriptReact RouterGoogle Maps APIFirebase AuthenticationFirestoreFirebaseCSS

Build context

What the frontend needed to support.

Hosts needed a dashboard for upcoming games, bookings, created games, groups, and payment activity.

Players needed clear game discovery and match-detail screens that worked on mobile as well as desktop.

The frontend had to support authenticated states through Firebase Authentication and Firestore-connected user data.

Frontend scope

The screens and flows I implemented.

Built the main page set: dashboard, search/upcoming games, booking, create game, group, payments, and settings.

Used React Router to keep each workflow separated while preserving a consistent app shell and navigation.

Implemented responsive layouts for dense desktop dashboard screens and simpler mobile match-detail views.

Engineering decisions

Built the application frontend with React and TypeScript for component-driven screens and safer UI logic.

Used Firebase Authentication with OAuth and Firestore for account-backed flows and app data.

Integrated the Maps API into the game discovery and booking experience.

Handled frontend states such as empty upcoming games, created game details, group views, and payment screens.

Responsibilities

Built the React frontend for dashboard, upcoming games, booking, create-game, group, and payment screens.

Implemented client-side routing with React Router so hosts and players could move between match-management flows.

Connected authenticated user experiences using Firebase Authentication with OAuth and Firestore-backed data.

Integrated map-based UI using the Maps API for location-focused game discovery and booking context.

Built responsive layouts so the same match details and player flows worked across desktop and mobile views.

Highlights

React + TypeScript frontend for a real contract/freelance product workflow.

Host and player flows separated across dashboard, game creation, booking, groups, and payments.

OAuth authentication and Firestore usage for account-backed product states.

Maps API integration for location-led match discovery and booking views.

Responsive implementation across desktop dashboards and mobile match-detail screens.

Screens

Product details

01 / overview

Upcoming games screen with map view and empty-state game schedule

02 / overview

Booking screen showing match details and location context

03 / features

Create game form built for hosts to add match details

04 / features

Game detail screen with match information and join action

05 / process

Group screen for organizing players around a match

06 / features

Payments screen for tracking match-related payment activity