SkillAgentSearch skills...

CleanArchitectureApp

Clean Architecture Application Design from Scratch using Dotnet Core 5 WebApi and Angular 11 FrontEnd

Install / Use

/learn @sunilkumarmedium/CleanArchitectureApp
About this skill

Quality Score

0/100

Category

Design

Supported Platforms

Universal

README

CleanArchitectureApp

Clean Architecture Application Design from Scratch using Dotnet Core 5 WebApi and Angular 11 FrontEnd

MIT license

Technologies

Pre-requisites

  1. .Net core 5 SDK
  2. Visual studio 2019 OR VSCode with C# extension
  3. NodeJs (Latest LTS)
  4. Microsoft SQL Server (Optional: If MS SQL server required instead of Sqlite during development)
  5. POSTGRESQL

Configuration

  1. Clone the repo: git clone https://github.com/sunilkumarmedium/CleanArchitectureApp.git
  2. Execute the sql scripts available in the folder /sql/
    • MSSQL use CleanArchitectureDB.sql
    • POSTGRES use CleanArchitectureDB-Postgres
  3. Change the database connectionstring in appsettings.json
    • Path : CleanArchitectureApp.WebApi/appsettings.Development.json or appsettings.json
    • "DBProvider": "MSSQL" , Use MSSQL to connect to Microsoft SqlServer Or POSTGRES to 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" }'
  4. cd to folder CleanArchitectureApp\CleanArchitectureApp.UserInterface.AngularWeb\ClientApp
    • npm install
  5. 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.WebApi and CleanArchitectureApp.UserInterface.AngularWeb
    • Visual Studio Code
      • Open the folder CleanArchitectureApp alt text
      • Build the Solution
      • Run the Projects CleanArchitectureApp.WebApi and CleanArchitectureApp.UserInterface.AngularWeb alt text
  6. Application URL's
    • Webapi http://localhost:5001 alt text
    • AngularWeb http://localhost:5003 alt text alt text
  7. Test User to Login
    • Username: system
    • Password: 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)

  1. Clone the repository
  2. 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
  1. 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

alt text alt text 4. Launch Url's

  • CleanArchitectureApp API -> http://localhost:5001/swagger/index.html
  • Portainer -> http://localhost:9000 -- admin/admin@123 alt text alt text alt text

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.1k

The 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.1k

The 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>

View on GitHub
GitHub Stars87
CategoryDesign
Updated5mo ago
Forks54

Languages

C#

Security Score

92/100

Audited on Nov 7, 2025

No findings