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

Highlight: app.highlight.run/?promo=WEBD...
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:
GitHub Code: github.com/WebDevSimplified/r...
React Router Video: • Learn React Router v6 ...
React Router Article: blog.webdevsimplified.com/202...
React Multiselect Video: • This Is The Perfect Pr...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ 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

[@jeremydiaz6494]

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

[@Mikagaru444]

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

[@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!!!

[@hunglam2680]

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!

[@victorleyvaramirez4291]

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!

[@SalmanKhan-lx9kp]

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

[@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. 😊

[@ayoubdouch6975]

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

[@DarrylHebbes]

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

[@timothypark1037]

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

[@nickolaizein7465]

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

[@mumk]

Thanks Kyle, very interesting! God bless you!

[@piotrekjazz1287]

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

[@FrancoTr20]

great project mate, thank you for sharing

[@Lion-mh9rq]

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

[@Kas1m_]

Starting it now thanks man ❤

[@TheJonChristie]

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

[@beinerthchitivamachado9892]

He's Goated. There's sooo many tutorials out there where you legit do the same as the video and you get a bunch of errors. Mostly because they become outdated, of course.

[@Winter_Wyvern1]

@@beinerthchitivamachado9892 even his can become error prone if its libraries become outdated

[@UmairMirza-rc1wv]

Simply love your React / Typescript tutorials. Have learned so much from them. It would be amazing if you could make a tutorial for a complete React based CRUD application with an external REST API and use data fetching library like React-query or useSWR along with Context API. This kind of tutorial will definitely help a lot of junior devs transitioning to middle or senior level. Thank you for making such amazing content for us!

[@Winter_Wyvern1]

All that in idea minus the Context API and use Redux instead

[@beng2620]

Yess that would be amazing indeed

[@Dziejkoo]

@@beng2620 this guy is amazing but unfortunatly he didnt make tutorial for redux/typescript :/

[@stalker1361]

thanks for your great contents 💯💯💯💯 really appreciate your work 🙏🙏🙏🙏

[@krish_unni]

Great stuff. Thanks 👍

[@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.

[@MavenSharp]

Great work buddy! Same lol, I also can't stand Bootstrap. Tailwind for the win

[@yashnaravade5219]

NIce work! would you mind sharing the GitHub link for it? I'd love to go through it and follow to make my own too

[@ilyaselaissi1628]

This is a masterpiece

[@prayushdave]

Thank you man for the amazing project! After completion, I am trying to implement Unit Testing using React Testing Lib and Jest. Any resources and suggestions for it!?

[@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 :)

[@Michael-Martell]

That happens every time I learn something new. It does get to a point though when you know exactly what to look for in clean code and debugging! Keep it up!

[@billy8461]

i wish you did videos like this using Angular cuz your explanations are god like..

[@prathamparikh4430]

Thanks wds for this project

[@beinerthchitivamachado9892]

Kyle, you're THE GOAT!!!

[@NoC67000]

Merci pour le tuto!

[@yevhenlysenko7444]

perfect lesson!

[@otabeksodikov2773]

thanks for great content

[@Azoraqua]

If you don't want a certain property of an object, you can use the `Omit` type to omit said property in the resulting type. That may be more practical if there's not much change. ``` type SimplifiedNote = Omit ```

[@codeWithMete]

Hello, I just create my channel, can you support?😊

[@osmancho3185]

Thank you for this interesting tutorial! I think this is more for middle developers, I didn't understand some parts. The only thing is that when you delete a note, the associated tag remains in the list even if there is no notes with this tag anymore. So it makes sense to inject an algorithm that deletes a tag which has no associated note.

[@_hugo_cruz]

Thanks bro!!!!

[@clarkdnro]

I love the useLocalStorage hook

[@nogovi2686]

it doesnt actually work

[@studyingasyouwere]

Thank you for this video. I have been posting web dev content using HTML and CSS, but am interested in learning React. These types of videos will help me a ton!

[@gubatenkov]

Learn Next.js it is used in many commercial projects

[@studyingasyouwere]

@@gubatenkov Yes, Next.js is on my list! Thank you for the tip 😀

[@WarframeCrunch]

@@gubatenkov React isn't using next.js? When you type create react app?

[@muhammaderza7097]

Learn JS first

[@studyingasyouwere]

@@muhammaderza7097 That sounds sensible. Thank you for the tip!

[@lorenzowynberg]

Thanks Boss!

[@bahaaaldein5723]

thanks a lot ♥️♥️

[@sujoydutta920]

Nice valuable tutorial and coding with TS just makes it a hell of a lot better project. One question can I use MUI instead of react-bootstrap?

[@yuksak]

Could you create such or a bigger app using sass/scss please? Because there’s no such content on youtube that explains style side and its folder structure etc. I mean ofc there are but they don’t show how to use in bigger projects. I know basic sass/scss features. But i struggle using it in a bigger project

[@sogggy]

Awesome!

[@itouchgrass869]

Awesome 😮

[@arqsz]

Nice!

[@IshanKesharwani]

Saw the video intro and seems like a 3-day task since I never worked wi TS. Will dedicate these 3 days specifically for this.

[@gudsoundz432]

Please do a project on in-browser markdown with React(typescript). Thank you

[@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)

[@ayushprajapati9486]

can we make this just using react?

[@ChrisK-ef8np]

I was just about to create a similar project, but in svelte. 😂

[@whonayem01]

Thanks.

[@alibadra5367]

Kyle I was trying the as prop and it's not working I think you faced the same problem since you always used the as={link} instead of nesting elements

[@PaulnJenna]

As with all coding tutorials: 10-15 mins in = "Wow, I get all this, I'm actually understanding how to code".... 15+ minutes = "I have no idea what's going on, I'm an imposter, I have zero clue about coding" lol

[@AnnieBox]

These Note & RawNote, NoteData & RawNoteData thing... are super confused.. like 28:49, the onCreateNote function, it takes a NoteData as a parameter, and in the function it calls setNotes function, which takes prevNotes as parameter, which supposed to return an array of RawNote. However, it returns an array with prevNotes, and {data, id, tagsIds}.... so confused... 😭🤔

[@fabianschober]

Yo Kyle, what about Angular? I would love to see a series on Angular!

[@lisali6205]

thanks

[@sam-u-el]

thank sir

[@nguyenhuudungz]

So advanced =))).

[@KacperMrowiec]

map function on useMemo in App.tsx is throwink an TypeError and breakes the application

[@ImNotSoLegit]

How do you prevent the page from refreshing when trying to edit a tag? I can't see how it is working on his end the way its currently coded.

[@nguyenAudio77]

Good!

[@RealLexable]

Man,.. seems to be too far beyond my head yet,.but sounds amazing

[@gudsoundz432]

please do a tutorial on how to create an in-browser markdown editor tool. please use React and Typescript, styled components. thank you

[@treyrader]

Kyle! love your content bro. But yo check it's pronounced "Veet" lol. It's a french term meaning "to be quick". I've heard ya pronounce it Veet before, but we gotta keep the french alive! lol cheers

[@CaliburPANDAs]

Kyle, can you do a video about tech layoffs and what it means for self-taught and new grads applying? Thanks 🙏🏻

[@rdubb77]

Others have. Basically you have no chance if you're just applying to jobs. Too few jobs and way too many people looking. It will come down to pure networking, and getting to know people personally and personally helping out on projects, paid or not to get known. That's essentially the only way in now.

[@ghalitsar2730]

how to implement passing "onSubmit" function 29:00 in NextJs... i`ve created 2 page 1 for "home-page" , and 1 for "new-page" and I was writing code at "home-page" and suddenly I just wondering how to pass "onSubmit" function to another page... and I think its impossible ? but I understand that I was wrong to put code at "home-page" but where should I put the code?

[@aram5642]

Should you ever run out of ideas for tutorials, I would be happy ti see you build (and test!) a project with a cron-like funtionality, ie. sending reminders at a specific time.

[@harunjeylan9362]

thanks🙏🙏🙏🙏🙏

[@user-op3mj5kq5c]

is it ok that i find hard to follow up with this course as a junior dev?

[@bikrantjungbudhathoki3687]

I want to ask a question to someone who has already finished this video. Is it worth watching this video(just to learn some advanced typescript) ? I mean there are lot of typescript with react videos where they just create some basic interfaces and types and whenever they encounter some type error they just use "any" and say "we can ignore it for now". Is this video different than others ?

[@JackTomasik]

Have a bug when trying to style the NoteCard component at 48:36, vscode is saying styles.card is deprecated. Anyone one else get this issue or know how to fix it? Thanks!

[@rs-vd1ds]

Can you make a video on microfrontends

[@thequang9234]

will all the notes be persistent through refreshes ?

[@francoagustin765]

why do you not use ESLINT ? is not necesary for you or what is your opinion for this?

[@tobethebestfounou9409]

Please help me out of this problem with my nodejs application " Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”)" i am new to nodejs

[@asvicnal8483]

Would you be able to put together a crash course on DynamoDB and HTTP Module?

[@codeWithMete]

Hello, I just create my channel, can you support?😊

[@AM-nm6ts]

thanks for the video, but please could you add the link 10:37 thanks a lot

[@sofiamouchard8902]

For me a got this problem: Router' cannot be used as a JSX component. Its instance type 'BrowserRouter' is not a valid JSX element// but I could be fixed when asked google: Your react-router-dom is at version "^5.2.2" while your @types/react-router-dom is set to "^5.1.7". There is also a difference in your react-dom versions. Your react-dom is at version "^16.8.6" while your @types/react-dom is set to "^16.8.12". Try doing: npm i react@16 react-dom@16 react-router-dom@5 @types/react@16 @types/react-dom@16 @types/react-router-dom@5 doing that solved it.. If anyone else got the same problem.

[@regilearn2138]

MERN + RTK QUERY + TYPESCRIPT ADVANCE Project please ❤❤❤❤

[@sanvirahmed]

Maybe the video was recorded more than one month ago, right? You are using the old routing system😊

[@grimmdanny]

Markdown is a really outdated 90s era method of formatting that I wish had been forgotten to time.

[@mohammedraqeeb4392]

THANK YOU FOR THE AMAZING VIDEO MATE. Please consider our request to stop using bootstrap. Please!

[@KacperMrowiec]

Amazing video! You could use React.useState, React.useRef etc... instead of importing them.

[@mikamanelka1326]

I see React + TS, I like

[@codeWithMete]

Hello, I just create my channel, can you support?😊

[@regilearn2138]

Why are you not using arrow functions components? any reason for that

[@rdubb77]

I was wondering the same thing too. Probably habit. BTW you're talking about Function Expressions, not Function Declarations, Function Expressions happen to use the arrow in modern usage. The main benefit to Function Expressions are that you need to define them before using them, which makes the code more readable, but I guess it doesn't matter so much for components.

[@teejaay_me]

Dejavu, coz I've done those ;)

[@karthikm.1804]

please same project with vanilla js

[@bur5153]

Просто бомба

[@funshot4782]

🥳🥳🥳🥳🥳

[@debugpro]

pls make this using NEXT JS

[@Exypnos]

Anybody else running into this issue at 28:52 in the onCreateNote function? Typescript compiler is giving me an error Argument of type '(prevNotes: RawNote[]) => (RawNote | { id: string; tagIds: void[]; title: string; markdown: string; })[]' is not assignable to parameter of type 'SetStateAction'.

[@Sam-rz5hw]

you might have forgot a return statement if you are using curly braces, otherwise you can use paranthesis

[@derciojds]

Bootstrap is good for the prototype

[@codeWithMete]

Hello, I just create my channel, can you support?😊

[@WarframeCrunch]

Ok thats not for me I stuck at 17:30 this is going too fast to understand I just give up.

[@OcasoND]

It definitely got sweaty 20 mins in ..

[@labhamjain3915]

You may prefer daisyui over bootstrap

[@archiealvarado8831]

iling iling

[@Anonymous____________A721]

Can anyone pls explain how useNote is working in all components 😢😢

[@Just__Ilya]

from 3 accounts like

[@theRINspace]

Why did he use types to define the structure of the notes instead of an interface?

[@Michael-Martell]

Tailwind all Dae

[@clashol]

I can follow the tutorial and understand it but I can't really do it on my own, How can I change that?

[@falcon94q]

Everyone has this problem, not just you. Therefore, you need to start with very simple projects, and then gradually make more complex ones. Otherwise, it won't work.

[@djibrilm__-]

and me who was lying to myself that I knew enough typescript

[@WarframeCrunch]

I will be learning that tommorrow, time for Counter Strike.