The Perfect Advanced React/TypeScript Project - Markdown Supported Note Taking With Categories

Coupon Code: WEBDEVSIMPLIFIED (This should be automatically filled in as you go through the signup process)

Todo lists are boring and pretty limited so in this video I am going to show you how to build a more advanced project that covers all the features of a todo list while also adding tons of additional features like categories, markdown support, filter, etc. This is a great intermediate to advanced project.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00:00 - Introduction
00:00:30 - Demo
00:01:10 - Setup
00:02:20 - Routing
00:05:38 - New Note Form JSX
00:13:18 - New Note Form Functionality
00:19:19 - useLocalStorageHook
00:24:40 - Note Creation Logic
00:28:53 - Tag Creation Logic
00:33:37 - Note List Page
00:50:20 - Note Layout Wrapper
00:53:45 - Note Show Page
00:58:10 - Note Edit Page
01:02:42 - Delete Note Logic
01:04:35 - Edit/Delete Tags Modal

#React #WDS #TypeScript

[jeremydiaz]

Seriously amazing stuff. I've been studying by Kyle's content for over 3 years now. Just so grateful he makes content.

[piotrekjazz]

I watched that through and I am completly lost due to lack of explenation what data will be used further down the line (eg object structures of localStorage, tabs notes etc), this is a common tutorials' problem, but I got a better understanding how the types work. Thanks

[TheJonChristie]

excellent video! No errors after doing EXACTLY as you instructed and the result is a SOLID TS project. Thanks !!!!

[ayoubdouch]

Kyle is back from the dead and this project is slapping .
I will do it, thank you!!!

[ederolima]

24:50 you can use "as const" to indicate that the array is actually a tuple for the compiler

[victorleyvaramirez]

Ty man, the exact needed proyect for improving my skills, i was trapped in jsx and with this its a lot of help to get my feet into Typescript, Kudos!

[hunglam]

I'm just at the beginning of the course and looking forward to finishing it. Left a like on the video anyway cos i know it will be good!

[MikeIsTechBoi]

This was great for practicing my MERN Stack skills, I add a custom backed to this project using NestJS, Mongo, and Prisma + User accounts. Glad to see more opportunities to practice my Frontend + Backed skills. Thanks!!!

Edit: I just replaced Bootstrap with Tailwind in my project cuz I can't stand Bootsrap lol.

[Vthoen]

Nice tutorial, as a beginner (needed to change the speed to 0.75 but) good to follow!

[Lion-mhrq]

Really like your video, please make more tutorial about typescript, and may be full stack react-project with docker/docker compose

[GilAguilar]

Thanks for the great content. I haven't worked much with TypeScript but can see the benefits of using it. This was an amazing tutorial!!!

[DarrylHebbes]

Oh man so excited that you made this, many thanks!

[Thassalocracy]

Thank you for showing us how to do this typescript project, I really learnt a lot especially about that custom hook which I'm quite sure is actually used a lot in many projects.

I also like to highlight that the people behind react router are the same ones developing the Remix fullstack framework and both use the same names for variables and functions eg. Outlet, Link, useLoaderData, useParams, useActionData etc. I was hoping that if you're a keen user of react router you could show us how to implement a fullstack app with Remix too. 😊

[NotesNNotes]

just completed - as a novice to TS with a minimal understanding of React, it took me about 4 hours

something broke towards the end and I had to spend a fair amount of time digging through the code (it was the use of a colon instead of =, lol)
I'm excited to make some tweaks + stylize / modularize as needed!

thanks, Kyle, for another super useful and concise tutorial :)

[timothypark]

Thank you so much for this wonderful tutorial! Many thanks from South Korea :D😀

[serviobarbosa]

Hi, just finished this project with your help, thanks. Amazing video as aways.
One small adjustment I would make is when we delete a note, also delete the tags associated with this note (in the case when they are not associated with a diferent note)

[SalmanKhan-lxkp]

You are simply the best. Great work kyle, Keep it coming. Thanks a lot for these videos.

[AmandeepSingh-sxke]

Thank you for all your videos and teaching.

[nickolaizein]

Really, this is my one of the best programming channesl! Interesting and usefull information. 😇 Nice explanation and cool ideas :)

[azatecas]

thank you, i was planning on making something like this to replace Standard Notes and bundle it with tauri