Modern React CRUD App Project (React ToDo app)

[@nyashachiroro2531]

Mannn the quality of your videos is something else, not gonna lie. Keep up the great work man

[@CodinginPublic]

🙏 glad you’re enjoying them! Thanks for saying something!

[@ihebbenaicha1353]

thank you for keeping this video as beginner friendly as possible .. there are a lot of people who are trying to learn step by step

[@CodinginPublic]

You’re welcome!

[@hariprasad4917]

oh my God, thank you so so much, what a clear explanation. Tutorials with projects are the best keep doing these types of video. You saved my one week of struggle in 3 hours, I followed along the video and completely understand the concepts thank you so so much 🙌

[@CodinginPublic]

So glad it was such a help! Thanks for taking the time to say something!

[@HarelTussi]

Great content! You are motivating me to start my own channel ✌️

[@CodinginPublic]

Go for it! 🙌

[@Quiestre]

that css is insane. really well put together

[@CodinginPublic]

So glad you enjoyed it!

[@jimmyj.6792]

Another excellent video with awesome explaination chris 👌👏

[@CodinginPublic]

Glad you enjoyed it!

[@Mohamood_jama]

Why is this channel underrated 😐 😕? You have a lot of amazing content. Glad to be here

[@CodinginPublic]

🙏 thanks so much. That’s very kind. Glad you’re enjoying the channel!

[@bobdpa]

Great video! This covered way more than I expected. Awesome!

[@CodinginPublic]

Great! Glad you enjoyed it!

[@MightyKingKala]

thank you so much coz u are also teaching how to debug react apps when something doesn't work properly

[@CodinginPublic]

You’re welcome! Yeah, I try to leave my mistakes in there so long as they might help others.

[@scorpawe]

brilliant, brilliant, brilliant! love this! a step above most other react devs on yt

[@CodinginPublic]

🙌 Thanks for your kind words!

[@MarshallSC1]

How, how, hooow are you this damn good... On this level so fast and in short time... Amazing! Maybe one of your future videos should be a tutorial on how to properly learn things and manage your time...

[@CodinginPublic]

Ah, that's very kind. I'm glad you enjoyed it! I'm not sure I have a lot to share there other than that I just keep building and building things until I feel like I understand it well enough to explain it. Being forced to explain it often shows me what I don't understand. And sometimes much later I still realize I didn't understand :)

[@killswitch.]

Best react todo tutorial I've seen...

[@CodinginPublic]

Hey, awesome! Glad it was such a help. It's been a while, so I'm sure I'd do some of it differently, but very glad to hear it was still a help!

[@hazema.6150]

Great quality man, really appreciate it.

[@CodinginPublic]

Glad you liked it!

[@shanli6502]

can't wait to watch your next video!

[@CodinginPublic]

🙌

[@Dubov1933]

First vid of yours I’ve seen, that font tho, wasn’t expecting that lol

[@CodinginPublic]

And it’s free! Cascadia Code by Microsoft. I like it. :)

[@iamenochlee]

Am speechless, awesome content chris

[@CodinginPublic]

So glad you enjoyed it!

[@shynsky]

Great video Chris! I"m waiting for the follow-up with theming. Switching this project to typescript could also be useful for your viewers :) Cheers!

[@CodinginPublic]

Video drops tomorrow! Yes, adding typescript would be a great next step. Tried to just stay focused on React in this video, but that would be my next step to improve it!

[@Pscytlk]

@@CodinginPublic i didn't found the video.

[@jocelynnsa9316]

Your to do app is beautifull

[@CodinginPublic]

Thanks! It was fun to build out!

[@vasudev16180]

Wow man! Keep up your good work 👏

[@CodinginPublic]

Glad you enjoyed it!

[@naylord5]

Sweet baby Jesus I fall in love with this tutorial, thank you for your amazing content!!!

[@CodinginPublic]

ha glad you liked it

[@viniciusm.m.7822]

Thanks a lot, man! God bless you! Abraço do Brasil!

[@CodinginPublic]

You're welcome!

[@Xamy-]

I would love to see you cover something in Svelete and Solid in the future

[@CodinginPublic]

Me, too! (But I'd have to learn it first :) hopefully sometime soon!)

[@IamPetrus]

thank you for your work Chris. I was wondering when you just start with command combo ' pnpm create vite react - todo ' after choosing React , we are asking to choose TypeScript / TypeScript + SWC / Javascript / Javascript + SWC. What should we choose?

[@CodinginPublic]

Any of the JS options should work! (or if you want to write TS, that's great, too!) They added SWC as an option after I created this tutorial. It's likely a little faster, but won't matter much in this project. Hope that helps! Enjoy the tutorial!

[@IamPetrus]

I did!! Thanks again @@CodinginPublic

[@hardwired66]

react content yuhuu 😍

[@icongrindsetsfj]

Please release a video explaining all the styling aspects of this project.

[@CodinginPublic]

I've done most of the individual parts on my channel-like a new button default, form details, etc. Most of the project styling is from those videos. Hope that helps!

[@TheCrowdel]

from lesson 6 it's getting to confusing for me, i need to watch it over and over again haha

[@CodinginPublic]

Ah, sorry. Let me know if you have any questions

[@yogeshmishra2858]

The edit part is quite confusing anyways good explanation uptil delete task

[@CodinginPublic]

Sorry to hear that. What was difficult to understand? It’s been a while so I’m sure there’s ways to improve what I did or how to explain it.

[@ayushjain2499]

Awesome video bro🎉🎉

[@CodinginPublic]

Glad you enjoyed it!

[@gabrielchima6916]

Fantastic video, Kindly send with the link to the index.css

[@CodinginPublic]

You can find it on GitHub if you follow the link in the description. You might just need to change the branch to the finished code.

[@gabrielchima6916]

@@CodinginPublic Thanks

[@codeStudioz]

Great Video!. Damn Awesome. and your terminal looks sick!!!. What theme?

[@CodinginPublic]

Glad you enjoyed it! I’ve done some videos on my terminal in the past if you’re interested! Theme is Palenight Operator, if I’m remembering correctly.

[@junk1ord]

Hey man! I was actually curious about your terminal! it's pretty darned stylized! It's better than any of Git Bash, Powershell or CMD! 1. What is your terminal exactly? 2. How did you set it as your default terminal for VSC?

[@ianramirez1577]

The terminal is called zsh and this is the line that you have to paste in your settings.json : "terminal.integrated.shell.osx": "/bin/zsh"

[@CodinginPublic]

Hey, yeah. It's ZSH with oh-my-posh as a terminal theme engine. I explain the basic setup here: kzbin.info/www/bejne/enOkhJdvgZl6edE I was just using oh-my-zsh in this video, but oh-my-posh is even easier to setup. I might do a video on it sometime.

[@ahmadsofwan4069]

Can you teach us how to deploy this project? I faced many errors

[@CodinginPublic]

The easiest way is to run `pnpm run build` and then take the dist folder and drop it here: app.netlify.com/drop. Let me know if you have other questions.

[@chadGPTSDE]

38:03 I used display: flex; flex-direction: column-reverse; to show the items in descending order, Will there be any issues with that?

[@CodinginPublic]

Not that I can think of; but it’s probably better to just reverse the order you add them in JS?

[@muqtadirshah7317]

Is it possible to add a priority? Say drag and drop to the top and its number one priority? Love the ui great tutorial!😍

[@CodinginPublic]

Sure! I haven’t done drag and drop UI stuff before, but I know there’s an API in vanilla JS; I’m sure there’s also a React library for drag and drop?

[@Frahane1]

I'm new to programming and currently learning react (Front-end). I like your tutorial, it's great. But the CSS side is frustrating, it's too complex for Juniors. Thanks.

[@CodinginPublic]

Yeah, this is more complex CSS than a lot of things you’ll find on my channel. Glad you liked the react part though!

[@Frahane1]

@@CodinginPublic Hey, sorry to disturb but when I try to add Local storage, everything goes blank (not rendering), I don't what I did wrong but I did watch the vid several times but it can't help. Whenever I add the useLocalStorage(), not render on the browser. Thanks for helps!

[@CodinginPublic]

@@Frahane1 Sorry for my delay. Your console should show some errors. Mind sharing those?

[@Frahane1]

@@CodinginPublic Yes, If you have a telegram, I'd be happy to join. Whenever I change the parent (App) useState to useLocalStorage, everything on the browser disappear. I'm using my own CSS (SASS). THANKS A LOT.

[@valeantigot6390]

enjoy watching your videos! Are you in audea btw?

[@CodinginPublic]

Great! I don't know what Audea is? so probably not ?

[@thecoder1631]

planning to do any tuts with firebase/superbase ? thanks ! what font is that in vs code ?

[@CodinginPublic]

Yes, at some point! I use both Firebase and Supabase in a few projects. Just haven't ever taken the time to do tuts on them yet. Font is Cascadia Code (free font by microsoft)

[@gtl2695]

LOVE YOU

[@sigfigronath]

Whats this terminal ? looks insane

[@CodinginPublic]

It’s oh my posh added to a oh my zsh theme. I’ll try to throw a blog post or video together about it.

[@sigfigronath]

@@CodinginPublic ah cool thanks, I'll check it out too

[@darnzh]

Hi Chris, I don't see the styles config in your GitHub repo. Do you mind dropping a link? Thanks. And the tutorial is awesome 💯

[@CodinginPublic]

So glad you enjoyed it! The style documents should be in later branches? like look at lesson-7 branch. Do you see them there?

[@darnzh]

@@CodinginPublic Oh I have seen it. Thank you!

[@sergekamga4512]

Can you share how you customized your terminal prompt and also vscode?

[@CodinginPublic]

Sure thing :) kzbin.info/www/bejne/enOkhJdvgZl6edE is probably what I was using here. I've also done a more recent video on my terminal set up here: kzbin.info/www/bejne/sJndmYeslquCn9k

[@mrbeardo5129]

I am using typescript, getting an error in the code: Cannot find name 'setTask' on the line 5. On Line 7, Parameter 'e' implicitly has an 'any' type.ts(7006)

[@CodinginPublic]

I’d have to see the code to be a help. For the second error, you’ll need to identify the e as a synthetic react event. But don’t remember the syntax off hand. Hope that helps!

[@megamind452]

Is it okay to use map, filter inside your setState or not.....?,Btw Great video 👍.

[@CodinginPublic]

Yep, just make sure you’re not mutating state as react doesn’t like that :)

[@takeda3861]

Thanks

[@CodinginPublic]

You’re welcome! Glad it was a help!

[@mohamedbecha8301]

شكرا جزيلا لك

[@CodinginPublic]

على الرحب والسعة

[@abdelrahmanelsawy7675]

is "onInput" replace "onChange" ?

[@CodinginPublic]

No, in this case (as I understand it), you can use either. For whatever reason, React implemented them both to work the exact same way (again, someone correct me if I'm wrong here)

[@taufiqhidayat8034]

Hello, sir. I'm here at the end of phase 3. but, when my code runs the results can't appear in the browser with errors like this: react-dom.development.js:26923 Uncaught TypeError: Cannot read properties of undefined (reading 'sort'). How's the solution?

[@CodinginPublic]

Thanks for the message! It looks like the state is not holding the data you need. I'd need more context to help you. Sorry! Feel free to post a link and someone can take a link (even if I cant). Thanks!

[@taufiqhidayat8034]

Thanks sir, i will check again my code@@CodinginPublic

[@briziniattae6202]

couldn't gind the code on github sir

[@CodinginPublic]

Make sure you’re looking under the right branch :)

[@gabrielmwenda8769]

Hi Chris, I tried pnpm install after extracting the downloaded zip file but I get no package.json found error

[@CodinginPublic]

Hmm. Did you select the right branch?

[@gabrielmwenda8769]

Sorry, I had selected the wrong branch

[@nadiabenna8375]

i didnt find any Project in github ??

[@CodinginPublic]

Should be linked below.

[@baka_thyron]

Is it okay to change the way tasks are added to the array in useState( setTasks(prevState => [...prevState, task]) >> setTasks(prevState => [task, ...prevState] ) instead of using sort function in TaskList component? Or was this intentional?

[@CodinginPublic]

Haha! Yes, that's a much better way to sort them. 🤦‍♂️ Great improvement. Thanks!

[@quentinmckay8658]

Good idea. I feel like we could just use reverse( ) too. Slightly cleaner although it's nice to see sort( ) used as well.

[@bayzednotes4593]

bro which font you use in your vs code

[@CodinginPublic]

Cascadia Code. Did a video linked near the bottom of the description.

[@amateruss]

I can't seem to make the console log appear in the browser's console. Any ideas?

[@CodinginPublic]

hmm…not sure? Happy to review code if I have a moment?

[@amateruss]

@@CodinginPublic nvm, it seems to be working fine after making another project. Must have installed it wrong the first time. Thanks for your hardwork.

[@CodinginPublic]

@@amateruss awesome! No worries!

[@yinkysubwee8550]

How does the delete bit work? We pull out the task id and compare it to the id but if we log those values out they are the same two values for all elements. How does it differentiate between element being deleted and others? Hope that made sense

[@muqtadirshah7317]

Not sure what you mean. The filter function filters out all the elements that dont meet a criteria and sends out a new array with those elements. Here we are taking in the id of the todo and filtering it out then resending the array. Not sure if thats what you were asking but yea

[@CodinginPublic]

The way filter() works is that it makes a comparison for each item in the array. During each loop, we compare the ID passed in to the ID of the loop. In the end we have a new array that excludes anything that doesn’t match the filter. That’s what we then “save” as our list of tasks. Hope that helps!

[@citizensky]

Good Try but Way too fast from lessons 4 on, it seemed like you were just wanted to get it over with while looking at your solution already.

[@CodinginPublic]

Thanks for the feedback. I tried to speed up once I was repeating things I'd already taught, but it's good to know it felt too rushed. Thanks again.

[@elienetwork8764]

Hola! que consola estas usando?

[@CodinginPublic]

Turbo console log

[@fahmiazzuhriefki]

what font do you use?

[@CodinginPublic]

Cascadia code :) I’ve done a video showing how I set it up, too.

[@sdevaleem2530]

👌

[@CodinginPublic]

Hope you enjoyed it! It was a lot of fun to put together!

[@dusko8989]

After a wile i regret watching this video. saying here instead of file name and making that mistakes and navigating trough app was really painfull

[@CodinginPublic]

I’m not sure I understand your comment, but I’m sorry you didn’t enjoy the video

[@neiltubioii]

Can you give this code. Thank you

[@CodinginPublic]

In the description. Just make sure to select the right branch.

[@noobienate1293]

Hi!, what’s the font that you use?

[@CodinginPublic]

It's called Cascadia Code. It's a free font by Microsoft. More info here: kzbin.info/www/bejne/a6aohYeOrbudbtU

[@akhyar.azamta]

What theme and vscode font do you use?

[@CodinginPublic]

I think in this video I was using Palenight Operator? And the font is Cascadia Code :)

[@akhyar.azamta]

@@CodinginPublic OK, thanks, I've subscribed 🤝🏻

[@CodinginPublic]

🙌

[@anhdevga1109]

Can you give me your json vscode config. Thank you bro very much !!!

[@CodinginPublic]

Sure thing. Freshly updated: github.com/coding-in-public/vs-code-settings

[@adiprimanto8871]

what is the name theme VSCODE?

[@CodinginPublic]

I think this is Palenight operator? I change up my theme a lot :)

[@oook3407]

source code?

[@CodinginPublic]

Description :)

[@mann_gupta]

@@CodinginPublic github doesn't have source code

[@IamPetrus]

@@mann_gupta Agree. It does not have css code

[@IamPetrus]

@@mann_gupta sorry, you will find source code in the right branch. There is one branch for each lesson. Apologies ...

[@olga.alessandro]

Hi Chris! Thank you for the tutorial. The site looks very stylish. Could you please help me to understand my problem? When I load the site from my computer it works. I uploaded files to github and the site is not loading. I couldn't load a folder node_modules to github as it has too many files and github refuses to do so at once. Can that be a problem?

[@muqtadirshah7317]

Hey mate, node modules is a big folder and it won't upload since there is an invisibile file called gitignore that blocks it from being uploaded. You can view this by enabling hidden files in file explorer. I reccomend you search a tutorial about uploading react app to github. If you are trying to host the app, then in your terminal run npm run build. If your goal is to host the site I recommend you use firebase instead its much much better.

[@CodinginPublic]

Agree with ⬆️. Only thing I’d mention is Netlify is even a little easier. Look up Netlify Drip. I’d npm run build and then drag that dist folder to that netlify drop.

[@olga.alessandro]

@@muqtadirshah7317 thank you, that's helpful

[@olga.alessandro]

@@CodinginPublic thank you, Chris. It worked!

[@saugatachatterjee1169]

36:00 1:13:20 1:31:30

[@studentimantha5345]