Full-Stack Development with C#

What Is Visual Studio Code?

Watch video: What Is Visual Studio Code?

Key Insight: VS Code is just an editor by default. Its real power comes from the extensions you install - one set for C#, one for JavaScript/React, and one for SQL.

Real-World Example: Press Ctrl+` (the backtick key, usually above Tab) inside VS Code to open or close the integrated terminal. You will use this shortcut dozens of times per session.

What tools do you currently use to write or edit code, scripts, or text files? How does VS Code sound compared to what you use now?

Installing the .NET SDK for C#

Watch video: Installing the .NET SDK for C#

Key Insight: Always choose the LTS version of the .NET SDK while learning. It stays supported and stable for years - far less likely to introduce unexpected breaking changes.

Real-World Example: After installing, run 'dotnet --version' in the terminal. If you see a version number like 8.0.404 or 10.0.100, the SDK is working. If you see an error, restart VS Code first - that fixes most cases.

Action step: Open a terminal on your machine right now and type 'dotnet --version'. What does it say? If it is not installed yet, which operating system are you on?

Installing Node.js for React

Key Insight: npm comes free with Node.js. Installing Node gives you both the JavaScript runtime AND the package manager - the two tools React development requires on your local machine.

Real-World Example: Run 'node --version' to see something like v24.1.0, and 'npm --version' to see something like 10.9.0. Two separate tools, one installation.

Have you ever encountered the node_modules folder or a package.json file in a project? What did you think it was for at the time?

Installing SQL Server

Key Insight: SQL Server Express and the Developer Edition are both completely free. You do not need a paid licence to learn, develop, or test with MS SQL Server.

Real-World Example: A learner on a Mac runs: docker pull mcr.microsoft.com/mssql/server then starts the container with the right environment variables. The mssql extension in VS Code then connects to localhost on port 1433 - the same connection string as Windows.

What database have you worked with before, if any - Excel, Access, SQLite, MySQL? How do you think SQL Server compares in terms of scale and features?

Essential VS Code Extensions

Key Insight: Install extensions deliberately, not in bulk. A focused set - C# Dev Kit, ESLint, and the mssql extension - covers all three technologies in this course without cluttering your workspace.

Real-World Example: After installing the C# Dev Kit, type 'Console.' inside a C# file. VS Code immediately shows a dropdown of every method available on Console, including WriteLine, ReadLine, and Error - that is the extension helping you write correct code faster.

Have you ever had an IDE or editor highlight a mistake before you ran the code? How did that change the way you worked?

Your Companion Code Repository: Chello

Key Insight: Chello is your companion code repo at github.com/rickysoo/Chello — 40 lessons of working C#, SQL, Web API, and React code that goes hand in hand with the theory you learn here.

Real-World Example: Visit https://github.com/rickysoo/Chello. Open index.html in a browser to see the progress dashboard. Each Lesson folder contains the code for that lesson — Lesson15 onwards covers the Web API content in this module.

Your First C# Program

Watch video: Your First C# Program

Key Insight: The compiler catches many mistakes before the program ever runs. Treat error messages as useful clues - they always include the file name and line number of the problem.

Real-World Example: Change the text inside Console.WriteLine("Hello, World!") to your own name, then run 'dotnet run'. Your message appears instantly. This three-second change-run-observe cycle is the foundation of all programming practice.

Think about a task you do repeatedly - formatting reports, copying data between systems, sending the same type of email. If you could write a short program to automate that task, what would it need to do?

Variables and Data Types

Watch video: Variables and Data Types

Key Insight: C# is statically typed: a variable's type is fixed when you declare it, and the compiler enforces this before the program runs. This catches an entire category of mistakes early.

Real-World Example: int score = 95; stores a whole number. double price = 29.99; stores a decimal. string name = "Sara"; stores text. bool isActive = true; stores a flag. Using the wrong type - like int for a price - causes errors or silent data loss.

Where in your own work do you deal with different types of data - dates, amounts, names, true/false flags? How do you currently handle cases where data is the wrong type?

Making Decisions with Conditionals

Key Insight: A single = assigns a value; double == compares two values. This distinction is one of the most frequent sources of bugs in C-style languages. The compiler often catches it, but not always.

Real-World Example: if (score >= 90) Console.WriteLine("A"); else if (score >= 70) Console.WriteLine("B"); else Console.WriteLine("C"); - conditions checked top to bottom, first match wins.

Think of a decision you make repeatedly in your work that follows a pattern like "if X then do A, otherwise do B". How would you translate that logic into an if/else structure?

Repeating Work with Loops

Key Insight: An infinite loop runs forever because its condition never turns false. Always check: does something inside the loop move the controlling variable toward the exit condition?

Real-World Example: var names = new List<string> { "Ana", "Ben", "Cara" }; foreach (string name in names) { Console.WriteLine(name); } - prints all three names without a single counter variable.

Imagine you have a spreadsheet with 500 rows of customer data. What tasks would be repetitive enough to benefit from a loop? Think about filtering, formatting, or totalling values.

Organising Code with Methods

Key Insight: A good method does one clearly-named thing and is short enough to understand without scrolling. Small, well-named methods are the foundation of readable, maintainable code at every scale.

Real-World Example: int Add(int a, int b) { return a + b; } - defines the method. Add(3, 4) - calls it and gets 7. The name tells you exactly what it does. The body is two words. That is a perfect method.

Action step: Look at the most repetitive task in your work and describe it in one sentence starting with a verb - for example "Calculate the total cost". That sentence could become the name of a method. What would its inputs and output be?

Handling Errors Gracefully

Key Insight: Always catch the most specific exception type you expect, and only use try/catch for unexpected failures: not for ordinary decision-making in your code.

Real-World Example: try { int result = int.Parse(userInput); } catch (FormatException ex) { Console.WriteLine($"Not a valid number: {ex.Message}"); } catch (Exception ex) { Console.WriteLine($"Unexpected: {ex.Message}"); } finally { Console.WriteLine("Cleanup always runs here."); }

Think about a program you might write that reads data from a file or a database. What could realistically go wrong at runtime that a try/catch would handle? How would you decide between using an if/else check versus a try/catch for that scenario?

Classes and Objects

Watch video: Classes and Objects

Key Insight: A class is the blueprint; an object is the instance. You can create many objects from one class, each with their own data but sharing the same structure and behaviour.

Real-World Example: var cat1 = new Cat(); var cat2 = new Cat(); - creates two separate Cat objects. Changing cat1.Name does not affect cat2.Name. Each object has its own copy of the data defined in the class.

Think about your work or industry. What things do you deal with that could be modelled as classes? What data and actions would each have?

Properties and Methods

Key Insight: Properties hold data; methods define behaviour. Together they form the contract of a class - what it knows and what it can do.

Real-World Example: account.Balance gets the value (property read). account.Deposit(200) performs an action (method call). The method updates the balance internally. The caller does not need to know how.

For a class that represents a product in an online store, what properties would it have? What methods? Think about what data it stores and what operations you would perform on it.

Encapsulation and Access Modifiers

Key Insight: Encapsulation hides internal details. Private fields and controlled property access prevent external code from putting objects into invalid states.

Real-World Example: A BankAccount with private _balance and a public Withdraw method: the method checks that the amount does not exceed the balance before reducing it. No caller can bypass this rule by setting the field directly.

In your work, what are examples of information that should be read-only from the outside but changeable internally through controlled processes? How does that map to encapsulation?

Constructors and the new Keyword

Key Insight: A constructor runs automatically when an object is created with new. It is responsible for ensuring the object starts in a valid, fully initialised state.

Real-World Example: new Customer("Sara", "sara@example.com") - the constructor receives both required values, validates them, and assigns them to properties. The object is ready to use immediately after new returns.

If you were designing a class for a bank account, what data would you require at creation time (in the constructor)? What data could be set later? Why?

Inheritance: Sharing Behaviour

Watch video: Inheritance: Sharing Behaviour

Key Insight: Inheritance expresses "is-a" relationships: a SavingsAccount is-a BankAccount. Prefer composition (has-a) when the relationship is about containing or using something, not being a type of it.

Real-World Example: class SavingsAccount : BankAccount { public double InterestRate { get; set; } } - SavingsAccount inherits all BankAccount members and adds an InterestRate property specific to savings accounts.

Do you agree that composition (has-a) is usually better than inheritance (is-a)? Think of a design scenario from your own experience where using inheritance seemed right but caused problems later.

What Is a Relational Database?

Watch video: What Is a Relational Database?

Key Insight: A relational database organises data into tables that relate to each other via keys - eliminating duplication and making updates instant across the entire dataset.

Think of a real-world business scenario - a shop, a school, a clinic. What tables would you need and how would they relate to each other?

SELECT: Reading Data

Watch video: SELECT: Reading Data

Real-World Example: SELECT TOP 5 ProductName, Price FROM Products WHERE CategoryID = 3 ORDER BY Price DESC: returns the five most expensive products in category 3.

Write a SQL query in your head for data you deal with at work - what would you want to SELECT and what WHERE condition would make it useful?

INSERT, UPDATE, DELETE

Key Insight: Always include a WHERE clause on UPDATE and DELETE - omitting it will affect every row in the table.

What would be the consequences if a bug in your code ran a DELETE or UPDATE without a WHERE clause on a production database? How would you prevent this?

Joining Tables

Real-World Example: SELECT c.Name, COUNT(o.OrderID) AS TotalOrders, SUM(o.Amount) AS TotalSpent FROM Customers c LEFT JOIN Orders o ON c.CustomerID = o.CustomerID GROUP BY c.CustomerID, c.Name ORDER BY TotalSpent DESC

In a database you work with or can imagine, which two tables would you join most often and what question would that join answer?

Creating Tables and Schema Design

Key Insight: Design your database schema before writing application code. Fixing structural mistakes after data exists is far harder than getting the design right upfront.

If you were designing a database for a small gym membership system, what tables would you create and what foreign key relationships would connect them?

The Project We Will Build

Key Insight: Boards contain lists; lists contain cards. This three-level hierarchy is the data model behind every endpoint you will build in this module.

Real-World Example: GET /api/boards → all boards. GET /api/boards/3/lists → all lists inside board 3. GET /api/lists/7/cards → all cards inside list 7. The URL structure mirrors the data hierarchy.

Before reading on, open github.com/rickysoo/Chello and browse the Lesson15 folder. You do not need to understand the code yet — just getting a feel for what a real Web API project looks like helps the concepts in this module land faster.

What is a REST API?

Watch video: What is a REST API?

Key Insight: A REST API lets your React front-end and SQL Server database stay completely separate: each talks only to the API, which acts as the rules-enforcing intermediary between them.

Real-World Example: GET /api/cards: retrieve all cards. GET /api/cards/7: retrieve card 7. POST /api/cards: create a new card. PUT /api/cards/7: replace card 7. DELETE /api/cards/7: delete card 7.

Think about the Chello app data: boards, lists, and cards. For each resource, what endpoints would you need? Which HTTP verbs would each support, and what would a 404 response mean in practice?

Creating an ASP.NET Core Web API Project

Watch video: Creating an ASP.NET Core Web API Project

Key Insight: Run dotnet new webapi, then visit /swagger in development: you get a live, clickable API explorer generated automatically from your code with zero extra setup.

Real-World Example: dotnet new webapi -n ChelloApi → dotnet run → visit https://localhost:5001/swagger. The Swagger UI lists all endpoints and lets you send test requests from the browser instantly.

The default template includes a WeatherForecast controller as a demonstration. Before you start hands-on lessons, look at that generated controller: can you identify the [Route] attribute, the [HttpGet] attribute, and the return type?

Controllers and Routing

Key Insight: [ApiController] and [Route] on the class plus [HttpGet("{id}")] on the method is all you need to wire up a fully functional, correctly routed API endpoint in ASP.NET Core.

Real-World Example: [ApiController] [Route("api/[controller]")] public class CardsController : ControllerBase { [HttpGet] public IActionResult GetAll() { return Ok(cards); } [HttpGet("{id}")] public IActionResult GetById(int id) { return id > 0 ? Ok(card) : NotFound(); } }

For the Chello app, would you put list endpoints and card endpoints in one controller or two? How would you design the routes so that fetching all cards inside a specific list is clearly expressed using route attributes?

Returning and Receiving Data

Key Insight: ASP.NET Core serialises and deserialises JSON for you automatically: just return a C# object from Ok() and accept a model class as a [FromBody] parameter.

Real-World Example: public class CreateCardRequest { [Required] [MaxLength(200)] public string Title { get; set; } = ""; [Range(1, int.MaxValue)] public int ListId { get; set; } }: [ApiController] auto-returns 400 if validation fails.

Think about the Card model for a Chello-like app: title, description, list it belongs to, position. Which properties would you mark as [Required]? Would you add [Range] or [MaxLength] constraints?

Middleware and the Request Pipeline

Watch video: Middleware and the Request Pipeline

Key Insight: Middleware runs in the exact order you register it in Program.cs: authentication must come before authorisation, and routing before endpoint execution, or requests will be processed incorrectly.

Real-World Example: app.UseHttpsRedirection(); app.UseAuthentication(); // 1. who are you? app.UseAuthorization(); // 2. are you allowed? app.MapControllers(); // 3. route to action: order is mandatory.

Some Chello endpoints should be public (viewing a shared board preview) and others should require login (creating or deleting a card). How would you use [Authorize] and [AllowAnonymous] to enforce those rules?

HTML Structure and Semantics

Key Insight: Semantic HTML tags like &lt;header&gt;, &lt;main&gt;, and &lt;article&gt; tell browsers, screen readers, and search engines what your content actually means: not just what it looks like.

Real-World Example: <header><nav><a href="/">Home</a></nav></header><main><section><h1>My Board</h1><article class="card" id="card-1"><h2>Task</h2></article></section><form><input type="text" name="title" placeholder="Card title" /><button type="submit">Add Card</button></form></main><footer><p>Chello App</p></footer>

A board contains lists, and each list contains cards. How would you use semantic HTML elements to represent that hierarchy? Is there a case where a plain div would actually be the right choice?

CSS Fundamentals

Key Insight: Flexbox handles the vast majority of real-world layout challenges with just five properties: display, flex-direction, justify-content, align-items, and gap.

Real-World Example: :root { --color-primary: #1565c0; --spacing-md: 16px; } .board { display: flex; flex-direction: row; gap: var(--spacing-md); } @media (max-width: 767px) { .board { flex-direction: column; } }

The Chello app has lists arranged in a horizontal row, and each list contains vertically stacked cards. How would you use Flexbox to achieve that two-axis layout? What properties would you put on the board container, and what on each list?

What Is React and Why Components?

Watch video: What Is React and Why Components?

Key Insight: React builds UIs from reusable components. Each component owns its appearance and behaviour. Assembling them creates complete pages.

Real-World Example: A Twitter/X feed uses components: a Tweet component renders one tweet; a Feed component renders a list of Tweet components; a Profile component holds user info. Each can change independently.

Think about a web page or app you use often. Can you identify three or four distinct components on the page? What data and behaviour does each one own?

Props: Passing Data to Components

Key Insight: Props flow one way: parent to child only. Children read props but cannot modify them. This one-way data flow makes application state easier to reason about.

Real-World Example: <ProductCard name="Notebook" price={12.99} inStock={true} /> passes three props. Inside ProductCard, { name, price, inStock } destructures them into local variables ready to use in JSX.

Can you think of a UI element that would need to receive different data each time it renders, like a product card or a user profile tile? What props would it need?

State with useState

Watch video: State with useState

Key Insight: Never modify React state directly. Always use the setter function. Direct mutation does not trigger re-renders and leaves the UI out of sync with the data.

Real-World Example: const [isOpen, setIsOpen] = useState(false); <button onClick={() => setIsOpen(!isOpen)}>Toggle</button> - clicking the button flips the boolean and React re-renders the component automatically.

Think about interactive elements you have used - tabs, accordions, shopping carts, form fields. What state would each component need to track? Would that state be local or shared?

Loading Data with useEffect

Watch video: Loading Data with useEffect

Key Insight: The dependency array in useEffect controls when the effect re-runs. An empty [] means run once on mount. Omitting it means run after every render - usually a bug.

Real-World Example: useEffect(() => { fetch("/api/products").then(r => r.json()).then(data => setProducts(data)); }, []); - fetches products once when the component mounts and stores them in state for rendering.

Action step: Think about the last web page you built or used that displays data from a server. At what point in the page lifecycle should that data be loaded? What should the user see while waiting?

Rendering Lists and Conditional UI

Key Insight: Always give list items a unique key prop when rendering with map. React uses keys to efficiently update only the items that changed.

Real-World Example: products.map(p => <ProductCard key={p.id} name={p.name} price={p.price} />) - renders a ProductCard for each product. The key={p.id} tells React which card corresponds to which product.

How do you currently display lists of items in web pages you build or maintain? Do you use templates, server-rendered HTML, or manual DOM manipulation? How would React's approach differ?

The Three-Tier Architecture

Watch video: The Three-Tier Architecture

Key Insight: The API layer is the security boundary between your browser and your database. The browser never connects to SQL Server directly.

In your own words, explain why you would NOT connect React directly to SQL Server. What problems does the API layer prevent?

Creating a C# Web API

Watch video: Creating a C# Web API

Real-World Example: [HttpGet] public async Task<IActionResult> GetAll() { var products = await _service.GetAllAsync(); return Ok(products); }: a minimal GET endpoint that returns all products as JSON.

What endpoints would a basic e-commerce API need? List them as HTTP verbs and paths, for example: GET /api/products, POST /api/orders.

Calling the API from React

Watch video: Calling the API from React

Key Insight: CORS must be configured on the API server - the browser enforces it, not React. Without CORS headers in the API response, the browser silently blocks the data.

After getting data from the API into React state, what would you need to do to display it as a formatted table or card list in the UI?

Connecting C# to SQL Server

Real-World Example: var products = await _context.Products.Where(p => p.IsActive).OrderBy(p => p.Name).Take(20).ToListAsync();: EF Core query for the first 20 active products alphabetically.

What is one advantage of using Entity Framework Core over writing raw SQL strings in your C# code? What is one advantage of writing raw SQL instead?

End-to-End: Tracing a Request

Key Insight: Always debug full-stack issues layer by layer: browser DevTools for the React/network layer, VS Code debugger for the API, and SSMS for the database.

Walk through a different scenario end-to-end: a user clicking "Delete" on an item. What happens in React, the API, and the database?