[Full Stack Web] Reverse Geo Location Lookup - ReactJS + Redux + C# ASP.Net Core

Geo Location

I blogged recently about tracking a users geo location from their iPhone, but what if all you have is a postcode, yet still require coordinate data?

Enter “www.postcodes.io”…

I discovered this third party api not long ago and it’s been very useful. Typically the most common downside with these api’s is that they’re rate limited, so today we’re going to code a full stack single page app (SPA)…with a built in memory cache, thus reducing how often we’re hitting the endpoint for the same postcode.

Prerequisites

You’ll need to follow the steps I blogged about here to configure your single page app (SPA) setup to run with ReactJS + Redux + C# ASP.Net Core.

Let’s Code…

Firstly we need a data model to interact with www.postcodes.io -

Next, a web client service to ping the endpoint.

Now we need a dedicated service to handle the requests we pass in, and the output we receive back.

Now to setup our API controller and memory cache -

Followed by our controller action method.

Now to code our client-side in ReactJS. Let’s start with some imports (I’ll be using the InputField, Button and Table components that I’ve written and published recently in other blog posts). You’ll note that I’ve also added a massive regex to be used when validating the postcodes.

Next we’ll need a few properties to help with the field validation.

Now for a function to handle the user’s input.

Following this comes the field validation functionality.

At this point we can render the form, using the components I mentioned previously.

Now to plug our ReactJS client-side code into our C# ASP.Net Core server-side code using Redux.

Let’s run our application and see what happens.

Our validation has kicked in and requires a valid postcode before we can submit the form.

Once we enter a valid postcode, our submit button becomes enabled and the postcode regex validation has passed.

Finally, we receive the relevant geo location coordinates for the postcode we submitted, indicating the latitude and longitude.

Enjoy!