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

1. Handling real-time updates in Firestore was easier than expected — perfect for live wait times or ride closures.
2. Geoqueries were tricky. I used geofirestore to simplify location-based searches.
3. 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());
});