Remix

Make your own version of BallBlast LiveScore

Get an exact, working copy in your account, then change anything with chat.

Original by Muhammad Savage

What would you change?

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

BALLBLAST LIVESCORE — WEBSITE BUILD PROMPT

Act as an expert full-stack developer and UI/UX designer. Build BallBlast LiveScore, a professional, fully functional, mobile-first football scores website. This must be a real working application, not just a visual mockup.

Prioritize efficient implementation, preserve working code, and avoid unnecessary complexity. Complete the core features first without wasting credits on repeated redesigns.

1. DESIGN AND BRANDING

Create a premium black-and-yellow football website.

- Background: black (#000000).
- Cards: dark gray (#101010).
- Text: white and muted gray.
- Accent: BallBlast yellow (#FFD400).
- Green for wins and red for losses where appropriate.
- Clean typography, compact match cards, subtle animations, and realistic football imagery.
- Fully responsive on mobile, tablet, and desktop.

Display “BallBlast” prominently, with “LiveScore” smaller. Include a header with search and favorites, plus a mobile bottom navigation bar: Scores, Leagues, Search, and Favorites.

2. HOMEPAGE AND FOOTBALL SCORES

Build a homepage featuring:

- A date selector for yesterday, today, tomorrow, and other dates.
- All, Live, Upcoming, and Finished filters.
- Fixtures grouped by league, with competition logos, team crests, scores, kickoff times, and match statuses.
- Clickable match cards opening detailed match pages.
- Working search and favorite teams/leagues.
- Loading states, empty states, and clear error messages.

Never invent matches or scores. Upcoming matches should show kickoff times, not fake 0–0 scores.

3. REAL API-FOOTBALL INTEGRATION

Connect API-Football using its actual supported endpoints and subscription limits. Keep the API key server-side only.

Use the environment variable "API_FOOTBALL_KEY". Never expose or hardcode the secret in frontend code.

Fetch and display real fixtures, live scores, match events, statistics, lineups, team information, standings, top scorers, recent matches, and injury information wherever the provider supports them.

If an endpoint or data field is unavailable, show an honest message instead of fabricated information.

4. CACHING AND 15-MINUTE REFRESH

Implement centralized caching and controlled API requests to conserve the provider's quota.

Display a countdown: “Refreshing scores in 15:00.”

The countdown must update every second locally, but trigger only one controlled refresh when it reaches zero. It must never call the football API every second.

If the API fails or reaches its limit, continue showing the latest valid cached data, its last update time, and a small “Showing Cached Data” status. Never pretend cached scores are live.

5. MATCH DETAILS AND TACTICAL LINEUPS

Create "/match/[id]" with team crests, scores, competition, kickoff time, venue and referee when available.

Include working tabs for Summary, Statistics, Lineups, Standings, Recent Matches, Injuries, and Top Scorers.

- Summary: Real goals, scorers, cards, substitutions, and match events.
- Statistics: Actual possession, shots, corners, fouls, passing data, and other available statistics.
- Lineups: A realistic vertical 2D football pitch with green stripes, white markings, goals, and the center circle.
- Player markers: Actual player photos where available, jersey numbers, and names.
- Team switcher: Switch between home and away formations.
- Player details: Clicking a player opens a modal with available information and statistics.
- Substitutes: Display separately below the pitch.

Use the real formation and lineup returned by the API. If lineups are unavailable, show “Lineups are not available yet.” Never invent players or use unrelated player photographs.

6. LEAGUES, TEAMS, INJURIES AND TOP SCORERS

Create league and team pages displaying real fixtures, results, standings, team form, squad information, and top scorers where available.

Show injuries or absences only when supported by actual provider data. Never invent diagnoses or return dates.

Use the correct competition and season. Show clear empty states whenever information is unavailable.

7. FAVORITES AND FAN RATINGS

Allow visitors to save favorite teams and competitions without registering. Store preferences in browser local storage.

Add an optional 1–10 fan rating for matches or players. If Neon Postgres is configured through "DATABASE_URL", save ratings securely and display genuine global averages and vote counts. If the database is unavailable, do not fabricate votes or totals. The rest of the website must continue working.

8. ADS AND ADDITIONAL PAGES

Prepare optional, clearly labeled advertising placeholders for a mobile banner and sponsored cards between fixtures. Do not insert fake advertisements or unapproved ad scripts.

Create these pages:

- "/" — Scores
- "/match/[id]" — Match details
- "/league/[id]" — League information
- "/team/[id]" — Team information
- "/search" — Search
- "/favorites" — Favorites
- "/about", "/privacy", and "/terms"

Include responsive navigation, sensible SEO metadata, accessible controls, and mobile-friendly layouts.

9. BUILD QUALITY AND DEPLOYMENT

Use the existing framework if available; otherwise use Next.js, TypeScript, and Tailwind CSS. Prepare the website for Vercel deployment.

Handle API errors, rate limits, missing data, and database failures gracefully. Protect all secrets and avoid unnecessary API calls.

Implementation order:

1. Build the design, homepage, fixtures, navigation, and real API integration.
2. Add caching, the refresh timer, and match details.
3. Add the tactical pitch, player information, statistics, injuries, standings, and top scorers.
4. Add ratings, advertising placeholders, and final polish.

Test the application and fix build errors before declaring it complete. Preserve working features if the AI reaches its usage limit. Clearly identify anything unfinished rather than replacing it with fake functionality.

FINAL GOAL: Build the best working version of BallBlast LiveScore possible: a premium black-and-yellow football platform with real scores, a reliable 15-minute refresh system, interactive tactical lineups, player photos, match statistics, and honest cached-data fallbacks. Inspect the existing project first, make sensible decisions independently, and prioritize a working website over unnecessary complexity.

Uses API keys: you add your own after remixing.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.