How I Used React + Firebase to Build a Theme Park Finder App for Idaho Families

Building joyful experiences doesn’t stop at the rides — it can start with the code behind the scenes.

🎢 The Idea Behind the App

My inspiration came from a family trip to a theme park in Idaho. The joy, the chaos, the bonding — it all felt magical. But planning the trip? Not so much.

That’s when I thought: why not build a tool that helps families discover the best amusement parks with minimal friction?

🔧 Tech Stack

I decided to go with:

Frontend: React + TailwindCSS
Backend/Database: Firebase Firestore
Auth: Firebase Authentication (Google Sign-In)
API Integration: Google Places API for park data
Deployment: Vercel

📱 Features

Here are the core features I implemented:

🔍 Park search by location, mood (relaxing vs thrilling), and kid-friendliness
🧾 User reviews & ratings (stored in Firestore)
🌐 Google Maps integration to view park routes
📅 Plan your day tool that lets users create ride/snack schedules
🖼️ Photo gallery with image uploads via Firebase Storage

🧠 Lessons Learned

Handling real-time updates in Firestore was easier than expected — perfect for live wait times or ride closures.
Geoqueries were tricky. I used geofirestore to simplify location-based searches.
Caching with SWR helped optimize the map and listing load times.

🧩 Challenges

Getting clean data from Google Places API (some entries were incomplete).
Managing image size and upload limits in Firebase.
Balancing fun UI with accessibility best practices.

🎉 Why This Project Matters

Theme parks aren't just about rides. They're about moments: laughter in line for churros, unexpected joy on a kiddie coaster, or grandma trying the log flume.

Building a digital gateway to those moments felt like the right way to combine joy and code.

🛠️ Code Snippet: Firebase Query Example

import { getDocs, query, where } from "firebase/firestore";

const parksRef = collection(db, "parks");
const q = query(parksRef, where("state", "==", "Idaho"));

const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  console.log(doc.id, " => ", doc.data());
});