CleanArchitectureApp
Clean Architecture Application Design from Scratch using Dotnet Core 5 WebApi and Angular 11 FrontEnd
Install / Use
/learn @sunilkumarmedium/CleanArchitectureAppREADME
CleanArchitectureApp
Clean Architecture Application Design from Scratch using Dotnet Core 5 WebApi and Angular 11 FrontEnd
Technologies
- ASP.NET Core 5
- NHibernate
- Angular 11
- Angular CLI 11
- Clean Architecture
- Swashbuckle.AspNetCore.Swagger
- Design Pattern: Command Query Responsibility Segregation (CQRS)
- Fluent Validation
- WebAPI Global Exception Middleware
- Login, Logout and Forgot Password using JWT tokens
- Microsoft Sql Server and Postgresql supported
- AWS Postgres RDS
- AWS Lambda
- AWS Systems Manager
- AWS Simple Storage Service (S3)
- Docker
Pre-requisites
- .Net core 5 SDK
- Visual studio 2019 OR VSCode with C# extension
- NodeJs (Latest LTS)
- Microsoft SQL Server (Optional: If MS SQL server required instead of Sqlite during development)
- POSTGRESQL
Configuration
- Clone the repo: git clone https://github.com/sunilkumarmedium/CleanArchitectureApp.git
- Execute the sql scripts available in the folder
/sql/- MSSQL use CleanArchitectureDB.sql
- POSTGRES use CleanArchitectureDB-Postgres
- Change the database connectionstring in appsettings.json
- Path : CleanArchitectureApp.WebApi/appsettings.Development.json or appsettings.json
"DBProvider": "MSSQL" ,UseMSSQLto connect to Microsoft SqlServer OrPOSTGRESto connect to PostgreSQL database"ConnectionStrings": { "MSSQLConnection": "Data Source=DESKTOP-SUNILBO;Initial Catalog=CleanArchitectureDB;User ID=sa;Password=xxx;MultipleActiveResultSets=True", "PostgresConnection": "Server=127.0.0.1;Port=5432;Database=CleanArchitectureDB;User Id=postgres;Password=xxx;Timeout=30;TimeZone=UTC" }'
- cd to folder CleanArchitectureApp\CleanArchitectureApp.UserInterface.AngularWeb\ClientApp
npm install
- open the CleanArchitectureApp.sln
- Visual Studio 2019 IDE
- opening the solution will restore the nuget and npm packages build the solution
- Multiple Projects Startup
CleanArchitectureApp.WebApiandCleanArchitectureApp.UserInterface.AngularWeb
- Visual Studio Code
- Open the folder
CleanArchitectureApp
- Build the Solution
- Run the Projects
CleanArchitectureApp.WebApiandCleanArchitectureApp.UserInterface.AngularWeb
- Open the folder
- Visual Studio 2019 IDE
- Application URL's
Webapi http://localhost:5001
AngularWeb http://localhost:5003

- Test User to Login
Username: systemPassword: admin@123
Cloud Deployment
AWS Lambda Deployment, AWS RDS Instance Creation and Managing the database connectionstring using AWS Systems Manager
Read the below articles to get some understanding on the AWS RDS , Lambda and Systems Manager.
https://sunil-kumar-60226.medium.com/postgresql-database-instance-creation-and-configuration-in-aws-rds-9ac324cee7fc
https://sunil-kumar-60226.medium.com/aws-systems-manager-parameter-store-for-managing-configuration-and-retrieve-at-runtime-using-c-e5593752705c
https://sunil-kumar-60226.medium.com/build-a-serverless-dotnet-core-web-api-with-aws-lambda-and-api-gateway-4c670edd8747
Change the settings in appsettings.json IsCloudDeployment Region CloudSSMConnectionString
"IsCloudDeployment": "true",
"Region": "ap-south-1",
"DBProvider": "POSTGRES" ,
"ConnectionStrings": {
"MSSQLConnection": "Data Source=DESKTOP-SUNILBO;Initial Catalog=CleanArchitectureDB;User ID=sa;Password=admin@123;MultipleActiveResultSets=True",
"PostgresConnection": "Server=127.0.0.1;Port=5432;Database=CleanArchitectureDB;User Id=postgres;Password=admin@123;Timeout=30;TimeZone=UTC",
"CloudSSMConnectionString": "/CleanArchitectureAppWebApi/postgresconnection"
},
Docker Container Deployment
Installing
Follow these steps to get your development environment: (Before Run Start the Docker Desktop)
- Clone the repository
- Once Docker for Windows is installed, go to the Settings > Advanced option, from the Docker icon in the system tray, to configure the minimum amount of memory and CPU like so:
- Memory: 4 GB
- CPU: 2
- At the root directory which include docker-compose.yml files, run below command:
docker-compose -f docker-compose.yml -f docker-compose.override.yml up -d
4. Launch Url's
- CleanArchitectureApp API -> http://localhost:5001/swagger/index.html
- Portainer -> http://localhost:9000 -- admin/admin@123

Related Skills
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
openpencil
2.1kThe world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
openpencil
2.1kThe world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
ui-ux-designer
Use this agent when you need to design, implement, or improve user interface components and user experience flows. Examples include: creating new pages or components, improving existing UI layouts, implementing responsive designs, optimizing user interactions, building forms or dashboards, analyzing existing UI through browser snapshots, or when you need to ensure UI components follow design system standards and shadcn/ui best practices.\n\n<example>\nContext: User needs to create a new dashboard page for team management.\nuser: "I need to create a team management dashboard where users can view team members, invite new members, and manage roles"\nassistant: "I'll use the ui-ux-designer agent to design and implement this dashboard with proper UX considerations, using shadcn/ui components and our design system tokens."\n</example>\n\n<example>\nContext: User wants to improve the user experience of an existing form.\nuser: "The signup form feels clunky and users are dropping off. Can you improve it?"\nassistant: "Let me use the ui-ux-designer agent to analyze the current form UX and implement improvements using our design system and shadcn/ui components."\n</example>\n\n<example>\nContext: User wants to evaluate and improve existing UI.\nuser: "Can you take a look at our pricing page and see how we can make it more appealing and user-friendly?"\nassistant: "I'll use the ui-ux-designer agent to take a snapshot of the current pricing page, analyze the UX against Notion-inspired design principles, and implement improvements using our design tokens."\n</example>
