PlayLA Olympic Youth Sports Public Web App

From a 1,700+ location database to 15 active program locations.

I reused the operational database from PlayLA Flag Football Operations to power a mobile-first public resource: turning structured records into search, program cards, and pre-loaded Google Maps directions for the 15 active locations available to families now.

React TypeScript Google Maps API Vite Cloudinary Bilingual UX
Strategic Context

One data foundation, multiple jobs.

In PlayLA Flag Football Operations, I structured the civic infrastructure: mapping 1,700+ PlayLA locations with addresses, ZIP codes, linked feeder schools, and geocoded coordinates. That database did not stay trapped inside administrative back-offices; it became reusable infrastructure for this public web resource.

The public application transforms raw operational data into an intuitive family resource: active program cards, interactive rules, equipment specifications, bilingual English and Spanish access, and game-day safety checklists. The primary product enhancement is frictionless routing: clicking any facility card opens Google Maps with turnkey navigation already calculated directly to the recreation center.

Database Records 1,700+ Reused Citywide operational records feeding parent-facing search.
Active Clinic Sites 15 Directions Loaded Recreation center coordinates pre-wired with Google Maps transit.
Bilingual Accessibility EN / ES Persistent State-stored language preference across all guidance and checklists.
Zero Software Spend $0 Serverless Static React application deployed with lightning-fast edge delivery.
Shipped Deliverables

Reusable data architecture surfaced in a parent-ready UI.

Side-by-side view showing the Westwood Recreation Center database record beside the public PlayLA Find a Program card.

Relational database to parent-facing program card

The left side illustrates the Westwood Recreation Center record from the 1,700+ location database, including geocoordinates and district boundaries. The right side shows that same structured record rendered as a parent-ready Find a Program result for one of the 15 active locations.

Pre-loaded Google Maps turn-by-turn navigation

The application translates coordinates and street addresses into direct Google Maps directions with the route already calculated, saving busy families multiple clicks during game-day transit.

Parent onboarding and seasonal expectations

Comprehensive orientation covering practice schedules, player safety, volunteer coaching contacts, and venue protocols to establish community trust.

Bilingual English and Spanish accessibility

Accessible equipment checklists and uniform guidelines with persistent language toggling, ensuring equitable access across Los Angeles communities.

Field safety and emergency response protocols

Mobile interactive checklists for volunteer coaches with direct-dial links to city park maintenance, local emergency contacts, and first aid guidance.

Civic and institutional partner network

Community ecosystem connecting the City of Los Angeles Department of Recreation and Parks, LA28 Olympic committee, and professional sports franchises.

Verified Production Stack

React
React Component UI
TypeScript
TypeScript Data contracts
Google Maps
Google Maps API Pre-loaded transit
Cloudinary
Cloudinary Fast media CDN

Engineered for lightweight mobile reliability

Static deployment on modern cloud architecture delivers fast, sub-second load times on mobile devices under erratic park cellular connections.

Operational Workflow

How one database served multiple critical jobs.

01

Map the City

Structured 1,700+ municipal recreation records with geocoded coordinates, council districts, and facility amenities.

02

Reuse the Data

Filtered the operational database to power dynamic search and program cards for 15 active seasonal clinic locations.

03

Pre-Load Directions

Automated deep-link generation so tapping a location opens Google Maps with turnkey navigation already calculated.

04

Operationalize the Field

Packaged bilingual parent guides, safety protocols, emergency dispatch numbers, and digital coach checklists.

Strategic Executive Takeaway

Public digital products succeed when built on durable operational data.

Community and consumer web applications encounter severe friction when organizations treat front-facing interfaces as separate from internal operations. When data is re-entered by hand, information drifts, addresses become stale, and user trust dissolves.

By connecting the PlayLA public web app directly to our relational operational schema, we eliminated manual synchronization and gave thousands of families instant access to directions, game schedules, and bilingual guidance. In enterprise systems, this principle is universal: user experiences are only as dependable as the data architecture beneath them.

Certified Digital Expertise

Salesforce Certified Administrator Salesforce Certified Business Analyst Radical Product Thinking Vision Setting Google AI Professional Certificate Google AI for Data Analysis Project Management Institute Member Product Management Basics Certification AI for Product Management

The Discipline to Scale

I bring an Olympic athletic background to fuel the relentless discipline required to execute, a deep research background focused on hyper-targeted strategy, and the grit of the immigrant experience. I rely on hard analytics and behavioral strategy to build resilient operational systems that help businesses actually run.