I like to keep up with the UFC, but I have not seen every fight that ever took place - I have not seen most of them. Sometimes I like to check out a fighter's history and look for an interesting fight to watch, or if I missed the latest event, I want to see who fought on it; but I don't want anything spoiling. Spoilers are everywhere, particularly if you did not watch the latest event live. One clumsy Google search and the results will be made very apparent. There wasn't really anywhere you could go to get this information without the spoilers, so I made my own place for it at liamfoot.com/ufc.

The Landing Page

This is the Landing page, residing at liamfoot.com/ufc. You can scroll through the entire list of events, and click any of them to see who fought who on which card, without seeing the results.

The Event Page

When clicking into a specific event, the fights can be seen without the results. Each time the page is loaded, the fighter positions are randomized - so unlike Wikipedia, the winner is not always on the left side. All results are hidden by default, but can be revealed if desired - either selectively, or for the entire event. When hovering a spoiler button, the row turns red as a guide.

The Fighter Page

At the top of the Landing page, there is a search box. This box provides real-time search results by fighter name, and takes you to a given fighter's Fighter page. This page lists all of a given fighter's UFC fights, and the events and fighters displayed can be clicked through.

Brief Technology Overview

All of the data is sourced from Wikipedia, as linked at the top of the Events page. Wikipedia is a fantastic information source, and understandably, they cannot tailor their data to everyone's needs - that's why I built something around their product.

I do not want to hit them with too many requests, so I do my best to be economical with regards to fetching the data. I built a web scraper that stores the data in my own database, so that all data is served from my server rather than from Wikipedia. This also allows me to do extra processing.

This was initially a plain JavaScript application on the front-end, but I later converted it to a standalone .NET 6 Blazor WebAssembly app. I had wanted to try out Blazor WASM for a while and this was a good use case for it.

The back end makes use of SQL Server full text search for the fighter search, and data is served through Umbraco as a Web API.

Change Log

2022-06-04

• Renamed from "No Spoiler UFC Events" to "UFC Without Spoilers", and released a conversion into a Progressive Web App using Blazor WebAssembly on .NET 6. Navigation is now coherent as the app runs separately from the website, and installation is available for user convenience.

Conclusion

If you want quick access to spoiler-free UFC events, make sure to bookmark liamfoot.com/ufc!