𝗠𝘆 𝗙𝗼𝗼𝘁𝗯𝗮𝗹𝗹 𝗔𝗽𝗽 𝗪𝗼𝗿𝗸𝗲𝗱 𝗣𝗲𝗿𝗳𝗲𝗰𝘁𝗹𝘆 𝗨𝗻𝘁𝗶𝗹 𝗠𝗮𝘁𝗰𝗵𝗱𝗮𝘆 𝗦𝘁𝗮𝗿𝘁𝗲𝗱

Building a football app seemed easy at first.

I planned to fetch matches, show teams, show scores, and refresh every few seconds. It worked during testing. I used two tabs and a few sample matches. Everything looked fine.

Then the first busy matchday arrived.

Hundreds of users opened the app at once. Requests overlapped. Some scores appeared to move backward. The app fetched the same data separately for every single visitor.

I learned that a live app is not just a website connected to an API. It is a data synchronization system.

Here are the mistakes I made and how I fixed them:

  • Avoid client-side only polling My first version had every browser requesting data every five seconds. 1 user = 12 requests per minute. 1,000 users = 12,000 requests per minute. Most requests asked for the exact same data.

  • Use server-side requests I moved API calls to the server. This gives you control over: • API credentials • Caching • Rate limiting • Error handling • Response formatting

Never use keys in client-side code. It is unsafe and expensive if someone steals your key.

  • Create a mapping layer I stopped passing raw API data directly to my components. If the provider changed a field name, my UI broke. Now, I map the provider data into my own internal format first. This keeps my UI stable.

  • Use Server Components for speed Instead of showing a loading screen, I load initial matches on the server. The user sees content immediately.

  • Implement smart polling The app should not refresh if no matches are live. I added a check to stop polling when matches finish. This saves massive amounts of server resources.

  • Fix race conditions Sometimes Request B returns before Request A. This makes scores look like they are moving backward. I use an AbortController to cancel old requests before starting new ones.

  • Handle errors gracefully If a refresh fails, do not show an empty screen. Keep the last successful data visible. A fifteen second old score is better than no score.

A demo only needs to display data. A real product must manage caching, security, and state.

Have you built a live app? What broke when real users arrived?

Source: https://dev.to/mihailove123/my-football-app-worked-perfectly-until-matchday-started-3i59