Coffee Tracker


Now that you’re familiar with Angular, let’s combine it with .NET! And what a powerful combination that is. The limit of what you can build using these two is only the limit of your imagination. We will be creating two separate applications: An Angular front-end and a C# Web Api. The front-end will call the api, similarly to what you’ve done before in our Shifts Logger project.


  • This is an application where you should record your consumption of coffee.
  • You can choose something else to track, in case you're not a coffee person.
  • You should create two projects: A.NET WebApi and an Angular app.
  • You can choose whatever database solution you want: Sqlite, SQL server or whatever you're comfortable with.
  • You can choose whatever ORM you want: Dapper, EF, ADO.NET.
  • You should have a filter functionality, so I can select records per date.
  • Your database should have a single 'Records' table.The objective is to focus on Angular, so we should avoid the complexities of relational data.
  • You CANNOT use Angular Material.


Since this is your first full-stack Angular project, make sure you look up everything you don’t know. Try not to let any keyword, method or concept left-behind. This is the moment to build your foundation. And don’t forget to reach out on our Discord community if you have questions!


  • Your main objective is to call your API from the Angular App. Everything else is just moving data around and styling.
  • There are two ways to approach the construction of this app: Finishing the API first and then building the UI, or building each method end-to-end (ex: GetAllRecords method in the back-end plus list of records in the front-end). Choose one and stick to it.
  • Don't use Angular Material (a library for styling) in this project. Angular alone can be challenging enough and adding a rich library early on might overwhelm you. Also, you'll appreciate Angular Material more if you built applications without it first.
Log in to mark this article as read and save your progress.
An unhandled error has occurred. Reload 🗙