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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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

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.