Complete guide to building an app with .Net Core and React

Explore walking skeletons by building a tiny end-to-end api that reads seeded activities from a database using entity framework within a clean domain-centric architecture.

Create a multi-project dotnet solution by initializing a web API with controllers, then add domain, application, and persistence class libraries, wire project references, and configure the solution in VS Code.

Run the api project with dotnet run from the api directory to start the server and access the weather forecast endpoint; adjust ports and enable https via launchSettings.json.

Create a domain entity class named activity in the domain project, with id, title, date, description, category, isCancelled, and location properties mapped to a database table via entity framework.

Define and integrate the AppDbContext class to manage database sessions with Entity Framework Core, configuring SQLite with a default connection string in startup and exposing an Activities DbSet.

Explore creating and applying an Entity Framework migration with dotnet ef, using sqlite and a two-project setup (persistence and api). Apply migrations and seed data.

Seed the database by creating a db initializer, checking for existing activities, and populating with predefined activities from seeddata.txt using AppDbContext, migrations, and save changes asynchronously.

Create an api controller to query the database and return activities with list http get endpoint, using a base api controller, dependency injection of app db context, and async operations.

Test api endpoints with Postman by sending get requests to localhost:5001/api/activities, inspect request and response headers and json payload in the console, and use the pre-created collection to streamline testing.

Initialize a git repository, configure a gitignore to exclude API keys and generated files, commit changes, and publish a public GitHub repository.

Wrap up section 2 by recapping the four .NET projects and the clean architecture dependencies among API, application, domain, and persistence. Preview client-side shift as we prepare a React app.

Explore setting up a React project with Veet, configure TypeScript, fetch API data with Axios, build the walking skeleton to achieve end-to-end functionality and display activity titles in the browser.

Create a fast React project using Vite with hot module replacement, write code in TypeScript, and compile to JavaScript with SWC, then run a development server.

Explore the React project structure, adjust the Vite config for port 3000, upgrade to React 19, manage dependencies with npm, and set up JSX, ESLint, and VS Code snippets.

Learn to fetch data from an API in a React app using useState and useEffect, store activities, and render them as a mapped list with proper keys.

Configure cors in the api by adding the cors service and middleware, allow any header and any method from localhost:3000 (http and https), then restart the api to fetch data.

Discover how to create a TypeScript activity type, generate it from JSON, and use a typed useState to enable better intellisense and error catching in a React app.

Explore using Chrome React developer tools to inspect components, state, and useEffect; learn how to profile performance and prepare for styling with material ui.

Install and configure Material UI in a React app by adding MUI Material, Emotion React, and Emotion Style, then Roboto fonts and Material Icons, and implement Typography and List components.

Enable development https by installing the vite make cert plugin to create a local trusted dev certificate, with a note that you can fallback to http if needed.

Learn to replace the native fetch with Axios for data fetching, using a promise-based http client with automatic JSON handling, interceptors, and TypeScript support.

Review section three by recapping the React project setup with Veet, template contents, TypeScript usage, Axios for API calls, and material UI components, and note that responsive design isn't covered.

Build a CRUD application using clean architecture with cqrs and mediator patterns. Move business logic into the application layer and implement create, read, update, and delete handlers.

Explore clean architecture concepts and the dependency rule, from entities and use cases to interface adapters and api controllers, with mediator and cqrs guiding flow of control.

Explore cqrs concepts by distinguishing commands that modify state from queries that return values, and compare single-database versus two-database architectures, including eventual consistency and denormalization for scalable reads.

Implement a mediator-driven application layer to fetch a list of activities via a get activity list query and handler. Wire the mediator into the API controller to keep controllers thin.

Implement a mediator handler for get activity details using a query with a required id and an app db context, and throw an activity not found exception when missing.

Thin api controllers by moving mediator access to a base api controller, exposing a protected mediator property for derived controllers with null checks and http context retrieval.

Learn to add a mediator-based create activity command in a .NET Core and React app, with a handler, DbContext integration, and a post endpoint returning the server-generated id.

Learn to add a mediator handler for editing an activity, including creating the edit command and handler, validating existence, updating properties (optionally with Automapper), and returning no content.

Add AutoMapper to map from the request activity to the database activity, configure a mapping profile, and inject IMapper into the edit handler to streamline updates and save changes.

Learn to implement a mediator-based delete handler for activities using .NET Core, including creating the command, handler, and API route, with cancellation token considerations.

Understand how cancellation tokens propagate from the browser to the API controller and mediator handlers to abort long database queries when a user cancels a request.

Learn to set up and use the .NET debugger in VSCode, add breakpoints, and attach to a running API to inspect controller data and startup seed code.

Discover how clean architecture maps four project layers, with CQRS and mediator guiding API controllers through handlers that perform CRUD on activities.

Organize a React app, introduce TypeScript types, and implement client-side CRUD operations for activities using Material UI cards, basic forms, and interactive update, create, and delete.

Organize a React project with a feature-driven folder structure, using app and features folders, shared layout in app, and public assets, with styles consolidated into styles.css.

Create a navbar component in a React app, add a navbar.tsx, use Material UI app bar and toolbar, and apply CSS baseline to stretch the bar across the screen.

Style the navbar with a gradient background and a flex layout using Material UI, adding menu items and a prominent action button, and remove unused imports to reduce ESLint warnings.

Create an ActivityDashboard component to display the activities list using grid2 12-column layout, passing activities via props from the app. Destructure props for cleaner code and groundwork for activity cards.

Create reusable activity cards using material ui, define activity props, and build an activity list within a dashboard to display details like title, date, city, and venue.

Create an activity details view by building a details component in activities/details, pass the activity as a prop, and render a Material UI card with image, title, date, and description.

Select an activity from the list by clicking the view button, which updates the selected activity and displays its details via prop drilling with useState and passed handlers.

Add a right-hand activity form component in a React app using Material UI, with fields for title, description, category, date, city, venue, and cancel/submit actions.

Open and close the activity form using useState, lift the edit mode to app.tsx, and pass controls through nav, dashboard, and detail components to enable create and edit workflows.

Explore form basics in React by contrasting controlled and uncontrolled inputs, preventing default on submit, and extracting data with FormData and input names to implement local form handling.

Learn to submit form data locally in React to update the activity list, using map to create or update activities by ID, and toggle edit mode with temporary IDs.

Add delete functionality to the React app by filtering the activities list, pass the delete handler through props, and commit changes locally before syncing with GitHub.

Explore crud operations in a client side app, embrace a clear structure, and adopt TypeScript with Material UI to build forms while reducing prop drilling ahead of React Query.

Explore React Query (Tanstack Query) for data fetching and asynchronous state management, using Axios interceptors and custom hooks to share a cached, synchronized client–server state across components.

Learn to fetch and sync client data with the server using React Query, including installing the library, creating a query client, and using useQuery with caching, de-duplication, and background updates.

Install and use React Query DevTools to monitor queries, data, loading, and pending states, then set a 100vh minimum height and prepare a custom hook for activities.

Create a custom hook useActivities that encapsulates React Query logic with useQuery. Return activities and isPending for use in app.tsx to centralize data handling.

Centralize Axios usage by creating a reusable Axios instance with interceptors and a configurable base URL, using environment configuration to avoid hard-coded URLs.

Update an activity on the client and persist changes to api using React Query's useMutation and an agent.put call to /activities. On success, invalidate the activities query to refresh state.

Derive the selected activity from React Query state instead of props, and implement a fix to sync details. Tackle mutation errors and ISO date formatting for the date picker.

Learn to delete an activity using a React Query mutation, update the UI by invalidating the activities query, and persist changes across the app with a focused delete flow.

Configure React Query with a custom hook, use Axios interceptors for loading states, and connect API requests to support asynchronous state across the app, setting up routing next.

Learn how to add routing to a single-page React app by installing react-router, creating a router with browser router and routes.tsx, using outlet, and wiring a router provider in main.tsx.

Learn to add routes and create home and activity components, refactor app.tsx for routing, remove prop drilling, and use outlets to replace the root content with route-driven views.

Learn to implement navigation links with React Router NavLink, routing to home, activities, and create activity, using a custom MenuItemLink with active styling and cache-aware routing via react query.

Route to an individual activity details page by adding a parameterized route, updating the detail component, and wiring activity cards to navigate via links or the navigate hook.

Fetch an individual activity from the api by extracting the id from the route and using a use activity hook with react query, enabling fetch only when id exists.

Add a route named manage for editing an activity and redirect to the activity form. Pass the id with params and navigate to the activity detail after update or create.

Learn how to use route keys in React to force component remounts when switching between create and edit forms, ensuring the form resets and headers reflect the current mode.

Explore why a router is essential in a React app and why this course uses React Router as the routing solution, with upcoming styling focus.

Improve the user interface by laying out the main components and styling with Material UI, preparing a home page, activity cards with avatars, filters, calendar, and activity details with overlays.

Style the activity card with placeholders, host and going status, and conditional chips, using Material UI components like avatar, card header, and dividers; prepare for an activity details page.

Breaks the activity details page into components, including header with image, information on date, time, and venue, chats, and attendees sidebar, using grid2 layout from material ui.

Populate the activity details page using Material UI snippets, focusing on header, info, chat, and sidebar with placeholders, and implement host versus attendee actions while planning Leaflets for maps.

Create and style a right-side filters component that lets users filter activities by attending, hosting, or date, using react calendar, material UI components, and custom CSS.

Style the homepage to fill the viewport, hide the navbar, and link a large button to the activities dashboard. Implement a centered flex layout with gradient background and clear typography.

Use date-fns to format dates in your dotnet core and React app, and implement a reusable formatDates util to standardize date displays across the activity card and details header.

Conclude section 8 of the .NET Core and React guide by refining the UI with Material UI and styled components, and introduce MobX for client-side state.

Explore MobX and client side state management, use React Query for state, and connect stores to components with MobX React Lite and React context, featuring a counter and calculated properties.

Explore mobx as a state manager using observables, actions, computed properties, and reactions. Build a store with make observable or make auto observable, and connect via React context and observer.

Set up MobX in a React app by creating a global store with makeObservable, wiring it to a React context, and observing state changes with mobx-react-lite in a counter store.

Wire a counter store into a React component, observe its title and count with MobX Observer, and prepare actions to update the observable values.

Explore MobX actions in a counter store by defining arrow-function actions to safely bind this, incrementing and decrementing counts, and observing updates in a React component.

Explore higher order component approach with mobx to reduce boilerplate, rename components for clean hot reload, and use make auto observable with computed properties for efficient stores.

Derive state with MobX computed properties from the store, updating eventCount as the events array changes. Build a counter component that logs events and updates on increment or decrement.

Create a UIStore to track an isLoading flag with isBusy and isIdle, updated via a request interceptor, and display a loading indicator under the nav bar with MobX React Lite.

Explore how React Query handles loading, cache, and stale data, and control freshness with a configurable stale time and route-aware enabled queries. Learn to prevent unnecessary loads and commit changes.

Explore client-side state with MobX and MobX React Light, using React context to access the store and observe observables for loading indicators, and compare with Redux and React Query.

Implement robust error handling and validation across client and server by centralizing exceptions with custom middleware and axios interceptors, while applying clean architecture and result objects for http responses.

Explore validating inputs in a .NET Core API using data annotations on a create activity dto to yield clear http 400 errors, with AutoMapper mapping and step toward FluentValidation.

Apply fluent validation in the application layer by creating CreateActivityValidator for the CreateActivity command, ensuring title and description are not empty. Integrate via dependency injection to enable validator-based checks.

Implement fluent validation as a mediator middleware to auto-apply validators and throw validation exceptions, removing per-handler checks and paving the way for centralized exception handling.

Implement a custom exception handling middleware in the mediator pipeline to convert FluentValidation validation exceptions into a 400 bad request with detailed errors.

Learn how to replace silent exception handling with an application layer results object that uses isSuccess, value, error, and code to drive proper HTTP responses.

Refactor GetActivityDetails to return a result object with success and failure states, centralize error handling in a base API controller using a handle results method, and standardize 404 responses.

Refine delete and edit activity handlers to return a result object, determine success via save changes, and wire the controller to use handle results for consistent error handling.

Implement a custom AppException and exception middleware to return camelCase JSON, log errors with ILogger, and show stack traces only in development.

Explore building robust create activity validation rules in a .NET Core and React app, including max title length 100, required description, future dates, and latitude/longitude ranges with not empty checks.

Explore validation architecture in the .NET Core and React course, using a base activity DTO and a generic base validator to support create and edit flows with fluent validation.

Set up client-side error handling with a test-errors component and a buggy API controller, integrate React Query and toast notifications, and plan an Axios interceptor for errors.

Implement an Axios interceptor to handle client-side errors, log Axios issues, and show toasts for HTTP statuses like 400, 401, 404, and 500.

Create a not found component and wire up a 404 redirect in the client, using React Router navigation, a not found page, and a return to the activities page.

Distinguish and handle 400 errors by inspecting responses for validation errors, extracting data.errors, and surfacing model state errors in the client UI with toasts and alerts.

Handle server errors by redirecting to a dedicated server error page, display error details in development, and centralize error handling across the api and client side.

Master error handling and API validation within a clean architecture, note deferred client-side validation for future forms, and use centralized middleware plus Axios interceptors for HTTP errors.