Building Applications with React 19 and ASP.NET Core 9

Explore essential modern JavaScript features in an optional module to refresh key details and stay up to date with the language.

Create a vanilla JavaScript project with Vit, initialize in a directory, install dependencies, and run the dev server to view the project in the browser.

Learn how to structure JavaScript code with modules, export public members, hide internal functions, and use imports, default exports, and aliases in a practical project.

Explore how let and const declare variables and constants in JavaScript, with block scope, reassignment rules, and mutating underlying values in objects and arrays.

Learn how arrow functions in JavaScript provide concise alternatives to regular functions, including one-liners, multiple parameters, implicit returns, and passing functions as arguments to save code.

Learn how to use template strings in JavaScript with backticks for clean interpolation, multi-line strings, and embedding variables and function results to improve readability.

Use the ternary operator to select a message from a boolean expression, such as age >= 18, returning 'you shall pass' if true, otherwise 'you shall not pass'.

Explore enhanced object literals by using shorthand property names, dynamic property keys with square brackets, variable property names, and functions (regular or arrow) as object members.

Master destructuring in JavaScript by extracting variables from objects and arrays, including from function return values and function parameters, with practical examples.

Explore the spread operator in arrays and objects, mastering destructuring, rest elements, cloning, and array concatenation to write concise, flexible JavaScript code.

Define a class as a template for objects, with a constructor setting height and width. Show reusable behavior with an area method and inheritance by extending rectangle to square.

Learn to use the array map function to transform values into a new array, extract properties like id, name, and country, and render data into UI elements with template string.

Explore asynchronous programming in JavaScript by sending HTTP requests to a public API with fetch, handling responses and errors using promises and async/await.

Use the debugger to stop execution in JavaScript, run code line by line, and inspect variables and the response object to understand errors and API behavior.

Explore modern JavaScript features that organize applications with separate files, including let, const, arrow functions, template strings, object literals, destructuring, spread, array map, promises, async/await, and debugger.

Learn the fundamentals of React through short examples, gain confidence building user interfaces, and take your first steps toward a project in this introductory module.

Explore the React project structure, from index.html and main.tsx to rendering with createRoot in a strict mode app, and learn how assets and public files are organized.

Explore the differences between pure HTML and React, including JSX, and state management with use state and use effect for dynamic UI; see how React updates diffs for efficient rendering.

Explore the basic structure of a React component, focusing on a functional component that combines user interface using jsx, behavior, and styling via a css import.

Explore functional and class components in React, learn how hooks replace class lifecycle features, and adopt modern functional components with JSX and state for building apps.

Learn how JSX extends JavaScript to create UI, and how transpilation converts JSX into JavaScript, with rules like a single parent element and className usage.

Learn to replace extra div wrappers with React fragments to satisfy the single parent element rule in JSX, using the fragment placeholder and its shorthand <> </> while importing React.

Learn how JSX expressions embed JavaScript code, variables, and functions in a React component, apply TypeScript types for parameters, and use expressions in element attributes such as image sources.

Learn how to style React components using JSX and className, differentiate global css from css modules, and apply styles through import styles, css modules, or inline style objects.

Delve into React events, wiring onClick and onKeyUp handlers, using handleClick and handleKeyUp, logging values, and introducing state to render updates.

Learn how react hooks enable stateful functional components, using useState to manage state and trigger UI rerenders, and explore useEffect useContext useMemo and useCallback for advanced patterns.

Use useState to manage a message in a React functional component and reflect user input in the UI; initialize with an empty string and update with setMessage.

Divide a React app into reusable child components and export them for use in the main app. Pass props to components to render dynamic text with JSX and TypeScript.

Learn to pass content as a parameter in React via content projection, using the children prop and React nodes to render text, images, inputs, and other components.

Learn to render content dynamically in React by using boolean props, ternary operators, state, and conditional rendering to display different UI based on user input.

Repeat content with map to render a dynamic table of people, using a person model, state management with use state, and a delete action.

Learn to send messages from child to parent in a React table by passing a function prop, creating a row component, and invoking the parent remove handler.

Use the useEffect hook to run code after rendering, synchronizing with external systems like web APIs, updating the document title, and cleaning up resources when the component is destroyed.

Demonstrate useEffect in React by building a component, handling mounting, cleanup, and updating the document title, then control execution with dependencies such as a timer.

Use the use context hook to pass a message through a value context provider, letting nested components subscribe and read the value, with a default when no provider exists.

Explore memoization with the useMemo hook to cache factorial results and avoid unnecessary recalculation during re-renders, improving performance when number changes.

Explore memoization in React by converting components to memoized versions, caching table and row components, and using memo to avoid rerendering during state updates.

Explore how to use useCallback to preserve function references and prevent unnecessary rerenders in memoized components, keeping table and row memo components efficient during updates.

Learn to handle render errors in React using error boundaries, display a graceful fallback user interface, and implement error boundaries with a library and a custom fallback for robust apps.

Discover how React's reconciliation updates the UI efficiently, compare functional and class components, and learn key hooks like useState, useEffect, useContext, useMemo, and useCallback, plus JSX and props.

Apply what we learned to start developing our application by displaying a list of movies for the user, reinforcing core React concepts in this module.

Clean up the app by deleting the previous module work and recreating the project with a fresh React TypeScript setup, running the npm commands, and removing unnecessary components and styles.

Create a movie display component in a fissures folder, with a movie model (id, title, poster) and a display movie component that renders the movie title and poster.

Create a movies list component to render in theaters and upcoming releases by mapping over movie props, and style with a flex CSS module to display horizontally.

Show how to simulate delayed movie data loading with React useEffect and setTimeout, display a loading state, and conditionally render movies in theaters and upcoming releases.

Centralize list rendering with a reusable generic list component in React using TypeScript generics, handling loading and empty states via customizable UI, and using children.

Create a centralized loading component and replace the initial loading text with a loading GIF, then use the default loading UI in the generic list and movies list.

Install bootstrap in a React and asp.net core project using npm, import bootstrap css, apply container margins, and build a reusable button component with react props.

Create a generic list component to display a movie list and show a loading UI while data loads, and install Bootstrap to style a modern looking application.

Explore routing within your application to enable user navigation from the app's roots. Learn the fundamentals of routing and how to implement navigation paths in this module.

Implement a top navigation menu with Bootstrap styling to power a routing system across a landing page and a genres page, creating reusable home and genres components.

Configure a routing system in a React app using React Router to map URLs to components, handle 404s, protect admin routes, and navigate via nav links.

Move the route configuration into its own file, create an app routes module that exports a routes component, import it, and keep the app working while improving organization.

Create and wire up the project pages by adding genre, movie, actor, and theatres components, plus create/edit routes, movie filters, and a navigable menu.

learn to programmatically navigate after a successful form submission by wiring a button's onClick to a handle click that uses the useNavigate hook to redirect to the genres index.

Configure url route parameters by adding an id to edit routes and read it with use params to load the correct genre or movie detail via nav links.

Handle not-found routes by implementing a custom 404 page, a catch-all root path, and optional redirects to the home page, while logging and optionally storing the routes users try.

Explore routing in a single page application with react router to create multi-page navigation, read route parameters, handle not found routes, and customize the photo for the user experience.

Work with forms to enable users to enter data in your application. Understand how forms allow users to enter data into your application.

Create your first form with the react hook form library, wiring inputs with register and handleSubmit. Learn to define a form type, handle submission, and prepare for validation.

Define validation rules with the job library and react hook form, require the name field, show errors, and disable the submit button until the form is valid.

Disable the send button during form posting and show sending while awaiting response, using a boolean isSubmitting, async/await with a promise and setTimeout to simulate delay, preventing multiple submissions.

Implement custom validations in a form by enforcing an uppercase first letter for the genre name. Create a validations folder with first-letter-uppercase.ts and apply the validator in the genre component.

Centralize the genre form into a reusable component to power both create and edit flows, using a create genre model, props, default values, and React Hook Form.

Build a filter movies component with a filter movies dto, genre model, and red hook form to filter by title, genre, in theaters, and upcoming releases.

Build an actors form in React that can append a file, and define an actor creation interface with name and date of birth.

Validate actors form by building a validation rules object, enforcing name required with uppercase first letter, and date of birth required not in the future via validation rule and resolver.

Build a reusable select image component in a React and TypeScript app to upload, preview, and attach an actor image to a form, with edit-mode url support.

Build a theater form component with React hook form and theater creation model to validate the name (required, first-letter uppercase) and handle onsubmit for create and edit.

Install Leaflet in a React app, render a map with markers and popups, handle map clicks to capture coordinates, and define a coordinate model for form integration.

Integrate a form with Leaflet to capture map coordinates, pass latitude and longitude to the model, and manage editing with preloaded coordinates.

Create a movie creation model and a React movie form component with TypeScript, implementing validation for title and release date, and support for trailer and poster inputs.

Build a reusable two-list multi-selector for genres to model the many-to-many movie-genre relationship, fetching genres and moving items between non-selected and selected lists in create and edit movie forms.

Use a multiple selection component to assign theaters to a movie by managing non-selected and selected theaters in state and wiring the form submission to pass theater IDs.

Build a typeahead component to relate actors and movies, handling a many-to-many relationship with actor names and character fields, using a React Bootstrap typeahead and in-memory data for demonstrations.

Develop a multi-actor selection feature by using state to display selected actors in a list, enable typeahead selection, handle character input, and remove actors before submitting.

Implement drag and drop in a React app to reorder actors by dragging one over another, swapping their positions and updating the underlying actors array.

Implement forms in React using React Hook Form to create versatile forms with validations. Build custom components to integrate with forms, including image selection, map, and multiple selection components.

Explore the basics of ASP.NET Core Web API and how the backend enables interaction with a real database to develop modern applications.

Create an in-memory repository to simulate a database, define a genre entity with id and required name, and expose a get all genres method.

Learn how web API endpoints expose resources like genres, and how a genres controller groups actions such as http get to return a genres list.

Explore how post, put, and delete http methods operate on a single API genres route to create, update, and delete resources.

Learn how to receive an id parameter in an action, fetch a genre by id from an in-memory repository using first or default, and fix routing conflicts shown by swagger.

Map urls to actions in asp.net core with attribute routing and the program class. Customize routes, add id parameters, and use multiple routes to prevent conflicts.

Explore the data types an action can return in ASP.NET Core, including action result, action result of T, and IActionResult, with not found 404 and ok responses.

Explore asynchronous programming that frees threads during io operations, using await and task to delay while a web API or database responds, boosting performance.

Enable output cache to store action responses in memory, letting subsequent requests return immediately from cache for a 15-second expiration. Choose a sensible expiration to avoid outdated information.

Explore how an http request flows through a middleware pipeline, including authorization, and how output cache can short-circuit the process; configure middleware order in the program class.

Learn how model binding maps data from route values, query strings, and the body into action parameters in an ASP.NET Core API.

Apply data annotations to enforce a required name on genres and return 400 errors when validation fails. Customize error messages and rely on api controllers for automatic validation feedback.

Explore built-in validation rules beyond required, including max length, range for ages, credit card format, URL validation, and phone or regex checks, with practical Swagger examples.

Create and apply a custom validation attribute in C# that enforces the name field's first letter uppercase, demonstrating reusable validation rules across entities.

Implement a custom validation rule at the controller action to prevent duplicate genre names by checking an in-memory repository, returning a 400 error when the name exists.

Explore how dependency injection reduces coupling by injecting repositories via constructor, enabling swaps from in-memory to SQL, Oracle, or MySQL repositories, and configure services in the asp.net core IOC container.

Adopt the dependency inversion principle by coding to an interface and injecting implementations (in-memory or SQL Server) via dependency injection, enabling swapping and low coupling.

Explore the three service lifetimes in ASP.NET Core—transient, scope, and singleton—and see how they differ in instance creation, per HTTP request, and across restarts.

Demonstrates using a singleton in an ASP.NET Core in-memory repository to share state across HTTP requests, implementing a create method and updating the repository interface.

Apply output caching to the genres list, use tag-based cache invalidation with the high-output cache store, and replace hard-coded strings with a constant for reliable cleanup after creating a genre.

Configure environment-specific databases using configuration providers, swapping development and production connection strings without recompiling, managed via appsettings.json and environment variables.

Discover how to build web APIs with ASP.Net core by using controllers and actions, define routes for HTTP requests and cache responses, and apply middleware, validation, and dependency injection.

Connect the React application to an ASP.NET Core Web API and learn how to make HTTP requests from the React app to the Web API, while building the database.

Clean up the back end by removing weather forecast and most services, preserving the output cache store and repository, while returning a genres list including drama and action for testing.

Install Axios, then fire a one-time http get request from a React component to the web API using useEffect, and log the response data to the console.

Learn to configure cross-origin resource sharing (CORS) in an ASP.NET Core API to allow a React app from localhost origins, by setting allowed origins, methods, and headers.

centralize api urls with environment variables in react, using env files for development and production, and implement a reusable axios api client to fetch data like genres.

Install and configure Entity Framework Core with SQL Server, create a code-first database via application db context, and register it with a default connection in development.

Create the genres table from the genre class using the application db context and EF Core. Apply migrations to add id and name columns and update the database.

Inject the application db context into the genres controller, add a new genre, save changes asynchronously, and return a created-at response via the get genre by id route.

Create a genre on the front-end by posting to /genres, then navigate to the genres index; test adding multiple genres and handle API errors gracefully.

Show how to extract axios API validation errors into a string array and display them via a reusable React component for a better user experience.

Hide entities to preserve evolvability and use data transfer objects to define client inputs and outputs. Implement a genre creation DTO and a read DTO with AutoMapper.

Query the genres table via the application DB context, returning a list asynchronously and projecting to a DTO with Automapper to auto-select only mapped columns, improving query efficiency.

Build the index genres front-end screen by installing bootstrap icons, importing their CSS, and displaying a table with edit and delete actions and icons, using useState to manage genres.

Implement back-end pagination in ASP.NET Core by introducing a pagination DTO, limiting records per page, using from query to fetch page data, and exposing total records in headers.

Learn to use order by in the genres Get action to remove a warning by sorting results by id or name, with optional ascending or descending, and verify by running.

Learn to implement a front-end pagination component in React using Bootstrap, featuring previous/next controls, a per-page records selector, and dynamic page rendering driven by props and state.

Apply custom React hooks to encapsulate loading and data logic for a genres list, using useGenres to manage loading state, pagination, and API data in a React component.

Load a genre by id, map to a DTO, and update via a put after confirming existence, then save changes, clear the cache store, and return 204 no content.

Edit genres in React front-end by wiring nav links to the edit genre component, fetching genre data from the API, handling errors, and updating with put requests.

Delete a genre by its id using Entity Framework Core's execute delete async, returning 204 on success and 404 when not found, with cache update and swagger testing.

Implement a front-end delete workflow for genres in React using useCallback and useEffect, perform async API deletes, and confirm deletions with a custom confirm dialog that refreshes the list.

Define an actor entity with id, name, date of birth, and optional picture, create the actors table via migration, and expose a create API using a creation DTO from form.

Create an actor front-end flow with a create actor component that posts form data via post form to the web API, handles errors, and navigates to the actors list.

Define a flexible file storage interface with store, delete, and edit operations for azure or local implementations and apply it in the actors controller to store image urls.

Implement an ai file storage service using Azure blob storage, configure storage account and container, upload files with the correct content type, and support async delete operations.

Develop local file storage in an ASP.NET Core app by building a local file storage service, saving to wwwroot, and exposing the file URL. Use HTTP context accessor for requests.

Create an actor dto with id, name, date of birth, and picture. Implement a paginated get list and a by-id route in the actors controller using automapper and output cache.

Build the actors index screen in Visual Studio Code using a new use actors hook, integrate an actor model, and enable pagination and delete actor actions on the front end.

Update actors via an http put by mapping the actor creation dto to the existing actor with AutoMapper and update the picture via the file storage service when provided.

Edit the front-end to fetch an actor, format the date, map to an actor creation model, and submit a put request with an image, handling errors and navigation.

Implement back end delete logic for an actor and their picture by removing the actor from the database, saving changes, and deleting the associated picture file, with not found handling.

Learn to delete actors on the front end by reusing the index actors logic from index genres, and test the delete flow by creating an actor and confirming record deletion.

Create a generic index entities component and a generic use entities hook to manage any entity page (actors, genres) with pagination, loading states, and customizable table content via children.

Create a custom base controller to centralize pagination across entities using generics for entity and dto. Implement a get method that accepts pagination details and an order-by expression.

Create a generic base controller method that retrieves an entity by ID using an ID interface, maps it to a DTO, and returns not found when absent.

Extend a base controller to support create, update, and delete for genres, map the creation DTO to an entity, and test with ID, route name, and cache tagging.

Create a theater entity with id, name, and a NetTopologySuite geography location, configure EF Core to use NetTopologySuite, apply migrations, and wire a geometry factory for mappings.

Develop theaters back-end CRUD by defining theater and theater creation DTOs, wiring a custom controller, and mapping latitude and longitude to a point with automapper and a geometry factory.

Develop a front-end theaters crud workflow that creates and edits theaters via api post and get calls, navigates to theaters, and handles axios errors with reusable code.

Define the movie entity with id, title, trailer, release date and poster, and implement many-to-many relationships to genres, theaters, and actors via intermediate entities and composite keys with migrations.

Create movies using a movie creation DTO and poster form file, load genres and theatres with a post get DTO, and implement endpoints, mapping, and file storage.

Use a custom model binder to bind genre, theater, and actor IDs from a form when creating a movie, and map the creation DTO to the movie.

Create the movie page fetches real data from the API to populate genres and theaters, builds a post/get DTO, and handles loading, errors, and navigation after creation.

Create an API endpoint to fetch actors by name and map them to a movie actor DTO, then wire an asynchronous typeahead in React with a loading state.

Build a back end to fetch landing movies by creating landing and detail DTOs, querying upcoming releases and in theaters, and mapping genres, theaters, and actors with AutoMapper.

Fetch the landing page data from the API and render it on the front end, then create actors and movies, including an upcoming release, to populate the page with content.

Implement a put-get endpoint to load a movie update form, returning a movie details DTO with selected and non-selected genres, theatres, and actors via includes.

Edit movies in a React app by fetching movie data, converting to form data, submitting updates via API, and navigating to the movie detail page.

Implement a complete delete movie workflow: perform an HTTP delete, remove the movie and its poster, update the cache, and refresh the React UI with an alert.

Fetches and displays a movie's details on the detail page, including title, year, genres, poster and trailer, plus actors and theater locations on a map with coordinates and clickable markers.

Implement an endpoint for the full genre list, then build a movie filter using a MoviesFilterDto with pagination and deferred IQueryable, supporting title, in theaters, upcoming releases, and genre ID.

Finish the front-end movie filtering by fetching genres, applying title and genre filters, and implementing paginated results with URL-based state persistence.

Refactor the movie filter by extracting its logic into a custom React hook, useFilterMovies, to simplify the component and manage data loading, pagination, and URL updates.

Connect react app to the API with axios, configure cors, and manage production and development URLs via environment variables. Create a database from C# classes with Entity Framework Core.

Explore security fundamentals by enabling user registration, managing authentication states, and enforcing role-based actions for regular users and administrators.

Implement authentication with username and password using ASP.NET Core Identity. Issue JWTs with header, payload, and signature, containing user claims, to secure API access and enforce authorization for admin-only actions.

Learn to dynamically hide UI elements based on user authorization by building a centralized authorized component in React, driven by a claims context and optional required claims.

Use the authorized component to hide menu items and buttons for admins by checking claims and is admin, and gate nested components like genres.

Protect routes by conditionally rendering content with an authorize component and outlet, falling back to a default UI when the user lacks admin claims.

Configure identity with entity framework core and jwt bearer authentication to manage users, roles, claims, and json web tokens, including migrations, identity db context, and signing key validation.

Register and login users via a controller with user manager and sign in manager, using credentials and authentication dtos to issue a json web token with claims and expiration.

Store the JWT and its expiration in local storage, then decode the token to extract claims and update the app state with useEffect, with logout clearing storage.

Build and reuse a single authentication form component for login and register, enforcing validation with Yup, posting to the API, and updating JWT claims via context after navigation.

Build a secure movie rating feature by creating a rating entity and dto, extracting the user from jwt claims, and saving or updating ratings with average and user vote calculations.

Develop a reusable rating component using stars, with hover and click interactions, track user votes and average ratings, and integrate with a backend API for submitting votes, addressing authentication issues.

Learn to send a json web token with http requests by configuring an api client interceptor that attaches the authorization header when a token exists, and enforce login before voting.

Implement an is admin policy by requiring the admin claim, apply it to actions, and add endpoints to grant or revoke admin status via a dto.

Create a paginated user index by mapping identity users to a user DTO with email, and expose a http get users list ordered by email with cache.

Build a React front-end component to display a user list and toggle admin status using make admin and remove admin actions, wired to backend edit claim endpoints.

Learn to implement a custom output caching policy in ASP.NET Core that ignores the authorization header (jwt), enabling cache reuse for protected endpoints while still enforcing security.

Authenticate users with a username and password, and authorize actions with claims. Send JSON web tokens via axios interceptors and enforce administrator-only access.

Deploy your web API and React application so end users can access it, placing the software in a location where it can be used.

deploy the web api to Azure and apply entity framework core migrations in production by configuring app settings, creating an Azure sql database, and publishing with swagger.

Deploy a production React app by configuring environment variables, publishing via Vercel and GitHub, then set allowed origins in Azure app service to enable admin access.

Publish the ASP.NET Core app to Azure App Service, create a cloud database with Entity Framework Core migrations, and deploy the React app on Vercel for free.