One home for Remo Stars supporters: fixtures and results, the league table, men’s and ladies’ squads, news, club history, a lineup builder and a merch store, opened by a 3D stadium scene.
Fans follow the club across scattered social pages and score apps. A club site has to feel special at the front door, and it can’t break on match day just because a third-party football API is slow or out of quota.
What it does
11 pages: home, fixtures and results, table, two squads with player pages, news with sharing, about, timeline, contact and shop.
A lineup builder: pick 4-4-2, 4-3-3, 3-5-2 or 4-2-3-1 and the starting XI rearranges.
A merch store with a cart drawer and Paystack checkout.
Decisions worth explaining
Live data, with a net
Cache, then fall back
The API-Football client caches the team lookup for 24 hours and fixtures and tables for an hour. If the live call returns nothing, routes serve seed data and say so (“live” or “seed”), so the page is never empty.
3D, kept light
A stadium in the browser
React Three Fiber scene with animated meshes, a point-cloud particle sphere built from one typed array, and environment lighting instead of many lights.
State that survives
A cart that remembers
The Zustand cart persists to local storage, but only the items, not UI state like whether the drawer was open.
How it’s built
Next.js 16 and React 19 · Three.js via React Three Fiber and drei · GSAP and Framer Motion · Zustand · Tailwind v4 · API-Football · Paystack.
