The big picture
Web apps, websites and APIs: what is the difference?
Things that open in the same browser do not work the same way. First separate who produces what.
More than an article. A complete learning path.
41 lessons, 10 modules and explained examples at three levels. Follow the sequence or jump to a topic.
Understand the concept
A website mostly shows everyone the same content: an article, a project page, a contact form. A web application carries state that depends on the user: a signed-in account, items in a basket, drafts in an admin panel. The line is blurry; this very site is both a public portfolio and a management application only its owner can enter.
An API (Application Programming Interface) talks to programs rather than people. It usually returns JSON, not HTML. In this project the browser never connects to the database. The Next.js server asks the .NET API while it renders a page, and the API asks the database. Each layer owns one responsibility: Next.js presentation, the API business rules and the security boundary, SQL Server durable data.
Throughout this course we follow one request: from the moment a link is clicked in the browser until SQL Server finds the row and the article is painted on screen. Every lesson zooms into one stop on that journey.
You cannot fix a bug until you know which layer it lives in.
Treating code that runs in the browser as a security boundary; the user can always change the client.
A letter’s journey through the city
Think of a request as a letter and the server as a city. Pick a scenario, press play and watch which gates the letter passes and where it gets stopped.
You clicked a post. The browser writes a letter saying ‘send me this post’.
One topic. Three levels of depth.
Tarayıcı → GET /tr/blog/ilk-yazi → HTML (insan için)
Program → GET /api/posts/ilk-yazi → JSON (program için)The same post can be requested in two forms: as a page or as data.
This page connects to no real server or database. Code samples are illustrative for .NET 8, Next.js and SQL Server; timings are example values in the simulation, not measurements. Try samples only in your own development environment; never share real connection strings, tokens or passwords.
Try it yourself first.
A user removes the disabled attribute of a ‘Delete’ button in developer tools and clicks it. What must actually prevent the action?
Show the solution and explanation
API tarafındaki yetkilendirme:
[Authorize(Roles = "Admin")] ve kaynağın sahibine ait olup olmadığının kontrolü.
Butonu gizlemek yalnız kullanıcı deneyimidir.Client-side checks are a convenience, not security. The real decision is made on the server that processes the request.