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 named activity with public properties for id, title, date, description, category, and location; map it to a database with Entity Framework and enable nullable reference types.

Introduce the app DbContext to connect to the database with Entity Framework Core and SQLite, define the Activities DbSet, and configure the API startup to use a SQLite connection.

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 data into a .NET Core app by creating a db initializer, using a static async seed method, applying migrations, and populating activities via the app db context.

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 and reviewing the json response and headers. Import the prebuilt collection and configure the url variable.

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

Summarizes section two, detailing four dotnet projects, clean architecture layers, and the api-application-domain-persistence dependencies, plus entity framework seeding, migrations, and postman testing.

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.

Review the react project files, configure vite to run on port 3000, upgrade to react 19, install dependencies, and inspect index.html, main.tsx, and app.tsx with eslint and vscode snippets.

Learn to fetch data from a local API, store it with React useState and useEffect, render it with map in a React component, and address CORS headers for successful display.

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 the React app, using Typography, List, and ListItemText to mirror Material Design 2, with Roboto fonts and icons, and align versions (6.3) for consistency.

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.

Master CQRS concepts by separating commands that modify state from queries that return values, and explore eventual consistency, denormalization, and how read databases like NoSQL support scalable reads.

Implement a mediator pattern in the application layer to fetch a list of activities via a GetActivityList query and its handler.

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.

Refactor the app by moving the activities list into an activity dashboard component and display items as activity cards in a grid two, with props and destructuring for cleaner code.

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 via the view button to update the activity details, using prop drilling and a selected activity state before moving to global state management.

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.

Learn to manage form visibility with the useState hook in TypeScript, propagate edit mode through components, and control opening and closing of an activity form from the nav and dashboard.

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.

Implement local delete for activities in a React CRUD app using id-based filtering and state update, with delete handlers passed through components via prop drilling.

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.

Configure react query (stack query) for data fetching, caching, and server synchronization, using useQuery and useMutation with axios interceptors to keep client and API state in sync.

Learn to fetch and keep your client in sync with the server using react query, gaining caching, de-duplication, and background updates. Install and configure a query client, replace local state with useQuery for activities, and observe deduplicated requests in the API.

Install and integrate React Query Devtools, render a floating panel to monitor queries, view activities data and loading states, and plan a custom hook for activities.

Learn to extract data fetching logic into a custom hook called use activities, moving use query from app.tsx to the hook, and return activities and isPending for cleaner components.

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.

Delete an activity using React Query by updating the use activities hook, passing the activity id as a route parameter, and invalidating the query to refresh the list.

Configure React Query, create a reusable hook for activities, fetch from the API, manage loading state with axios interceptors, and prepare for routing in the next section.

Set up routing for a single-page app with React Router by installing the package, creating routes, and wrapping the app in a router provider to enable navigation.

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.

We conclude section seven by selecting React Router as the routing solution for our React app, using it as originally designed. Next, we focus on styling the application.

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.

Refactor the activity details page into modular components (header, info, chats, and sidebar) and set up a Material UI grid to show header, date, venue, map, comments, and attendees.

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 a right-side filters component for activities, enabling views by attending, hosting, and a date calendar to filter start dates, styled with Material UI and a React Calendar.

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.

Concludes section eight with styling improvements using Material UI components to enhance UI, explains avoiding manual detail pages for time efficiency, and previews client state with MobX and React Query.

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.

Create a counter feature with a counter.tsx component, wire its route and navbar link, and display the counter title and count using useStore and the observer from MobX.

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.

Learn to create MobX computed properties by deriving state from existing store data, with get-based access, updating as base state changes, and displaying an event log alongside a counter.

Develop a global loading state by creating a UI store with an isLoading flag and isBusy/isIdle methods, wired to request interceptors and a top linear progress bar.

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.

Learn to implement fluent validation in the application layer, create a create activity validator, and wire it via dependency injection to replace data annotations with mediator middleware that validates objects.

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 .NET Core to capture FluentValidation errors and return a structured 400 bad request with validation problem details in JSON.

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.

Return a result object for API responses instead of exceptions, use success and 404 paths for activity details, and centralize handling with a generic base API controller.

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.

Create and handle exceptions with a custom app exception, implement an exception middleware to return JSON errors, log via logger, and differentiate development versus production to reveal stack traces.

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.

Reexamine editing validation by introducing a base activity DTO and base validator, apply fluent validation with a selector, share rules, and implement edit DTO mapping and tests.

Set up client-side error handling by creating a buggy API controller for HTTP error responses and a test component with React Query mutations and a toast system.

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.