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! 🙏🏀