Master hooks and state with useState to filter products, updating the product grid as you toggle between under $500 and all products on the left.

Learn to filter products with React state by wiring onClick buttons to show under $500 items or all products, using useState and the array filter to update the UI.

Refactor the app by extracting the filters into a separate component, wiring it through props to a unified handle filter function, and resolve prop types for future real API data.

Enhance a product listing by adding category filters using the fake store API. Build a three-component structure (App, products, filters) and fetch categories with useQuery.

Add category, sort, and max price filters to a React app, enabling dynamic product listings with query parameters for sorting. Use previous state to preserve category while applying sort.

Learn to implement client-side routing in a React app using React Router, install the library, and configure routes with a layout, header, footer, and outlet for dynamic content.

Learn to implement dynamic routing for product pages by fetching a single product using its id from a fake store API, with React Router dynamic segments and the useParams hook.

Master state management in react, using the use state hook, for component data, and switch from prop drilling to a centralized context for a shopping cart workflow.

Create a cart context and cart provider to manage shopping cart state in a React app. Wrap routes with the provider, expose items via value, and access them through children.

Build add to cart using a cart provider and useContext API in React 19, storing product details and quantity, and update existing items by increasing quantity.

Improve user feedback by showing a cart-added notification and removing unnecessary spacing. Explore css in js with emotion and styled components to style the alert with a fade-in animation.

Create a shopping cart component using a cart context to manage items, render the cart page, and connect to a separate checkout route with a styled, tailwind-based interface.

Learn to update cart items and quantities by modifying a central cart provider, adding remove and update quantity functions, and reflecting changes in the cart user interface.

Create a React cart summary component with PropTypes for items and cart total, render item title, price, and quantity, and display the cart total in a styled flex layout.