Building My First Real-Time Web App: Basketball Team Management with Firebase 🏀

I'm a 2nd year web development student and just shipped my first project with real users. Here's what I learned building a real-time basketball team management app.

The Problem 🤔

I used to record and edit full game videos for my brother's youth basketball team. The results?

• Less than 15 views per video
• One parent complained about camera angles
• 3 days of work for ~10% engagement

Parents didn't want videos. They just needed:

• When/where are the games?
• What's the score?
• Simple and fast.

The Solution 💡

Built a web app with:

• Match calendar (dates, times, locations)
• Google Maps integration
• Real-time score updates
• Admin panel to manage everything

Tech Stack 🛠️

Firebase Firestore - Real-time database

• Used onSnapshot() for instant sync across devices
• Perfect for live score updates

Firebase Authentication - Secure admin access

• Email/password authentication
• Firestore Security Rules protecting the database

Vanilla JavaScript ES6+ - No frameworks

• Wanted to master fundamentals before React/Vue
• async/await, ES6 modules, DOM manipulation

Tailwind CSS - Styling

• Utility-first approach
• Responsive design (84% mobile traffic!)

Vercel - Deployment

• Automatic deployments from GitHub
• Built-in analytics

Features 🎯

1. Match Calendar

• List of upcoming games
• Date, time, rival team
• Google Maps link to venue

2. Real-Time Scores

• Live updates during games
• Syncs instantly across all devices
• Uses Firebase onSnapshot() listener

3. Admin Panel

• Add/edit/delete matches
• Update scores live from mobile
• Secured with Firebase Auth

4. Responsive Design

• Mobile-first (84% mobile users)
• Works on any device

Biggest Challenge 😅

The Problem:
Input fields kept losing focus when typing. Every keystroke triggered a full re-render.

Why it happened:
My handleInputChange() function called renderizar() on EVERY change, destroying and recreating the entire DOM.

The Solution:

javascript
function handleInputChange(name, value) {
formData[name] = value;

// Only re-render when necessary
if (name === 'rival' || name === 'ubicacion') {
    renderizar();  // These change the UI structure
}
// Date/time/scores: just update formData, don't re-render

}

Now text inputs work smoothly without losing focus!

Real Results 📊

First 48 hours:

• 31 unique visitors (from ~10 families)
• 66 page views
• 60% engagement (vs 10% with videos!)
• Parents thanking me publicly in the group chat
• Coach: "Muchas gracias Edgar!!"
• Friend: "Did you make this in class??" 😂

The best part:
A parent who previously complained about my videos reacted positively to the web app. That felt amazing.

What's Next 🚀

October 17th - First live game test

• I'll update scores from my phone at the court
• Testing real-world performance
• Expecting 60-100 visitors that day

Future improvements:

• Team roster section
• Statistics integration
• Match photos gallery

What I Learned 💭

1. Real users ≠ Tutorial users

   • They don't care about fancy features
   • They want simple, fast, useful

2. Mobile-first is CRITICAL

   • 84% of traffic was mobile
   • Test on your phone constantly

3. Real-time feels magical

   • Firebase onSnapshot() is incredible
   • Updates sync across devices instantly
   • No polling, no websockets config needed

4. Security matters

   • Started with basic password hashing
   • Upgraded to Firebase Auth when going public
   • Firestore Security Rules are essential

5. Simple beats complex

   • 3 days editing videos → 10% engagement
   • 2.5 days building web app → 60% engagement

Live Demo 🔗

Web: cbc-manises.vercel.app

(GitHub coming soon - cleaning up the code!)

Questions? 💬

• Thinking of trying React next - any tips for the transition from vanilla JS?
• How would you improve the architecture?
• Any security concerns I should address?

Thanks for reading! This is my first post here and my first real project. Any feedback appreciated! 🙏🏀