Project structure · Full stack
.NET with Angular project structure
Opens with creditsThe common enterprise pairing: an ASP.NET Core Web API and an Angular app as two projects in one solution, exactly as the Visual Studio template lays them out. In development the Angular dev server proxies API calls to .NET; in production the API serves the built Angular files from one origin, so cookie sign-in with ASP.NET Core Identity just works. The Angular API client is generated from the API's OpenAPI document, so both sides always agree. The example features are orders and products.
Curated by Tauseef FayyazIntermediate246 files and folders.NET 10 LTS (ASP.NET Core 10, EF Core 10), Angular 22Checked October 2026How it grows
Each stage opens the explorer there
- 1Day 1What the scaffold and your first hour give you49 files and folders
- 2GrowingWhat a real app with features and tests adds+101 files and folders
- ProductionWhat running it for real users adds+43 files and foldersOpens with credits
- ExpertWhat a team needs to keep it healthy for years+53 files and foldersOpens with credits
How it is organised
- Two projects, one solution: OrdersApp.Server is the API, ordersapp.client is the Angular app. They share nothing at compile time; the HTTP API is the only contract between them.
- That contract is written down: the server generates an OpenAPI document on every build, and the client generates its typed API calls from it. Change a DTO, rebuild, and the Angular compiler shows every place that broke.
- One origin in every environment: in development the Angular dev server proxies /api to Kestrel, in production the API serves the built Angular files. That means no CORS, and HttpOnly cookies from ASP.NET Core Identity instead of tokens in localStorage, with antiforgery protection that Angular's HttpClient supports out of the box.
- Group by feature on both sides: Features/Orders in the API (controller, service, DTOs, entity) and app/features/orders in Angular. The template starts with a Controllers folder; move to feature folders as soon as you have a second feature. On the client, core/ holds app-wide singletons (auth, interceptors, layout) and shared/ holds reusable UI.
- Configuration follows the .NET layers: appsettings.json for defaults, appsettings.Development.json for local, user secrets for local secrets, environment variables and Key Vault in production, all bound to validated options classes. Never commit a real connection string.
- Tests on both sides grow together: xUnit and Vitest from Growing, Testcontainers SQL Server and Playwright end-to-end at Production, then architecture, accessibility, visual, load and mutation tests at Expert when the team and codebase justify them.
At the top of the project
Open one in the explorer for the full story
- OrdersApp/
- .config/Local .NET tool manifest: dotnet-ef, and later Stryker.1 inside
- .git/Git history for the whole solution.
- OrdersApp.Server/The ASP.NET Core Web API project: controllers, auth, data access, configuration.16 inside
- OrdersApp.Server.Tests/xUnit tests for the API: unit tests for rules, integration tests through real HTTP and SQL Server.5 inside
- ordersapp.client/The Angular app, created by the Angular CLI and wrapped in a Visual Studio JavaScript project.19 inside
- .editorconfigC# code style and analyzer severities for the .NET projects, from dotnet new editorconfig.
- .env.exampleThe variables docker-compose.yml needs, such as SA_PASSWORD, with placeholder values.
- .gitattributesLine ending rules, so Windows and macOS developers produce identical diffs.
- .gitignoreIgnore rules for .NET and Node: bin, obj, node_modules, dist, user files, .env.
- AGENTS.mdInstructions for AI coding agents working in this solution.
- CLAUDE.mdA one-line pointer to AGENTS.md for Claude Code.
- Directory.Build.propsMSBuild settings applied to every .NET project: framework, nullable, warnings as errors, analyzers.
- Directory.Packages.propsCentral package management: one version per NuGet package for the whole solution.
- docker-compose.ymlRuns SQL Server locally with one command.
- global.jsonPins the .NET SDK version for the repository.
- lefthook.ymlGit hooks for both sides: dotnet format and Prettier/ESLint on staged files before each commit.
- OrdersApp.slnxThe solution file listing the server, client and test projects.
- README.mdHow to run, test and deploy the solution.
Learn more on Sefism
Roadmaps, cheat sheets and projects that go with .NET with Angular.
- Roadmap· Full stack with Angular.NET developer roadmapC#, ASP.NET Core, EF Core, production-ready APIs
- Roadmap· AngularFrontend development roadmapHTML, CSS, JavaScript and a framework
- Roadmap· C#Backend development roadmapAPIs, databases, auth, deploys
- Roadmap· SQL ServerSQL and databases roadmapQueries, design, indexes, transactions
- Cheat sheet.NET developer cheat sheetC#, ASP.NET Core, EF Core, production-ready APIs.
- Cheat sheetFrontend development cheat sheetHTML, CSS, JavaScript and a framework.
- Cheat sheetSQL and databases cheat sheetQueries, design, indexes, transactions.
- FYP idea· IntermediateJob Shop Work Order Tracker for Small ManufacturersA web app for small manufacturers and job shops (fabrication, furniture, printing, garments) to turn customer orders into work orders, track each operation on the shop floor from a shared tablet, and compare quoted versus actual time and cost. An intermediate final year project in manufacturing software.
- FYP idea· IntermediateOffline Order Booking and Route Planner for Field Sales RepsA final year project that builds a mobile app for FMCG and pharma field sales reps who visit 30 or more shops a day: an offline day plan, a suggested visit order, order booking against stock and credit limits, and sync when signal returns. Aimed at small distributors who cannot afford enterprise tools.
See 10 moreShow fewer
- FYP idea· BeginnerTuition Centre Fee and Attendance Manager with Parent RemindersA web app for small tuition centres and academies to manage batches, take attendance from a phone, generate monthly fee vouchers and send parents reminders. A beginner-friendly final year project with a real paying customer in almost every neighbourhood.
- QuestionHow do I build a developer portfolio as a beginner with nothing to show?Start with two or three small but complete projects that solve a real problem, each with a clear README, screenshots and a live link or easy run steps. Put them on a simple one-page site or a tidy GitHub profile. Depth and finish matter far more than the number of projects or a fancy design.
- QuestionHow do I learn Git and GitHub properly instead of just copying commands?Learn the model first: commits are snapshots, branches are pointers, and remotes are copies. Then use Git daily on your own projects, practise a team workflow with branches and pull requests, and break things on purpose, such as merge conflicts, so you learn to recover calmly.
- QuestionDo I need Docker and Kubernetes as a junior developer?Docker, yes: learn the basics, because nearly every team uses containers and you will be expected to run the project locally and read a Dockerfile. Kubernetes, mostly no: understand what it does and a few core terms, but deep Kubernetes can wait until your job or a DevOps direction needs it.
- QuestionWhich final year project will actually help me get a job?Pick an FYP that matches the role you want, solves a real problem for a real user, uses the tools that role uses, and that your group can finish and deploy. A modest idea done properly, with clean code, tests and a clear demo, helps far more in interviews than an ambitious idea that never fully works.
- Resource· GuideASP.NET Core DocumentationMicrosoft's official documentation for ASP.NET Core, the cross-platform .NET framework for web apps and APIs. It covers minimal APIs and controllers, Razor Pages, MVC, Blazor, SignalR and gRPC, plus Entity Framework Core, security and identity, testing, performance and deployment, with a first tutorial for each app style. It suits C# developers building web back ends, and it is usually more current and accurate than third-party tutorials.
- Resource· GuideAngular DocumentationAngular's official documentation at angular.dev, with interactive in browser tutorials and guides to standalone components, signals, templates, dependency injection, routing, forms, server side rendering and testing. It replaced the older angular.io and reflects modern Angular (v22 in September 2026), so prefer it over older courses built around NgModules and Zone.js. Angular expects TypeScript from the start and has a steeper learning curve than lighter frameworks.
- Resource· GuideEntity Framework Core documentationThe official EF Core docs on Microsoft Learn: modelling entities and relationships, migrations, querying with LINQ, saving data, performance and database providers such as SQL Server and PostgreSQL. Free, current for EF Core 10, with a dedicated performance section every .NET developer should read.
- Resource· GuideTestcontainers for .NETOfficial docs for Testcontainers for .NET, the library that starts real databases, caches and brokers in Docker for your tests and removes them afterwards. Ready-made modules for SQL Server, PostgreSQL, Redis and more. Free and open source under MIT.
- Resource· GuidePlaywright DocumentationThe official documentation for Playwright, Microsoft's open-source framework for end-to-end testing in real Chromium, Firefox and WebKit browsers, with mobile emulation. It walks you from installation to your first test, then covers locators, assertions, fixtures, authentication, API testing, parallel runs and CI. Tools such as the code generator, UI mode and trace viewer make first tests easy. It suits developers and QA engineers adding reliable browser tests to a web app.
Checked against 17 official sources, October 2026. If something has changed, the docs win.Show sourcesHide sources
- Visual Studio: Create an ASP.NET Core app with Angular
- ASP.NET Core: Overview of single-page apps
- ASP.NET Core: Generate OpenAPI documents (including build time)
- ASP.NET Core: Identity API endpoints for SPAs
- ASP.NET Core: Prevent CSRF attacks (antiforgery, JavaScript and SPAs)
- MSBuild reference for the JavaScript Project System (.esproj)
- Angular: Workspace and project file structure
- Angular: Proxying to a backend server
- Angular: Style guide
- Angular: HttpClient interceptors and XSRF protection
- Angular: Unit testing with Vitest
- ng-openapi-gen README
- Playwright: authentication and visual comparisons
- EF Core: Migrations overview and bundles
- ASP.NET Core: Integration tests with WebApplicationFactory
- Aspire documentation
- .NET release notes and support policy
Best practices and checklists for this stack
Picked from the other libraries by shared topics.
Best practices
See all- TypeScript Best PracticesModern TypeScript best practices for 2026: strict settings, TypeScript 7, modeling data with unions, safe narrowing, runtime validation, generics and typed linting.
- Next.js App Router Best PracticesNext.js 16 App Router best practices: Server Components, Cache Components and use cache, secure Server Actions, proxy.ts, metadata and images.
- React Best PracticesModern React best practices for 2026: pure components, lean state, fewer effects, React Compiler, form actions, accessibility and testing.
Checklists
See all- Web Accessibility ChecklistA practical web accessibility checklist built on WCAG 2.2 level AA, with a severity and a concrete way to verify every check.
- Web Performance ChecklistA practical web performance checklist built on Core Web Vitals: LCP, INP and CLS, with a severity and a concrete way to verify every check.
- Web Application Security ChecklistA practical web application security checklist built on the OWASP Top 10:2025 and ASVS 5.0, with a severity and a way to verify every check.
Work with me
Stuck on something specific?
Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.
- 1:1 Mentorship
- Fresh Graduate Mentorship
- Career Guidance
Brand deals, promos and partnerships: tauseeffayyaz@gmail.com