First time building app with Angular, LeafeletJS with a backend API using NestJS

Posted by

I recently got challenged to put together an app using map data to produce a visualisation. In the span of two or three days/evenings I gave myself for this exercise I pushed code to GitHub representing two components to solve this challenge:

  1. For the backend API, written using NestJS. I chose this since I am also learning this framework and really liking its use of key enterprise software design patterns I’ve used in the past in C# (my day-job language) with great success. There is a learning course available for purchase created by the author of NestJS, Kamil Myśliwiec that I have been using as my guide. I highly recommend it as it is very nicely done, and is a great fun way to both learn and give some financial support back to the creators for such a well put-together Javascript framework.
  2. For a frontend web application to produce the visual part of the data the API would be providing, I have mostly been using React, and more recently Blazor to build some work based applications, but I wanted to challenge myself to learn Angular in anger for this task as I keep seeking to expand my experiences with new JS frameworks and libraries, and given that it was still Javascript and that NestJS, which I had gotten into a bit already learning thru the author’s course, was inspired by Angular patterns I took a gamble that the learning curve wouldn’t be too high to get productive with it in a few days.

I also took this challenge to also educate myself on mapping data and terminologies, and in doing so ended up using the popular LeafletJS library to render the map data which I sent from the API as GeoJSON, a popular standard for a set of data structures used for handling geographic data. One excellent resource for tackling the learning curve was this awesome series of articles by Chris Engelsma, which gave me my sample base of Angular/Leaflet front end code after following the tutorial series to start to customise my own app with.

While it’s still early days, and I probably broke some rules for “good” Angular code, I am hoping with time to write more about the experience as I push thru changes and filter into future blog posts the edits to the README file in each that has my occasional notes on interesting steps and learnings. Hope you find the code an interesting read yourself!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.