A while ago, my wife and I had a moment of truth: we were genuinely horrified to find out that some of our favourite local restaurants had terrible Food Hygiene Ratings from the UK Food Standards Agency (FSA). Since then, we've become obsessive checkers, invariably narrowing our dining choices based on those crucial scores.

While the UK Food Standards Agency provides a search page for these ratings, we found the user experience - especially on mobile devices - to be cumbersome. This led me to develop a simple, single-page application to solve our problem and create a better public-facing tool: The UK Food Ratings Map.

Building a Better User Experience with ReactJS

My goal for this project was to provide a significantly more intuitive and seamless search experience, leveraging the official public data provided by the FSA.

ReactJS for a Reactive Interface

The entire application is developed using ReactJS. I chose this library to ensure a fast, single-page application (SPA) experience. React's component-based structure made it efficient to build a dynamic interface that updates instantly as a user searches or filters the map content, which is crucial for a smooth experience on both desktop and mobile devices.

Seamless API Integration

The application relies entirely on the FSA's public search API to fetch the hygiene ratings and location data for food establishments across the UK.

Key Features

  • Intuitive Search: Quickly find restaurants by name or location.
  • Mobile-First Design: Optimised layouts for excellent performance on smaller screens.
  • Map Visualisation: Presenting results on a map offers better geographic context than a simple list.

This was just a small personal project to solve a personal frustration, but I continue to use the web app to this day!

See the App in Action