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. 👉 Check out NextJs Boilerplate Generator: https://bit.ly/4i2FdaX 👉 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
Download
0 formatsNo download links available.