Build Task ManagerApp Using React, Typescript, Next Js And Tanstack React Table
In this video, we will build a tak manager 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://boltstack.dev 👉 Source Code: https://ko-fi.com/s/5a035b31e9 👉 Live Project: https://task-board-final.vercel.app/ 👉 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 Job Board tutorial: 👉 https://www.youtube.com/watch?v=TMQsFeWi_RM Watch Full Stack Task Management tutorial: 👉 https://www.youtube.com/watch?v=wGDjgpugarc Watch Full Stack AI Content Generator tutorial: 👉 https://www.youtube.com/watch?v=XHcgNi3Wg7g ------------------- Chapters: 00:00:00 Setting up the project 00:06:45 Adding the dark mode 00:14:41 Adding the navbar 00:20:43 Adding the statistics cards 00:27:09 Adding the task area 00:30:34 Adding the priority drop down 00:39:41 Adding the status drop down 00:42:25 Adding the tasks data and the table 00:54:34 Adding the pagination section 00:58:42 Adding the drop down of each task in the table 01:05:34 Creating the dialog to add new tasks 01:14:30 Adding the filter by task title 01:23:07 Adding the priority filter 01:33:51 Adding the status filter 01:41:38 The logic to simulate the fetching of data 01:47:35 Hiding or showing the columns in the table 01:52:18 Setting the task as favorite or not 02:01:22 Copying and delete a task 02:09:53 Adding the feature to update the label 02:14:39 Setting up zod and react hook form in the dialog 02:27:26 The user can add a new task from the dialog #ReactJS #TypeScript #TailwindCSS #CodingTutorial #WebDevelopment #FrontendDevelopment #BackendDevelopment #ResponsiveDesign #WebAppDevelopment #DevCommunity #CodeWithMe #LearnToCode #developerlife
Download
0 formatsNo download links available.