As a recent exercise project I’ve worked on a web application that lets you store and view location data from a browser. The frontend is an Angular 8 app that can be used from a mobile device and the backend is a .NET Core 3 REST API with a simple database for storing the data. In this three part series I will show and explain how the application is designed and implemented.

Part 1 (this blog post) is an overview of the project and the ideas around it.

Part 2 explains the details of the Angular implementation.

Part 3 shows how to build a backend API that serves the front-end client.

The complete code is available from GitHub: https://github.com/LarsBergqvist/loc-poc

The app idea

The idea is to have a web application, “Locations in Your Pocket”, where you can store favorite locations from your mobile phone while on the go. When you add a new location you get your current location from your browser as default. The position is shown in a Google Maps view where you can change the position before storing the location as a new item. Existing items can be viewed, updated and deleted.

About my intentions and deliberate limitations

My intentions with this project is to have an interesting programming exercise for Angular, .NET and the Google Maps API that forms a tutorial that can be inspirational to others. The application is only made for running in a development environment and for keeping things simple, there is no multi-user support or authorization implemented.

Technical prerequisites

Development environments

As development of both .NET Core and Angular are supported on Linux, macOS and Windows, you can use any of these environments for building the application. As IDEs, I have used Visual Studio Code for the Angular part (on macOS and Windows) and Visual Studio 2019 (Windows) and Visual Studio 2019 for Mac for the .NET Core part.

Google API key

If you want to use the Google Map view for the location items you need to use your own key for the Google API. The Google Maps API is free up to a certain amount of calls each month and you can also apply for a trial period of the whole Google Cloud Platform.

Get started

Part 2 of this blog series explains the Angular part of the project.