Learn to build an e-commerce store with .Net, React & Redux

Learn to build a rest-based web API with dotnet and C#, connect a React front-end to a SQLite database, and manage the project with the dotnet CLI and GitHub.

Set up the dotnet sdk, verify with dotnet info, create a web api with controllers using dotnet new web api, add to a solution, and run in VS Code.

Enhance VSCode with the C# dev kit and extensions to turn it into a lightweight IDE, using SQLite viewer, NuGet gallery, and a visual Solution Explorer across platforms.

Learn how to set up a .NET 9 web api project, verify the controllers folder, simplify the program class, and remove open api and extra middleware for a clean start.

Create an entity class for a product in a .net e-commerce app with entity framework, featuring id, name, description, price (long), picture URL, type, brand, stock quantity, and required modifier.

Explore entity framework, an object-relational mapper that translates C# code to sql, provides DbContext and DbSets, enables Linq queries with automatic mapping, and supports migrations, change tracking, concurrency, and caching.

Install and configure Microsoft Entity Framework Core with SQLite, create a store context deriving from DbContext, expose a products DbSet, and wire it into startup using a default connection string.

Configure the db context and connection string in appsettings.json, install the dotnet f tool, and create an initial migration to generate a products table in SQLite.

Seed the database with demo products by creating a db initializer that migrates the store context and adds a range of seeded products, then saves changes.

Initialize the database in code before the app starts by using a static initializer to migrate and seed data, creating products on launch.

Build a web api controller to receive http requests, query the database via entity framework using dependency injection, and return product lists or individual products via api/products and id routes.

Learn to test API endpoints using Postman, create collections and variables, and verify responses like 200 and 404 for endpoints such as weather forecast on localhost:5001.

Turn synchronous database queries in the .NET API controller into asynchronous tasks using async, await, and find async to improve scalability and keep web server threads free.

Save your code in source control with git to keep projects portable and recoverable, initialize a repo, configure a dotnet gitignore, and push to GitHub.

Wrap up section two by detailing building a REST API with .NET, using Entity Framework and SQLite to query data via an API controller and return HTTP responses.

Introduce React basics, jsx with components, useState for state, events like onClick and onChange, and the virtual dom, using vite and material ui to build a single page application.

Boot a React client for your e-commerce store using Vite for fast development. Explore using React 19 release candidate with hot module replacement and a development server for rapid iteration.

See how a React single-page app renders in the browser from index.html to main.tsx, and learn how JSX, stateful components, onClick interactions, className, and inline styling shape your UI.

Explore react component basics by building a simple products list in a tsx app, learn jsx and map usage, keys, and the use state hook for dynamic updates.

Use the react useState hook to manage a products list, update it with the spread operator and previous state, and add items via an onClick button, planning a useEffect fetch.

Learn to fetch data from an API in a React component using useEffect, including typing state with TypeScript, handling an empty dependency array, and addressing cors and http/https setup.

Configure cors policies in the api to set the access-control-allow-origin header for requests from the client at https://localhost:3000, and verify via browser dev tools.

Compare TypeScript and JavaScript in a React app, highlighting type safety, early typo detection, and enhanced IntelliSense. See how minimal boilerplate improves reliability for an e-commerce frontend.

Define a product type in a ts file using type or interface, ensure type safety with strict mode, and specify required fields like id, name, description, price, and picture URL.

Learn how to organize a React project by creating an app folder with layouts, models, and global styles, then structure features like catalog, basket, checkout, and orders for maintainable code.

break the app into a catalog component, pass a product list as props, use React fragments and TypeScript types for props, and explore Material UI styling to improve the UI.

Install and configure material UI v6 for the client project, handle react release-candidate compatibility, and style the e-commerce product listings with container, typography, button, and card components.

Add and wire new React components for the catalog, creating a product list and product card, pass product data, style with Material UI cards and flexbox for a responsive catalog.

Learn to use React dev tools to inspect component trees, props and state, switch to the profiler, and troubleshoot user interface issues by comparing browser and console logs during development.

Learn to add a fixed top app bar using Material UI in a React app, build a navbar component, and prepare for a dark/light mode switch.

Learn to implement dark mode in a React and Material UI e-commerce store, using a theme provider and palette mode to switch between light and dark backgrounds.

Use the useState hook to toggle between dark and light modes with a navbar icon button, passing the toggle through props to app.tsx for dynamic theming.

Deliver the challenge solution for the dark mode toggle in a React app using useState and navbar props, then commit changes and push to GitHub with gitignore and npm install.

Wraps up section three by reinforcing React with vite setup and Material UI integration, and discusses TypeScript usage and routing to transform the single page into a multi-page app.

Learn how routing enables component swapping in a single-page app using React Router, the de facto solution for managing routes, with paths, a router provider, and an outlet.

Set up React Router for a single page app, install react-router-dom, configure routes for home, catalog, product details, about, and contact, and use outlet for navigation.

Add navigation links in navbar using routing and React Router, with catalog, about, and contact on the left and login, register, and a cart badge on the right.

Style the nav bar with hover and active states, theme colors, and typography, and use flex to create a three-part layout with left branding, center links, and right actions.

Convert the view button into a React Router link to a dynamic product route, fetch the product by id with useParams and useEffect, render its name, and handle API errors.

Style the product details page with Material UI grid version two to create a left image and right details panel, including typography, price, and a details table.

Create a dynamic product details table by mapping detail objects to rows, styling font sizes, and aligning the button height with the text field, while reviewing routing and dark mode.

Explore why routing matters in a single-page app, set up React Router, and compare data fetching options, highlighting Redux-powered global state management and forthcoming data fetching tools.

Master redux and react redux bindings with redux toolkit and rtk query to manage a single global store with slices, improve data fetching, and leverage devtools for debugging.

Learn how Redux provides a central store for global state across routed components, using selectors and actions to read and update data.

Learn how redux actions update global state and trigger component re-renders using a minimal counter with increment and decrement actions and a reducer switch statement.

Configure redux action creators to dispatch actions with types and payloads, build increment and decrement functions, and reduce boilerplate with redux toolkit for scalable state management.

Explore implementing Redux toolkit by creating a counter slice with createSlice, reducers, and actions, using Immer for safe mutations and configuring the store. Enhance type safety with useAppDispatch and useAppSelector.

Explore redux devtools, a chrome extension, to troubleshoot redux state changes, inspect the initial and updated store states, and track actions with payloads using time travel debugging.

Explore how RTK query from Redux Toolkit reduces boilerplate, adds built-in data fetching and caching, supports optimistic updates, and automatically generates hooks to keep server state in sync with store.

Learn to fetch data from an API using RTK Query in a Redux Toolkit e-commerce app. See how RTK Query reduces boilerplate by eliminating thunks and handling caching and loading.

Implement rtk query part 2 by creating catalog api with fetch products and fetch product details endpoints, generating hooks, and wiring with middleware to enable automatic caching.

Learn to fetch product details with RTK query, refactor to remove useEffect and useState, handle id type safety, and plan to centralize our query logic with a custom based query.

Learn to create a custom base query for RTK Query, simulate latency with a sleep delay, and centralize error handling and loading indicators across API calls.

Create a Redux UI slice to manage a global isLoading flag and dispatch start/stop loading actions during API calls, then show a Material UI linear progress indicator in the navbar.

Practice using Redux to store and dispatch dark mode state, persisting the setting to local storage. Read initial state from local storage and keep the UI in sync after refresh.

Move local state to redux with a ui slice for dark mode, using local storage, a get initial dark mode function, and a toggle via dispatch in UI and navbar.

Explore Redux basics, including Redux toolkit, React Redux bindings, and DevTools, improve data fetching with RTK Query and caching, and evaluate whether Redux is needed versus React context.

Centralize exception handling in a dotnet app by using middleware in the program pipeline. Explore http status codes and implement client side error handling with RTK query and dotnet debugger.

Build a base api controller and a buggy controller with endpoints that return not found, bad request, unauthorized, validation errors, and server errors to centralize client-side error handling.

Implement an exception handling middleware at the top of the ASP.NET Core pipeline to return a JSON error in development and plan to implement a handle exception method.

Implement a .NET exception handling middleware that logs errors via a logger, returns a Problem Details response with 500 status, and uses camelCase JSON in program setup.

Create an error-handling RTK query API in the client to test 400, 401, 404, 500, and validation errors with lazy fetch hooks and integrate it into the store.

Build a testing component on the about page with a button group that triggers 400, 401, 404, 500, and validation errors via lazy hooks, then centralize error handling with toasts.

Learn to implement toasts in a React app for error handling, using a toast provider and container, importing CSS, and displaying RTK query errors for 400 and 401 statuses.

Learn to implement type guards in a TypeScript-based API layer, handling response data of varying shapes (string, errors object, or title) with toasts for errors.

Learn to handle validation errors in RTK query by turning server error messages into a simple array and rendering them in the component with a Mui alert and list.

Learn to implement a server error component for handling 500 errors in a .net, react & redux e-commerce store, redirect with router navigate and display error title and details.

Implement a not found 404 page by creating a NotFound.tsx component, styling with material UI, adding a back-to-shop button, and routing unknown paths to a central not found handler.

master the dotnet debugger in VS Code by configuring launch.json, attaching to a running dotnet process, and stepping through API code with breakpoints for effective debugging.

End of section six centralizes error handling to simplify future feature work, while revealing practical debugging tips with console.log and Redux dev tools, and previewing the upcoming shopping cart feature.

Explore how to add a shopping cart feature, compare local storage, cookies, and database options, and configure Entity Framework relationships to shape basket and product data for the client.

Add a basket feature by implementing basket and basket item entities. Persist the basket id in cookies and relate items to products for a one-to-many structure.

Implement add item and remove item methods in the basket entity, with input validation, existing item handling, and quantity updates, using in-memory EF tracking until a save changes call.

Add baskets as a DbSet in the store context and define one-to-many relations to basket items and products. Create and refine migrations with dotnet f migrations to enforce conventions.

Create a basket controller with get, post, and delete endpoints to manage a shopping basket. Use eager loading to include basket items and products, fetched by a cookie basket id.

Implement add item logic for the cart by retrieving or creating basket from cookies, updating product and quantity, saving changes, and returning a 201 created response with basket location.

Use the debugger to test basket functionality by setting breakpoints, stepping through retrieval and creation, and inspecting cookies and query bindings, revealing a cyclic serialization issue.

Create and use data transfer objects (basket dto and basket item dto) to shape API responses, map basket items, and return a clean, specific basket structure.

Implement extension methods in a static basket extensions class to convert basket entities to DTOs, enabling reusable, cleaner code across get basket and add item to basket methods.

Learn to implement remove basket item in the .NET and React e-commerce app by retrieving the basket, validating it, removing by product id and quantity, and saving changes.

Create a basket model from the api json and set up an rtk query basket api with fetch, add item, and remove item endpoints, wired into the redux store.

Create a basket component in a React/TypeScript app, wire the basket page route and navbar link, and fetch the basket via API. Show loading, handle empty baskets, and enable add-to-cart.

Implement the add basket item flow by wiring the product card button to the add basket item mutation, passing product id and quantity one. Disable the button while loading.

Style the basket page with a two-column grid and a reusable basket item component displaying image, name, price, quantity, and item controls to adjust or remove.

Invalidate the RTK Query cache when updating the basket by using tag types and invalidate tags, ensuring the cart content refreshes from the API.

Learn to update the nav bar's cart item count from the Redux store, count items with reduce (including quantities), and apply optimistic updates for instant feedback.

Learn to remove items from the cart on the basket page using a remove basket item mutation, updating the Redux store and UI with quantity updates and undo on error.

Learn how to implement a TypeScript type guard to support adding either a product or a basket item to the cart, unifying add-to-cart logic across catalog and basket pages.

implement order summary that computes subtotal and delivery fee from basket, with currency format helper, updating as items are added or removed, and free delivery over $100 or $5 otherwise.

Fetches basket with rtK query, computes subtotal from items and quantities, applies a $5 delivery fee under 10,000, updates total, and demonstrates adding items with quantity on product details page.

Implement add, update, and remove item functionality on the product details page, using controlled text fields and basket mutations to reflect changes in the nav bar and order summary.

implement a checkout page guarded by authentication, route it from the basket, and ensure users log in before checkout.

Review the shopping cart feature powered by a database, explore EF conventions versus configuration, and preview DTO shaping ahead of UI elements like pagination, sorting, filtering, and searching.

Learn to implement paging, sorting, filtering, and searching to let users configure how they view the product list in the user interface, using Linq and Entity Framework for query construction.

Add API sorting with price and name options, using deferred execution and a product extension to keep controllers lightweight.

Implement a simple search in the API by adding a public static extension method on IQueryable<Product> that filters by product name using a lowercase contains, with an optional search term.

Implement filtering of products by brands and types via comma separated query strings, and refactor to a single products params object bound from the query.

Implement server-side pagination for product data using Entity Framework with skip and take, and introduce pagination params, pagination metadata, and a paged list to return current page results.

Learn to implement robust api pagination in a .NET app by adding a paged list, a default page size, and a pagination header exposed via cors for client use.

Add an api endpoint in the products controller to fetch distinct brands and types from the products table, exposing filters for the client UI.

Update the catalog component to fetch and display api filters, add a filters.tsx, and switch to a grid layout for product listing to improve alignment and pagination.

Designs a left-hand filters panel with search, sorting options, and brand and type checkboxes using material UI, preparing a query string for the API.

Learn to manage product filters with a Redux catalog slice and product params, then build a clean query string for fetching products from the API by filtering out empty values.

Develop a debounced search in the catalog by extracting a search field component, connecting it to Redux, and debouncing API calls to update products.

Implement a reusable radio button group for order by in the filters, wiring it to the app store via a catalog selector and dispatching set order by to update sorting.

Build a reusable checkbox button component for product filters in a React and Redux app, manage checked state, dispatch updates for brands and types, and show loading while data loads.

Configure client-side pagination by exposing and reading the pagination header from the API. Transform the RTK query response into an object with items and pagination.

Set up a reusable client pagination component with material UI, display current page details, handle page changes via store dispatch, and show no results messaging when filters yield empty results.

Enhance user experience by restoring the top of the page on pagination, bundling catalog and filters data, and adding a reset filters option, while refining the loading behavior.

Implement sorting, filtering, searching, and paginating in the UI, build a deferred Entity Framework query with expression trees that defers execution until it reaches the database.

Set up identity with ASP.NET Identity and Entity Framework, enable login and registration via React forms with React Hook Form, and expose secure endpoints for a single-page app using cookies.

Configure Aspnet identity on the api to secure the web api backend, using identity endpoints and identity EF core with seeded admin and member roles.

Configure identity by adding identity API endpoints and entity framework stores, enforce unique emails and complex passwords, enable authentication and authorization, and seed initial users with roles.

Create a dotnet ef migration to add identity tables for roles and users, apply it, fix a duplicate username by resetting the database, and compare jwt versus http-only cookie authentication.

Create a custom register endpoint in an account controller using a Register DTO with email and password, validating inputs and creating the user via the user manager and sign-in manager.

Learn to extend the identity API with a get user info endpoint and a logout endpoint, returning email and roles, while handling authenticated and anonymous users via http only cookies.

Add and retrieve a user shipping address by creating an address entity aligned with stripe fields, exposing authorized endpoints for saving and fetching a 1-to-1 user address.

Add an accounts API with RTK Query in a React project, using a base query with error handling. Define login, register, user info, and logout endpoints with cookies.

Learn to build a login form for an e-commerce app using React and Redux, with Material UI components, email and password fields, and login routing.

Master form functionality in React with React Hook Form and Zod for client-side validation. Explore controlled and uncontrolled inputs, register and handle submit, and a login schema.

Validate inputs with zod in a react form, wire up the login mutation, show loading indicators, manage cookies, and redirect and update the navbar after login.

Replace the top right navbar with a user menu, offering profile, orders, and logout options, built as a tsx component using material ui icons and the use logout mutation.

Persist the login on the client by querying the user info endpoint after login, invalidate the RTK Query cache, update the navbar, and redirect the user after login.

Build a register component with Zod validation for email and a password policy, implement client-side validation, show toast notifications on success, and redirect to login afterward.

Handle server-side errors in a .NET, React, and Redux e-commerce app by surfacing API errors in the registration form using unwrap and guiding user feedback.

Protect private routes in a React and Redux e-commerce app with a require-auth component that checks the user object and redirects unauthenticated users to login, returning them after login.

Explore setting up ASP.NET identity with Entity Framework, issuing secure cookies for API requests, and validating forms with react-hook-form and Zod; compare client-side and API security, then preview payments.

Explore secure checkout in a .NET, React & Redux ecommerce app, covering PCI DSS compliance, strong customer authentication, stripe integration, payment intents, tokens, and webhook-based payment confirmation.

Learn to set up Stripe for secure payments by creating payment intents in the .NET back end, wiring client checkout with Stripe in test mode using publishable and secret keys.

Create and configure a payments service in .net using stripe to manage payment intents. Update or create intents based on the basket, storing client secret and intent id for checkout.

Create a payments controller endpoint to create or update a payment intent for the current basket, returning the basket dto with client secrets and payment intent id, via stripe.

Debug the payment intent creation by tracing basket updates, fix save changes logic with the Entity Framework change tracker, and validate updates against Stripe's payment intent flow.

Update the checkout component using a material UI grid to create an eight-by-four layout with an order summary and a stepper guiding address, review, and pay.

Create a reusable checkout stepper with Material UI, manage an active step state and next/back handlers, and display address, payment, and review steps in a single component.

Set up stripe on the client using react stripe js, implement stripe elements, including address and payment elements, and configure environment variables for the publishable key and client secret.

Create and update a payment intent on every checkout visit using RTK Query in a checkout API. Refresh the basket cache with the client secret to synchronize stripe data.

Learn to implement Stripe's address element in a checkout component, enabling shipping addresses with a country selector and Google autocomplete.

Add the payment element with Stripe React, enable Google Pay and address autocomplete, test with demo cards, and validate card details automatically to guide checkout.

Develop the checkout review component by displaying billing and delivery information, payment details, and basket items, wired to the Redux store and Stripe integration for a coherent order review.

Fetch a saved address at checkout, format it for the Stripe address element with name and address fields, and apply optimistic updates after updating the address.

Update a user address using stripe elements, a dedicated update address mutation, and a save address option, with validation to enable progression in the checkout flow.

Validate stripe elements to disable progressing until address and payment are complete. Use baskets hook to compute subtotal, delivery, and total for button labels and stripe confirmation token preparation.

Generate a Stripe confirmation token from the payment and shipping address, then pass it to the review component for display and later payment confirmation.

Develop and test the payment flow by confirming payments with stripe, using a confirmation token and client secret, handling errors, and navigating to the checkout success page.

Learn to confirm payments by turning the confirm button into a loading button with Material UI Lab, not using RTK Query, then clear the Redux basket and cookie after payment.

Learn how to test payments in a .NET, React & Redux e-commerce store using Stripe, with test cards, 3D secure authentication, and enablement settings for Google Pay and Apple Pay.

Implement payments with Stripe to handle PCI compliance and strong customer authentication while securing secrets for deployment. Then extend the app by enabling actual order creation.