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

Edgarmp06 — Fri, 10 Oct 2025 15:51:00 +0000

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 💭

Real users ≠ Tutorial users
- They don't care about fancy features
- They want simple, fast, useful
Mobile-first is CRITICAL
- 84% of traffic was mobile
- Test on your phone constantly
Real-time feels magical
- Firebase onSnapshot() is incredible
- Updates sync across devices instantly
- No polling, no websockets config needed
Security matters
- Started with basic password hashing
- Upgraded to Firebase Auth when going public
- Firestore Security Rules are essential
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! 🙏🏀

DEV Community: Edgarmp06