Simple CRUD Todo App — Angular 9.1, ASP.NET Core 3.1, Swagger, AutoMapper and MongoDB
In this story, we will discuss about the simple ToDo web application for employees. Angular 9.1 is used for frontend, ASP.NET Core 3.1 for building REST API with Swagger integration. MongoDB community edition is used for storing Todo list and employee data. You can find complete source code at GitHub repository. Feel free to refactor existing code and introduce new features by raising new Pull Requests (PRs).
Frontend
The frontend is built with Angular 9.1 and Angular Material design library. All modules are lazy loaded for better performance. Note that the API URLs are kept as localhost://<api> for testing purpose thus the below StackBlitz demo won’t work unless you specify live backend URL. You will have to deploy the backend and replace the apiUrl in environment.prod.ts file for production purpose and in environment.ts for local development. There is plenty room for improvement in terms of UI and features so feel free to extend it.
Backend
I have used ASP.NET Core 3.1 for building REST API with Visual Studio for Mac IDE which works pretty nice. There few NuGet packages imported for:
- Swagger — Swashbuckle.AspNetCore
- AutoMapper — AutoMapper.Extensions.Microsoft.DependencyInjection
- MonogoDB — MongoDB.Driver
To run the backend you need to install NuGet dependencies first which is done by default if you open project in Visual Studio or Visual Studio for Mac but for Visual Studio Code, you will have to use .NET CLI for installing packages.
Swaggger
Once packages are installed, you can run project and navigate to https://localhost:5001/swagger/index.html URL to inspect APIs in Swagger UI.
AutoMapper
The AutoMapper has been used for mapping domain models (DTOs) to view models (VMs). Creating mapping gets with DTOs to VMs is very easy thanks to AutoMapper. All we have to do is define a mapper class deriving from Profile class and define the mapping strategy.
MongoDB
I have used MongoDB community version for this project. The appsettings.json file contains the database settings.
The MongoDB.Driver package provides nice APIs for working with database. There is TodoService and EmployeeService which interacts with database for CRUD operations.
Summary
The aim of this story is you to get started with full stack skeleton project with Angular 9.1, ASP.NET Core 3.1 and MongoDB.
