Build an app with React, .Net Core, GraphQL and HotChocolate

Create customer, address, and order entities in the core project, illustrating a 1-to-1 customer-address and a 1-to-many customer-orders relationship with entity framework; define status enum with pending, draft, completed, shipped.

Set up entity framework core in the infrastructure project, create an order context with customers, orders, and addresses, and configure an in-memory database with seed data for sqlite or sql.

Learn to integrate GraphQL into a .NET backend using Hot Chocolate, define queries for customers and orders, and wire up server with filtering and Banana Cake Pop for exploration.

set up Voyager and CORS for the GraphQL API, use ef core includes to fetch orders, addresses, and customers, and test queries via the GraphQL interface while enabling frontend access.

Create two interfaces for customer and order services in .NET, implement them in infrastructure using a db context factory, and wire them into the API to query customers and orders.

Set up the frontend with a React and TypeScript project using yarn and Create React App, then configure Apollo Client and GraphQL Code Generator to connect to the backend.

connect the front end to the back end schema by initializing GraphQL codegen, configuring a codegen file, and generating TypeScript types for React Apollo operations.

Clean up and organize the React app, then connect the frontend to the GraphQL backend with Apollo Client to fetch customers.

Structure the front end with a Material UI navbar and a routing layout using React Router, while configuring environment variables and building home and customers pages.

Builds a reusable customers grid in React using AG Grid, powered by a GraphQL generated customer model, defining column definitions, rendering address, and enabling sorting and filtering.

Learn to build an orders page by wiring a GraphQL get orders query, generating the schema, and creating an order list and dashboard in the React front end.

Learn to build reusable components, including form elements like text fields, text areas, buttons, and combo boxes, and a shared ag grid with the same styling for customers and orders.

Create reusable loading and error components in Visual Studio, using a circular progress from Material UI inside a box, and display alerts for load errors on dashboards.

Create reusable form components, starting with a text field using the use field hook to bind values and meta, styled with material UI, full width, outline, and error handling.

Create a reusable submit button component in a React app, leveraging formik's form context to submit forms with configurable color, variant, and full width.

Build a reusable checkbox component by wiring name, label, and legend props with the form context, handling changes to update the field value via material UI form controls.

Build a reusable select field by wiring props, options, and form field handlers, map option keys into a menu, and enforce string-based values with a configurable select setup.

Build a reusable date picker component in tsx using the use field method, configure a date time picker without time, and embed it in a reusable form UI.

Learn to build GraphQL queries that fetch a customer or an order by id, and integrate get customer by id and get order by id into the pages.

Create a customer form in a React app with a defined interface and Yup validation for required fields, then layout with Material-UI grid and handle add or update actions.

Create a dynamic customer page by fetching a customer by ID and populating a country select from a JSON file, with route /customers/:customerID.

Create the order form by adapting the customer form pattern, set up initial state and props, implement validation with yup, and format the order date with a global date formatter.

Create an order page that fetches order details by ID via GraphQL and React Router params, then display order and customer details with a reusable header.

Push the latest changes, tidy the navigation bar, and unify the order management ui in a single box. Bind order status to a statuses.json file and prepare for CRUD operations.

learn to create a sqlite database with Entity Framework Core using code-first migrations, configure connection strings, run migrations, and validate tables and seed data for a starter backend.

learn to implement add or update customer mutations in a GraphQL API, wiring async methods, a customer model, and a DbContext, then extend to delete customers and orders.

Create an async add or update order mutation using the order model and IOrderService, validate the customer, and save changes asynchronously.

Implement update customer and add or update order mutations in GraphQL, then connect the customer and order forms to these mutations with loading and error handling.

Update order in the order form shows wiring add or update order mutation, form values, and navigation to the orders page, with loading and error handling.

Create a new customer page by wiring a blank customer object to the customer form, set up a material grid and header, and configure routes.

Create a new order page by reusing the new customer page, capture the customer id with use params, and pass an order object to the form.

Create delete mutations in the backend to softly delete customers and their orders by marking them as deleted instead of removing the records. Implement asynchronous delete methods, validate IDs and throw an exception when not found, mark isDeleted on the customer and related orders, and persist changes.

Learn to implement front-end GraphQL mutations for deleting a customer and an order. Build a material UI confirmation dialog to execute deletions safely with loading and error handling.

Finish up delete operations by implementing the delete order mutation and confirmation dialogue, wiring the UI to delete orders and refresh the orders list via the GraphQL backend.

Finish the home page by implementing a stats grid that shows total customers and order counts (pending, draft, completed, shipped) using GraphQL with .NET Core and a React front end.

Publish the app by merging the front end into the back end so it runs as a single application, then explore dockerization and secure deployment with environment variables.

Learn to dockerize a .net seven back end by creating a docker file, configuring docker ignore, building and publishing a production image, and running the container with correct port mappings.

Learn to swap sqlite for a PostgreSQL database using a dockerized setup with EF Core migrations. Update the connection string, recreate migrations, and verify database access and data flow.

Manage your user secrets with dotnet core user secrets for local connections and use environment variables during deployment to keep sensitive data out of repositories.