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.