Build a Product Inventory App using React Table, React, Typescript, and Shadcn UI

In this video, we will build an inventory App using react table from tanstack, react, typescript and shadcn UI for components. Plus we will learn how to use Zustand for state management, and tailwind css to style our app.

👉 Source Code: https://ko-fi.com/s/6d9ceb8ea4
👉 Source code of all my projects: https://ko-fi.com/devscript/shopLive
👉 Save your code snippets for FREE: https://www.snippetsaver.com/

——————-

Watch Full Stack AI Content Generator tutorial:
👉 https://www.youtube.com/watch?v=XHcgNi3Wg7g&t=216s

Watch Full Stack Task Management tutorial:
👉 https://www.youtube.com/watch?v=wGDjgpugarc

——————-

Chapters:
00:00:00 Project demo
00:08:17 Setting up the project and installing the poppins font
00:14:15 Adding the header and the dark mode theme
00:23:54 Adding the header of the table
00:29:01 Adding the search in input and UI elements for filtered items
00:32:48 Adding the status dropdown
00:39:33 Adding the category dropdown
00:42:33 Adding the product table using TanStack library
00:54:20 Adding the action dropdown for each product
00:57:48 Adding the pagination at the bottom of the table
01:04:58 Adding the sorting to the name column
01:10:07 Adding the sorting to the rest of the columns
01:12:24 Adding the search filter
01:14:46 Adding the logic to filter by status
01:21:52 Adding the categories filter
01:29:58 Adding the dialog to add a new product
01:41:19 Adding the validation and the schema to the form
01:55:15 Setting up Zustand for state management
02:02:31 Adding the function to add a new product
02:09:40 Adding the function to delete a product
02:18:32 Adding the function to update a product
02:26:21 Adding the function to copy a product

#ReactJS #TypeScript #TailwindCSS #CodingTutorial #WebDevelopment #FrontendDevelopment #BackendDevelopment #ResponsiveDesign #WebAppDevelopment #DevCommunity #CodeWithMe #LearnToCode #developerlife