React TypeScript - Build eCommerce Project (Redux, TanStack)

Explore the basics of TypeScript using a browser playground, create a hello world variable, and see how the script compiles to JavaScript and runs via console.log.

Explore primitive data types in TypeScript, showing string and number assignments, const behavior, and how type safety prevents runtime bugs by enforcing type compatibility.

Explore TypeScript primitive types, including boolean, and see how variables hold string, number, or boolean values. Learn why avoiding the any type matters when default values are omitted.

Define a variable that can hold a string or a number using TypeScript union types, and demonstrate safe assignments where only string or number are allowed.

Learn how to work with arrays in batch script using numbers and strings, including array typing, resizing, and type constraints, with examples of syntax and error messages.

Learn how TypeScript arrays enforce a single data type and how to combine number and string elements using tuple syntax, wrapping them in brackets.

Learn how to use the TypeScript object type to enforce a fixed data structure with id: number, name: string, and a boolean field for reliable typing and autocomplete.

Learn how to declare TypeScript functions with the function keyword, type parameters (numbers or strings), and return values (number, string, or void) through practical examples.

Explore function with object parameters in TypeScript by creating two user objects, defining types and default values, and returning a computed age using an arrow function.

Define a custom datatype in TypeScript to improve code readability. Create a user type with id and name and reuse it across parameters.

Learn how to define and use custom types and union types to allow only user, admin, or moderator values, and reduce code complexity with a unified row type.

Explore using interfaces as an alternative to custom types in TypeScript, including interface syntax, I-prefixed names, and optional properties like id as number and isWireless with a question mark.

Explore TypeScript generics in React with a focus on an identity function, using union types, and generic syntax to type numbers, strings, booleans, and objects without any.

Set up a React and TypeScript project using npm, rename the project, and install dependencies to get familiar with React TypeScript workflows and templates.

Open Visual Studio Code, run npm run dev to launch the React TypeScript project, and view it at localhost while inspecting tsconfig.json and the src folder.

Learn to create a component in a React TypeScript project using function component, arrow function, and normal function, and explore return types and the documentation reference.

Explore the useState hook in React with TypeScript, creating typed states (string, number, boolean) using generics, rendering values, and handling type errors with an onClick example.

Explore the useState hook with undefined values in React TypeScript. See how initial values affect state, why undefined isn’t assignable to string, and how defaults help manage multiple state values.

Demonstrate using the useState hook with reference types such as arrays and objects, manage dynamic number and string arrays, observe state changes, and stringify data to json while defining interfaces.

Learn how to pass props into a child component in a React TypeScript eCommerce project, including an observable data object with a user array and interface typing.

Learn to work with form elements in a React TypeScript app by building a user form, wiring inputs, handling submit with preventDefault, and adding users with auto-incremented ids.

Learn how to create a React TypeScript project with Vite from scratch, install dependencies, run the dev server, and understand building TypeScript into JavaScript for the browser.

Set up a scalable folder structure for a React TypeScript ecommerce project, organizing features, components, props, Redux, APIs, and utils for product and shared use.

Set up React Router Dom in a React app, add header and footer components, and define routes for home and products while reading the official docs.

Set up a nested route in a React app using React Router DOM, creating a user route with an outlet to render child routes like product and profile.

Set up Material UI in the React app, install and import the button from Material UI, and explore variants, color props, and icons to enhance the eCommerce UI.

Set up absolute import aliases by configuring the resolver and path mappings, enabling imports like model and component/test from the model with clear aliases.

Set up the backend for the react project by installing MySQL, creating a schema with MySQL workbench, applying Prisma migrate deploy, and starting the dev server with npm run dev.

Set up the api layer for the project with an axios-based client, configure localhost:5000 as the base URL, and implement a product api that uses get to fetch data.

Build a sign up component for a React TypeScript eCommerce project by adapting a free UI template and wiring a signup route, while removing unused icons and login options.

Learn to implement yup schema validation with react-hook-form by wiring a resolver and defining required string fields (first name, last name, email, password), with auto generated error messages.

Learn to build custom task notifications in React TypeScript by hand, using Material UI snackbar and alerts with customizable origin, duration, and severity for a polished ecommerce UI.

Learn to set up toastify and show snack bar messages in a React TypeScript eCommerce project, using the toast's open state and parent-to-child props.

Set up redux toolkit with react-redux in a TypeScript project to manage toastify messages, including open message actions, severity, and a toast provider integration across the app.

Move toast component in a React TypeScript eCommerce project and check its submit flow, verifying the service and provider setup and adjusting batch handling for reliable promises.

Showcases signup API handling in a React TypeScript ecommerce project, including backend startup, Postman testing, and registering users (email, name, password, avatar) to obtain an access token.

Learn how to integrate tanstack react query. Install v5 and wrap the app with a query client provider; install neptune to monitor status and boost performance.

learn to mutate the sign up api using react query mutations, wiring a mutation function, calling mutate with user data, and handling on success and on error with console logs.

Set up Redux to manage user state after signup, fetch account data via gateway, store first name, last name, and email, and redirect to product to greet user by name.

Learn how to fetch the current user handle on refresh with a gateway endpoint, useQuery, and populate Redux state so the user data appears in the app.

Create a custom hook for react query to manage sign up mutation and data fetching, using redux integration and error handling with an interceptor.

Update the React form submit handler, study the real form documentation, and implement a user login mutation via a hook in this React TypeScript eCommerce project.

Implement sign-in functionality by building a login form, wiring submit to a login mutation with email and password, applying schema validation, and updating redux state while navigating on success.

Learn to protect routes by redirecting unauthenticated users to sign in using React Router DOM's navigate, Redux user state, and conditional data checks to ensure smooth profile and product access.

Extract authentication logic into a reusable custom hook for use across routes, returning loading and error states and guarding protected pages with redirects when unauthenticated.

Create an admin dashboard component and implement role-based routing that redirects users to the root or admin area. Set up admin accounts and route matching to control access and navigation.

Build header using the Material UI app bar, wire a responsive menu, and implement logout via a mutation that calls the API, removes the access token, and navigates to login.

Build the admin interface for a React TypeScript ecommerce project with a header, a persistent Material UI app bar, and a sidebar drawer integrated with the admin root and outlet.

Enhance the sidebar by creating a name and icon list and mapping items. Update the header to admin and prepare for adding more items and icons.

Build a category admin list in a React TypeScript eCommerce project, create the categories folder, and implement a persistent table to fix outside-click issues.

Learn to implement an add category modal in a React TypeScript eCommerce project, wiring a category button to open a Material UI modal and navigate to admin product routes.

Create and render an art category list using useQuery, fetch categories from an API, and display them with Material UI components in an admin interface.

Build the art category feature by implementing a category mutation and category API, handling form submission and validation for name and icon.

Learn to display Material UI icons in a select form control by mapping category icons to menu items, using form state and a default value to avoid uncontrolled component warnings.

Learn to fix a TypeScript error by adding a category icon, and revalidate category data after mutation using query invalidation to refresh the list in a React TypeScript ecommerce project.

Demonstrate a delete category modal in a React TypeScript e-commerce admin, wiring the category list to a confirm modal by passing the selected category and handling deletion.

Learn to delete a category with useMutation by calling the category API delete with an id, log success or error, and invalidate the category list to refresh data.

Shows how to update a category by using an update button, opening a category modal, and populating the form with the selected category and icon.

Learn how to implement an update mutation in a React TypeScript app, update category data via an API by id, and manage UI state for category editing and modal handling.

Add a category with an icon, update the icon, and reset the form, then discuss avoiding Redux to focus on learning concepts over tools.

Build and manage a product in the admin area, duplicating a main series and setting product status. Prepare admin components and a product list with badges; table integration follows.

Set up a UI Slab data grid inside a React component, install the datagrid via npm, and use the free plan to enable filtering and search in an admin list.

Learn to customize a data grid column for rendering products by wiring form data, images, and category IDs to the product API and display products as rows.

Create a product modal in a React TypeScript eCommerce project, implementing a product model with name, long and short descriptions, category, and image using form controls and select options.

Enhance the two-column React UI with flexbox by adding a preview image feature that handles file input, creates an object URL, and renders the selected image.

Fix the select to show category options by wiring category hook, mapping menu items with id as key and name as label, and setting a default value for React form.

Learn how to display product images in a data grid while adding products, resetting the form on submission, closing the modal after a successful mutation, and rerendering the updated list.

Learn how to replace the category id with the category name in a React TypeScript eCommerce project, using render cell editor, category filtering, and header name updates.

Add an actions column to the product list admin with delete and update icon buttons. Wire up the icons and log the id on delete, then adjust the column width.

Reuse a single delete modal component across categories, products, and images by passing dynamic item data and a get item name function, while wiring a delete mutation and confirm flow.

Learn to implement an edit flow for products by binding data to a modal, lifting state, and wiring update handlers in a React TypeScript eCommerce app.

Update product handles image upload, preview, and form data submission to trigger the update mutation via the product API in a React TypeScript ecommerce project using Redux and TanStack.

Explore testing the bayesian action, using the fork filter extension for product data, and visualizing client-side pagination in a data grid with dollar price rendering.

Explore adding a gallery interaction to a product image by wiring a gallery icon to navigate from the product list to the current product page using React and DOM.

Explore server-side pagination setup in a React TypeScript eCommerce project, wiring product visualization, batch size and total count calculations, and API-driven pagination to render paged results.

Sync the patch from here into the URL using hash or query parameters. Use the short param hook to set and read URL parameters, and ensure state persists on refresh.

Develop a price filter by configuring a price slider, set max to $5,000, sync input with state, and trigger a rerender of the product filter.

Demonstrates syncing a price filter with the URL by lifting state and using search parameters to filter by greater than, greater than or equal, and less than or equal.

Learn to synchronize product filters with the URL in a React TypeScript eCommerce project, updating current criteria and filter values through the router and URL parameters.

Create a product detail page for the ecommerce app, with a left image carousel and right detail panel displaying price, typography, and related controls like quantity input and add-to-cart.

Build a product image gallery with a carousel in a React TypeScript e-commerce project, wiring detail navigation and a slider fed by API data.

Separate the UI into multiple components, including a carousel and a product info component, write functional components, and connect them to data from a model dot net integration.

Implement a name-based search in a React TypeScript e-commerce app, querying the API with a case-insensitive name filter to refine the product list via a text field.

Implement the add to cart data flow by wiring product id, quantity controls, and a parent-to-child handle add to cart function via props.

Implement add to cart with API calls and Redux dispatch to update the cart, handling success and errors. Show product name, image, and quantity with a computed total price.

Set up the cart page in a React TypeScript eCommerce app, adjust header cart icons, and create a cart form plus a cache module to manage items.

Build a cart component and a cart table in a React TypeScript eCommerce project, compute the total price, and use a Material UI table for checkout.

Render cart items in a React TypeScript ecommerce project, displaying product image, name, quantity, and price in a cart table, with API data handling and item actions.

Learn to implement a clear cart item function by removing an item using its id, updating the cart list, and validating the change with a mutation.