Footi is an in-house Little Thunder passion project. Built with a Jamstack methodology, all content is pre-rendered at build time and served as static HTML/CSS via a CDN meaning it’s serverless, lightning fast and has a lower carbon footprint than other football sites.
Launch site →
DeliverablesWeb DesignUIUXArt DirectionIllustrationIconographyJAMStackNetlifyEleventy
English Premier League football news, stats, scores and more.
Footi boasts the latest news from the Premier League, up-to-date stats on every club/player, fixtures, results, match reports and live games with text commentary. Footi also covers European competitions including the Champions League and Europa League. We’ll be adding more domestic competitions soon including the FA Cup.
How it works
We have several services and bots running behind the scenes, but in a nutshell, we periodically hit APIs for our content and use Netlify to automatically build and deploy our Eleventy build to Netlify’s CDNs as static HTML/CSS. By rendering at build-time we’re removing the need for any server rendering round-trips, boosting performance, security and accessibility compared to traditional/legacy web stacks. You can read more on this here.
Live scores, stats and reports
For the most part, static content is perfect for our needs, but one challenge we faced was implementing 'Live Scores' where we needed to hit an API in real-time. To overcome this we pre-render the page template, team names and line-ups approximately an hour before kick-off, then dynamically inject the real-time data using Netlify functions powered by AWS Lambda.
Footi features in-depth stats and analysis on each game, clubs and players and we’re continuing to add more features to make it a one-stop-shop for all your football needs.
Branding and Custom Crests
We had some fun recreating the crests for each Premiership team. The broad range of styles, shapes and colours presented a challege as we wanted to create our own recognisable look and feel which would be unique to Footi.
To tackle this we established our own colour set and used consistent design elements to help create continuity between the badges and the Footi brand, whilst being careful to not stray too far from each teams unique brand or we would lose recognisability.
Stripping back an icon to only use necessary graphical elements is the key to it’s success. This helps ensure that the icon is recognisable and legible at small sizes.
At certain times - e.g. for promotional or editorial content - we have the opportunity to use a “glossy” version of a team’s crest. In these instances we can add more detail to increase the fidelity thus creating a more refined and polished look.
Footi is very much a passion project that we built to see what is possible using a modern, serverless tech stack. We’re continually improving Footi to make it more accessible and environmentally sustainable and as it stands, we currently produce 6 - 10 times less CO2 per page than the official Premier League website.