Back to Browse

Build a Patient Manager React App Using Typescript, Tanstack Table, Next Js

3.6K views
Jan 16, 2025
1:59:11

In this video, we will build a patient 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. 👉 Source Code: https://ko-fi.com/s/3fa147d0ce 👉 Live Project: https://med-manager-alpha.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 Demo of the project 00:12:37 Adding the dark mode theme 00:15:29 Adding the navbar 00:23:07 Setting up the project and adding the poppins font 00:26:00 Adding the statistics cards 00:30:36 Adding the data and defining how to use it 00:38:58 Adding the view toggle and genders drop down 00:54:54 Adding the diagnoses drop down 01:00:29 Showing the filtered items 01:07:27 Adding the logic to switch between the table, and the cards 01:10:00 Adding the patient table 01:21:58 Adding the patient cards 01:28:32 Adding the pagination to the table 01:35:20 Adding the sorting function 01:47:39 Adding the search filter #ReactJS #TypeScript #TailwindCSS #CodingTutorial #WebDevelopment #FrontendDevelopment #BackendDevelopment #ResponsiveDesign #WebAppDevelopment #DevCommunity #CodeWithMe #LearnToCode #developerlife

Download

0 formats

No download links available.

Build a Patient Manager React App Using Typescript, Tanstack Table, Next Js | NatokHD