Project structure · Full stack
Blazor web app project structure
Opens with creditsA full stack C# web app built from the .NET 10 dotnet new blazor template with interactive Auto mode: a server project that prerenders pages and owns the database, and a .Client project for components that can run in the browser as WebAssembly. For students who know some C# and want to build web UI without a JavaScript framework, and want to know where the database code, the shared contracts and the bUnit tests go as the app grows.
Curated by Tauseef FayyazIntermediate156 files and folders.NET 10 (LTS), ASP.NET Core 10, Blazor Web App templateChecked October 2026How it grows
Each stage opens the explorer there
- 1Day 1What the scaffold and your first hour give you46 files and folders
- 2GrowingWhat a real app with features and tests adds+57 files and folders
- ProductionWhat running it for real users adds+27 files and foldersOpens with credits
- ExpertWhat a team needs to keep it healthy for years+26 files and foldersOpens with credits
How it is organised
- Static server rendering is the default; add interactivity only where a page needs it. Each page picks a render mode with `@rendermode`: Interactive Server for staff and admin screens, Interactive WebAssembly or Auto for screens used all day or on shaky connections.
- Know which project code runs in. ClinicApp only ever runs on the server. ClinicApp.Client is downloaded by browsers, so it holds no secrets, no connection strings and no database code. A component that may run as WebAssembly must live in the client project.
- Components talk to interfaces, never to the database directly. The server implements `IAppointmentService` with EF Core; the client implements it with HttpClient against a small API. The same component then works in every render mode.
- Group by feature, not by file type: `Features/Appointments` on the server, `Pages/Appointments` in the client. A change to booking touches a few files that sit together.
- Use `IDbContextFactory` and a new, short-lived DbContext per operation. A Blazor circuit can live for hours, much longer than the unit of work a DbContext is designed for.
- Never send EF Core entities to components. DTOs in `Contracts` are the boundary, with validation attributes that run in the browser for feedback and again on the server for safety.
- Every API endpoint and every page that shows private data has an explicit authorization rule. Hiding a link is not security.
- Test in layers: bUnit for components and rules at Growing, integration tests on real PostgreSQL and a few Playwright journeys at Production, architecture and load tests at Expert.
At the top of the project
Open one in the explorer for the full story
- ClinicApp/
- .config/Local .NET tool manifest, so everyone uses the same dotnet-ef version.1 inside
- .git/Git history for the whole solution.
- .vs/Visual Studio's per-machine cache: open files, breakpoints, IntelliSense data.
- .editorconfigFormatting and code style rules that the IDE, `dotnet format` and the compiler all read.
- .gitignoreKeeps bin, obj, .vs, user secrets and local databases out of Git.
- ClinicApp/The server project: hosts the app, prerenders pages, runs Interactive Server components and the API.11 inside
- ClinicApp.Client/The WebAssembly project: components that can run in the browser, plus contracts shared with the server.10 inside
- ClinicApp.slnThe solution file: lists the server, client and test projects so they build together.
- Directory.Build.propsMSBuild settings every project inherits: target framework, nullable, warnings as errors.
- Directory.Packages.propsCentral package management: every NuGet version in one file.
- docker-compose.ymlStarts PostgreSQL locally with one command for development.
- global.jsonPins the .NET SDK version for this repository.
- README.mdHow to run, test and change the app: prerequisites, commands, render mode rules.
- tests/Every test project: bUnit component tests, integration tests, browser tests and architecture rules.1 inside
Learn more on Sefism
Roadmaps, cheat sheets and projects that go with Blazor web app.
- Roadmap· Blazor.NET developer roadmapC#, ASP.NET Core, EF Core, production-ready APIs
- Roadmap· Web API.NET developer roadmapC#, ASP.NET Core, EF Core, production-ready APIs
- Roadmap· PostgreSQLSQL and databases roadmapQueries, design, indexes, transactions
- Roadmap· C#Software design and clean code roadmapOOP, SOLID, design patterns, refactoring
- Cheat sheet.NET developer cheat sheetC#, ASP.NET Core, EF Core, production-ready APIs.
- Cheat sheetFull stack development cheat sheetBuild and ship whole web apps.
- Cheat sheetSQL and databases cheat sheetQueries, design, indexes, transactions.
- Cheat sheetQA and test automation cheat sheetManual testing to automated suites.
- FYP idea· IntermediateClosed-Loop Patient Referral Tracking Between Village Health Workers and District HospitalsWhen a village health worker refers a patient to a hospital, nobody usually finds out whether the patient arrived, what happened, or whether follow-up is needed. Build an offline-first referral app and a simple hospital desk screen that close the loop: referral slip with a short code, arrival check-in, outcome note and a follow-up task back to the worker. Measure how many referrals get an outcome recorded.
See 12 moreShow fewer
- FYP idea· IntermediateUniversity Exam Timetable and Invigilator Planner Benchmarked on ITC 2007 DatasetsEvery semester, exam offices build timetables by hand and students end up with clashes, three papers in a row or exams in rooms that are too small, while invigilator duties are shared unfairly. Build an exam scheduler that assigns exams to slots and rooms, spreads each student's papers, assigns invigilators fairly, and is tested on the public ITC 2007 examination benchmark before being run on your own university's anonymised data.
- FYP idea· IntermediatePrivacy-First Legal Aid Intake and Case Routing for NGO Legal ClinicsNGO legal clinics and university law clinics in Pakistan, India, Nigeria and Kenya take requests by phone, walk-in and WhatsApp, and sensitive details about domestic abuse, labour disputes or police cases end up in personal phones and spreadsheets. Build a secure intake system with a guided form, issue classification into a standard legal taxonomy, routing to the right volunteer lawyer, and strict access control, encryption and audit logs. Threat-model it before writing code.
- FYP idea· BeginnerMCQ Exam Item Analysis and Faulty Question Finder for University TeachersBuild a web tool where a teacher uploads the answer sheet results of a multiple-choice exam and gets back a report on every question: how hard it was, whether it separated strong and weak students, which wrong options nobody chose, and which questions probably have the wrong answer key. Many university and entry-test MCQs in Pakistan are marked on paper or OMR with results in Excel, so this analysis rarely happens. Fixing a few bad questions makes results fairer for every student.
- QuestionIs .NET worth learning in 2026?Yes, for the right market. .NET is a modern, open-source, cross-platform stack with steady demand in enterprise, finance, government, healthcare and Microsoft-heavy companies, including many in Pakistan, the Gulf, the UK and Europe. .NET 10 is the current long-term support release. Check job posts where you want to work; if C# and .NET show up often, it is a solid choice.
- QuestionHow do I learn to write clean code as a junior developer?Clean code is a set of habits, not a book you finish. Fix names, function size, flag arguments and error handling one habit at a time, let a formatter and linter settle style, learn to refactor in small steps behind tests, and keep a list of the review comments you get twice: that list is your personal curriculum.
- QuestionShould I use PostgreSQL or MongoDB for my project?For most student and startup projects, PostgreSQL is the safer default: relational data, joins, constraints and transactions fit most apps, and it handles JSON and vector search too. MongoDB is a good fit when your data is naturally document-shaped and varies a lot, or your team already knows it well. Model your data first, then choose.
- QuestionWhat does proof of work mean for a fresher developer?Proof of work is evidence someone can check in a few minutes that you can do the job: a deployed project real people could use, readable code with tests, a pull request merged into someone else's project, or a clear write-up of a problem you solved. It replaces the experience a fresher does not have yet, so it must be easy to find and easy to verify.
- Resource· GuideBlazor documentationMicrosoft's official Blazor docs on Microsoft Learn: the Blazor Web App, render modes, Razor components, forms and validation, authentication, JavaScript interop, performance and hosting. Free, current for .NET 10, with step-by-step tutorials for building web UI in C#.
- Resource· Guide.NET documentationMicrosoft's official documentation for modern .NET on Microsoft Learn: installing the SDK, the dotnet CLI, project files and NuGet, the C# language guide, LINQ, async programming, testing and deployment. Free, current for .NET 10 and the reference every other .NET resource points back to.
- 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· GuideAspire documentationThe official docs for Aspire, the open source, code-first tool for running, observing and deploying distributed apps. Learn the AppHost, the developer dashboard with OpenTelemetry logs, traces and metrics, and the standalone dashboard. Free, MIT licensed, version 13.6 as of September 2026.
- 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.
Checked against 16 official sources, October 2026. If something has changed, the docs win.Show sourcesHide sources
- dotnet new blazor template (release/10.0)
- ASP.NET Core Blazor project structure
- ASP.NET Core Blazor render modes
- Prerender Razor components and persistent state
- Call a web API from Blazor
- Blazor with EF Core
- Blazor authentication and authorization
- Threat mitigation for interactive server-side Blazor
- Test Razor components in Blazor
- Host and deploy Blazor
- bUnit documentation
- xUnit v3 getting started
- Playwright for .NET
- EF Core migrations overview
- Central package management
- Aspire documentation
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