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

Build a walking skeleton for a .net core and React app by creating a minimal API that retrieves seeded data via entity framework, demonstrates domain-centric architecture, and tests with Postman.

Create a multi-project .NET solution named reactivities with a web api, a controllers folder, and domain, application, and persistence libraries, then wire project references 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.

Install the .NET EF tool and create an initial migration for the persistence and API projects, then apply it to create the SQLite activities table and review migrations history.

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 via an async http get, using dependency injection with a base api controller and proper not-found handling.

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 in the project and prune noise with a gitignore. Commit only your code and push the branch to 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 to allow requests from localhost:3000, enabling any header and method, and observe fetches from the api again after restarting the server.

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.

Master debugging and performance insights by using React Dev Tools in Chrome to inspect components, state hooks, useEffect, and props, 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 explores building a React app with Vite, using TypeScript and Axios, and introducing Material UI, while clarifying desktop-focused styling and the upcoming .NET CRUD architecture.

Explore building a CRUD app with CQRS and the mediator pattern inside clean architecture, moving business logic to the application layer for scalable .NET Core and React applications.

Explore clean architecture, the dependency rule, and layered rings from entities to use cases and API controllers, showing how mediator-driven CRUD flows keep business logic isolated from UI and databases.

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-based get activity details query and handler using app db context, handle missing activity with an exception, and slim down controllers for clean separation.

Slim down api controllers by moving mediator access to a base api controller and exposing a protected mediator for derived controllers like activities.

Implement a mediator create activity command with a handler using the database context, add the activity, save changes asynchronously, and return the server-generated id via a post endpoint.

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.

Inject iMapper and add Automapper to the project, configure a mapping profile to map activity to activity, register automapper in program, and use it to update the activity before saving.

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.

Explore how cancellation tokens propagate from API requests through the mediator to cancel long-running database queries, and see a demo that delays and handles cancellation, though fast queries limit usefulness.

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.

Learn how to structure a React project by grouping by features, establishing app and features folders, consolidating CSS into a single styles.css, and using the public folder for assets.

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 activity cards to display detailed activity information, organize dashboard assets, and build an activity list using Material UI cards and props typing.

Create an activity details view as a dedicated React component, pass the activity as a prop, and render a Material UI card with image, title, date, and description on dashboard.

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, comparing controlled and uncontrolled inputs, using default value, and handling submit with preventDefault, form data extraction, and input names.

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 section five's CRUD operations in a React client-side app, embracing TypeScript, Material UI, and forms, while resolving prop drilling with React Query and MobX toward API integration.

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.

Create a centralized axios instance with interceptors and a global base URL, exposing an agent for API calls, and configure it via a .env.development file 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.

Fix date population and state synchronization by using React Query to drive selected activity from use activities, replacing props with the hook, and manage mutations and validation errors.

Learn to implement a React Query mutation to create an activity using a post request, update the useActivities hook, and reflect the new activity in the list.

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.

Set up a browser router with a root route and child routes in a React app, using outlet and route params to load activity details or create activity.

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.

Configure navigation links with React Router’s nav link, route home and create activity using forward slashes, and style active links via a custom menu item component.

Route to an activity details page using React Router, passing the activity ID to load an individual activity and demonstrate navigation from the activities list to details.

Fetch an individual activity from the API using the route id with React Router, update the useActivity hook, and enable the query only when an id exists, handling loading.

Add a route for editing an activity, load the activity form via the activity id, and navigate to the updated or newly created activity after saving, with loading states managed.

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 in a React app by adding host/going status, placeholders, and a polished layout with Material UI elements like avatar, header, dividers, and a view button.

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.

Build the activity details page with Material UI components and content snippets, including header, info, chat, and the attendees sidebar; populate with activity data and outline host and attendee actions.

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 screen, hide the navigation bar, and include a button that takes users to the activities dashboard.

Learn to format dates in a React app using date-fns, create a reusable util function, and apply consistent formatting across activity cards and details with a responsive layout.

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 for client side state management, MobX React Lite, and React Context; compare with React Query for asynchronous state and implement navbar loading indicators.

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 an alternative MobX approach by wrapping a React component with a higher-order Observer to reduce boilerplate, and use makeAutoObservable to simplify 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 caching and staleness, configure stale time, and use router location and enabled flags to conditionally fetch activities only on the activities route.

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.

Learn centralized error handling and validation across domain entities and api controllers with custom middleware and Axios interceptors, using a result object in a clean architecture to return http errors.

Explore improving API validation with data annotations in a .NET Core and React app, using a create activity DTO, AutoMapper, and clear HTTP 400 validation responses.

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 mediator middleware to auto-validate requests with FluentValidation, injecting IValidator into a ValidationBehaviour that runs validateAsync and throws a validation exception, while registering validators from the assembly.

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.

Enhance the create activity dto validation by chaining validators to enforce required fields, maximum lengths, and future dates, and validate latitude and longitude within geographic ranges.

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.

Use an Axios interceptor to centralize error handling, replacing try-catch with a switch on response status, and display toasts for 400, 401, 404, and 500 errors.

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.

Explore how to differentiate and handle 400 bad request errors, including validation errors versus plain bad requests, by inspecting interceptor responses, mapping data.errors to modelStateErrors, and rendering toast or 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.

Explore error handling, validation, and centralized exception management with custom middleware and axios interceptors, reinforcing a clean architecture where business logic stays separate from presentation.