Building Todoist From Scratch - React Tutorial - Learn React in 2021

[@CognitiveSurge]

🔥 Support the channel by becoming a member: kzbin.infojoin ✅ Please remember to Subscribe: bit.ly/CognitiveSurge

[@chadsamson1005]

A trick : you can watch series at Flixzone. I've been using it for watching lots of of movies these days.

[@malikjase4416]

@Chad Samson yup, been watching on flixzone} for since december myself :D

[@dennisjohnny9981]

@Chad Samson Definitely, I've been using flixzone} for years myself :D

[@sifatbhuiyan5217]

Timeline 0:00:00 - Introduction (What is Todoist?), tech stack talk 0:02:26 - Showing the final application (with dark mode!) 0:05:00 - Installing create react app 0:07:15 - Clearing out what we don't need from create react app 0:10:57 - Let's get building our components! 0:18:00 - Installing packages using Yarn 0:18:22 - Building the Header component 0:19:57 - Building the Content component 0:20:37 - Building the Sidebar component 0:28:27 - Adding Firebase 0:40:32 - Adding our React hooks (useState, useEffect) 0:49:57 - Adding our function helpers 0:53:07 - Back to adding more to our React hooks (useTasks, useProjects) 1:06:22 - Building the Tasks component 1:08:42 - Building the Checkbox component 1:13:10 - Styling our application 1:35:02 - Adding Context to our application 1:48:26 - Building the Projects component 1:55:25 - Adding a composite index in Firebase 1:57:21 - Building the IndividualProject component 2:06:21 - Adding the IndividualProject component to the Projects component 2:08:54 - Adding the AddProject component & modifying our context 2:10:54 - Adding Projects to Firebase 2:11:49 - Adding Show Confirm Delete to our Stylesheet 2:14:04 - Building out our Tasks component 2:23:14 - Adding Main Content to our Stylesheet 2:23:49 - Adding Tasks to our Stylesheet 2:28:24 - Adding Context to our Sidebar for Projects 2:35:19 - Building our AddProject component 2:44:44 - Adding Add Task to our Stylesheet 2:46:44 - Building the AddTask component (using moment JS) 2:59:20 - Adding to our Tasks component 3:00:29 - Adding to our AddTask component 3:07:44 - Adding more AddTask styles to our Stylesheet 3:12:00 - Adding TaskDate to our Stylesheet 3:13:00 - Adding ProjectOverlay to our Stylesheet 3:15:05 - Building out the ProjectOverlay 3:19:10 - Adding the ProjectOverlay to AddTask 3:22:25 - Building our the TaskDate component 3:26:00 - Adding to the Header component (dark mode implementation) 3:29:35 - Adding our CSS for dark mode 3:29:50 - Adding quick add task to the Header component 3:42:25 - Some quick manual testing 3:43:45 - User testing for responsive design 3:45:10 - Starting to look at accessibility 3:55:45 - Modifying our App.scss to make our components more accessible 3:59:30 - Making the Checkbox component more accessible 4:00:25 - Making the AddTask component more accessible 4:01:45 - Making the IndividualProject component more accessible 4:02:20 - Making the Sidebar component more accessible 4:09:20 - Making the ProjectOverlay more accessible 4:11:45 - Making the TaskDate more accessible 4:18:00 - Looking at tabIndex for improved accessibly 4:21:15 - Adding aria-label and tabIndex to our components 4:34:05 - Analysing our accessibility score using Lighthouse 4:39:45 - Dev complete; testing starts with React Testing Library 4:39:46 - Testing the Checkbox component 4:52:30 - Modifying package.json for test coverage and reporting 5:00:40 - Testing the App component 5:11:45 - Testing the AddTask component 6:11:38 - Testing the ProjectOverlay component 6:19:43 - Testing the Projects component 6:26:58 - Testing the IndividualProject component 6:43:33 - Testing the Tasks component 6:52:03 - Testing the AddProject component 7:06:13 - Testing the Header component 7:20:02 - Testing the Sidebar component

[@ergusto]

Extremely impressive tutorial. I'm sure this'll be invaluable to a ton of people, myself included. Kudos!

[@CognitiveSurge]

Fergus Ruston appreciate the kind words Fergus, inspires me to create work! I hope it’s useful and you learn lots 🙌

[@ElHawary]

I used to think of myself as a react developer before watching this, Thank you so much. I still have a lot to learn. This is gold!

[@CognitiveSurge]

Haha no not at all don't think that! Nobody knows everything and I'm sure you can teach me things as well :)

[@floriankulig6929]

So I had never coded a React App and a very basic understanding of javascript before watching this. I ran into 2 different problems: I had no idea what context was and how firebase worked (with firebase I at least knew that we're manipulating/fetching data from the database). So I watched a video from fireship explaining all the things firebase can do (really helpful). Demotivated by not understanding context, I looked for a simpler solution for my future projects and found a video addressing if you should use Redux. It was recommended to rather use context than learning Redux. Now I had learned that we use context to pass global state to our components, looked up the React documentation and everything began to click. Hope that helps other people having the same problem(s). Awesome tutorial! Greetings from Germany :)

[@CognitiveSurge]

That's awesome to hear Florian! Looking back I should have explained those a bit more, but you did great to have initiative and research and learn them yourself, so great job with that. Sticking out the tutorial is one of the best things you could have done, it's so easy to fall into tutorial hell and just keep jumping from tutorial to tutorial and not learning anything, but it sounds like you nailed it! So congrats on getting all the way through, 7 hours is not easy! P.S. I love Germany, I was there last year for the first time and I loved it, one of my favourite places!

[@MrScX]

WoW! This is really amazing. Can't imagine the hard work put behind this. Highly appreciated. Thanks a lot!

[@CognitiveSurge]

It did take me a while, and being inside in summer it was very hot 😂

[@jameshello38]

22:54 You literally wrote the exact thing as before 😂😂

[@SridTech]

Looking at the replies from you for the comments from 10 months back to 1 month before, shows the amount of hardwork, persistence and patience you put on this channel to grow it. And I like how you do it. Also, I am just gonna start this a day long video and it will take longer if I would follow along with you. No way you are gonna leave this comment without that blue thumbs up. 👍

[@CognitiveSurge]

Really appreciate the kind words! I do my best to respond to every comment and help as much as possible! I know 7 hours is a long video but it's worth sticking it out if you really want to learn to build a real application! Thanks again, much more to come!

[@StewartMcgown]

Not even watched the video but the repo alone is incredibly impressive. Good job my man!

[@CognitiveSurge]

I don't blame you, it is a bloody long video 😂 the repo is really good though if you have a little React experience!

[@pratikneupane1068]

Made my quarantine a lot Better. Thanks mate!

[@CognitiveSurge]

Glad to hear it! I hope you're safe and well and keeping busy!

[@bradleywheeler3791]

Really cool to work through an entire project! Thanks for taking the time to make this ✨

[@CognitiveSurge]

My pleasure!

[@Kkvta]

Wow! Amazing job man, all the timestamps, everything, I can see you put a lot of time into this. Thank you, I'll look through it when I get time :)

[@CognitiveSurge]

Thanks so much dude, comments like these make it all worth it! Don't worry about going through the entire video, go at your own pace and be sure to check out the repo and just play around with the code, getting your hands on the keyboard & coding is always more important :)

[@balamuruganradhakrishnan7540]

It was an Awesome video, completed(watched and built) the dev part now. Will continue with testing. I just want to say BIG THANKS!

[@CognitiveSurge]

Thanks so much, glad I could help :)

[@typingcompetition]

5 days later it did it completely! Thanks for the tutorial! 👍👍👍

[@CognitiveSurge]

That's amazing! I hope you enjoyed it and learned a lot! Big congrats!!

[@maurolimaok]

I'm just starting Odin Project, but thanks IN ADVANCE, for the channel. Lots of nice things to learn.

[@mirozxl]

Liked and Subscribed because of the effort you put out. You may not know how worth the project is to me as a learner to get better every day . Wish i had a mentor like you

[@CognitiveSurge]

Thanks Miroz🙏 I’m going to try my best to keep uploading videos, any recommendations are welcome! Of course if you have any questions I’m here to help! Feel free to join the discord and I can help there 👍

[@Tab_010]

Thanks a lot for taking time to make this kind of amazing content and sharing your knowledge .

[@CognitiveSurge]

No problem Anis :)

[@EleftheriaBatsou]

Wow Karl! What a tutorial! You did a great job, it will take me a while to watch the whole thing but I truly believe the result will be amazing :)

[@CognitiveSurge]

Thank you so much, Eleftheria! It was a real struggle recording this in the summer 😂

[@Matheus-lk9lh]

Amazing man!! I am following coding along, learn so much, thank you very much!!

[@CognitiveSurge]

Awesome! Thanks Matheus!

[@alkanvatansever4430]

this is really nice job i just saw it at reddit. please keep update your channel with those kind of tutorials.

[@CognitiveSurge]

Alkan Vatansever definitely! I have another big tutorial next, even bigger than this one!

[@alkanvatansever4430]

@@CognitiveSurge i cant wait to see it!

[@sebastianmelbye5403]

Thank you for providing this longer projects! Really appreceate IT! Thumbs up from Norway😊😊

[@CognitiveSurge]

No problem 😀 super jealous you live in Norway!

[@tazib0ss95]

You're a hero Sir! 🙋‍♂️

[@CognitiveSurge]

Thank you!

[@nilmendes7710]

Your tutorial helped me a lot. Congratulations! Success in your projects!

[@CognitiveSurge]

Thank you Nil :)

[@nilmendes7710]

@@CognitiveSurge I thank you! When will the graphql course be published? I have many expectations with this course. Thanks again for the tutorials, they help me a lot. Success in your projects!

[@CognitiveSurge]

@@nilmendes7710 Next week :) putting the finishing touches together early next week and then I should be good to release for Saturday hopefully!

[@nilmendes7710]

@@CognitiveSurge What good news. Thanks for your effort!

[@melpacheco9288]

This the kind of content I need!

[@CognitiveSurge]

There's lots more on the way :D

[@Cybertutoriales]

This looks so awesome. It's goin to be add it to my to do tutorials list. Thanks

[@CognitiveSurge]

:D

[@alnaheen833]

I am adding projects and projects are added to the firebase firestore....but the problem is project aren't showing on the screen

[@CognitiveSurge]

Hi Al, please jump in the Discord and we will try help you

[@TajMenage]

@@CognitiveSurge what was the fix for this? I'm having the same issue. tasks is showing an empty array in the console.

[@nmoschen]

Awesome work! Incredibly useful tutorial, thanks a lot for taking the time to do it. You earned this comment, a like and a new subscriber. Keep up the excellent work! Cheers 🤟

[@CognitiveSurge]

Awesome, thank you!

[@Dgiulian]

If I could put a double like on this video I would. Amazing work Karl. Thank you!

[@CognitiveSurge]

Wow, thanks!

[@hariii5898]

Amazing, thanks man, waiting for next big tutorial.

[@CognitiveSurge]

Thanks dude, let me know if you have any ideas!

[@hariii5898]

@@CognitiveSurge how about react with graphql, it's so hard to find great tutorial about graphql

[@CognitiveSurge]

Hari ii I have a two part React and graphql video coming, 2nd part uses graphql, first part will be released this week 👍

[@hariii5898]

@@CognitiveSurge cool !! waiting !!

[@frannyglass61]

you are so damn underrated tysm !!!!

[@CognitiveSurge]

Thank you!

[@xNReaperx]

What a legend! Thank you so much for making this!

[@CognitiveSurge]

You’re welcome 😁

[@jeansantos9607]

Hello Kark, in the video you ask for feedback related to the size of the edidor. In my opinion, you shoud use like in 2:14:04, it's good for typing the code while watching the video. Thanks for the great work!

[@CognitiveSurge]

Thanks Jean! So the app alongside the code editor?

[@jeansantos9607]

@@CognitiveSurge I referred to the size of the font and the editor.

[@CognitiveSurge]

@@jeansantos9607 Ahh yes, think I got the font size down now in my videos! Thanks for the feedback

[@RizwanAhmed-pe2qq]

Awesome job mate. Looking forward to more :)

[@CognitiveSurge]

Rizwan Ahmed thanks dude 🙏

[@mehmetkose1753]

whoa. there is some top notch content here!

[@CognitiveSurge]

Thanks dude :D

[@kspv2806]

thanks a lot man ,really appreciate it

[@CognitiveSurge]

Glad it helped

[@channaveerhakari7319]

Your tutorial is amazing and really helped me a lot. One small suggestion though, kindly use *if* conditions then that of *ternary operator* its like hell lot of confusion not only for readers but also when someone reads your code. Thank you very much for taking your time and doing these wonderful videos.

[@CognitiveSurge]

I made the mistake of using it in a video xD do not copy that horrible ternary that I did haha.

[@jam4pagi508]

i hope u doing well, and god always bless u. This is everything.

[@CognitiveSurge]

Thank you!

[@AadidevSooknananNXS]

THANK YOU FOR KEEPING IN THE ERRORS!!

[@CognitiveSurge]

Aadidev Sooknanan it would take me much longer to cut them out as they happen a lot 😅

[@AadidevSooknananNXS]

@@CognitiveSurge Hahaha, a win-win for everyone then!

[@CognitiveSurge]

Aadidev Sooknanan indeed it is haha

[@ceciliaercole907]

Thanks from Argentina, I have been learning about React for a long time, but something always stops me and I feel that I need so much to understand its complexity ... I am making a lot of progress with your videos, thank you really. Thank you for spending so much time on these videos.

[@CognitiveSurge]

Hi Cecilia, I'm glad my videos are helping! If you need a few smaller projects check out the NewsReader, as that is a good starting point as the basics do get covered in there quite heavily. Best of luck and more videos to come, feel free to suggest!

[@ceciliaercole907]

@@CognitiveSurge Ok, thanks for the suggestion, I have several more small projects in sight, but this one looks so cool that I want to do it, in fact I am already in the middle!

[@thecodingjournal4726]

I m beginning to learn react! ❤ Thanks

[@CognitiveSurge]

You're welcome 😊

[@princesingh8162]

saw the title and subscribed

[@CognitiveSurge]

Prince Singh erm, I can’t actually remember I think around 10

[@Decatilinae]

wow...this is amazing... Are you planning to do more projects with react? You defenitly deserve a coffe from me...

[@CognitiveSurge]

Romesh Digitalyogin thanks 😁 yes sir! Give it 2 weeks and they’ll be another React video 👍

[@CognitiveSurge]

Romesh Digitalyogin wow dude, thanks for that! I appreciate it a lot 🙌

[@CognitiveSurge]

I finally did it: www.patreon.com/karlhadwen ✌️

[@unknownman1]

11:52 is it explicit return or implicit return?

[@CognitiveSurge]

implicit - mostly you see implicit returns with arrow functions but they can be used elsewhere too

[@sagargiri6233]

Awesome work

[@CognitiveSurge]

Thank you! Cheers!

[@matthewao]

Holy crap, this is crazy value

[@CognitiveSurge]

Thank you!

[@grapejuice-xb6lw]

Hi Karl, first of all I really appreciate all the hard work you put in to make this and share your knowledge! Sorry that this comment is gonna be rather long🙏 I've got a question not particularly on this video but more of a learning process of programming. I've been learning programming for about 2 and half month now and have done comprehensive javascript/react course and follow along couple of project-based tutorials as well. recently I've tried to get out of a comfort zone/tutorial hell and make my own project since my main goal is to get a job as a developer. I was thinking of making small version of Notion-like app, but when I faced a blank editor for the first time, I had no idea where to even start. so I started searching for similar tutorials to get a bigger picture of what I need to implement... now I've found your channel and this video. my question is that is it ok to check out tutorials when building my own project? or should I only google for a specific part of problems and not rely on well-structured videos/articles as a guidance? Thanks for reading this far! and wish you all the best from 🇯🇵 - Yuichi

[@CognitiveSurge]

Np! Definitely check out tutorials before starting, but don't fall into the trap of just watching all the time and not being able to think for yourself. Each part of a project might require some research, but that's what everybody does. I have 2 side projects I'm working on at the moment and I research parts and use Stackoverflow just like everybody else. I don't watch videos that much myself, I just Google the question I have in my mind and try to find an answer.

[@renatognunes]

4:13:47 🙌

[@CognitiveSurge]

:D

[@adamtak3128]

FINALLY a fullstack react application with an amazing UI. I'm going to spend the next couple of days going through this video. A million thanks! Any chance of getting a MERNG stack app tutorial from you??? Currently I'm learning GraphQL/Prisma looking forward to making a project with it once I'm done.

[@CognitiveSurge]

No problem at all, even though these might be a little harder to understand, they're the sort of stuff you'd use in production applications so it's much better to connect all the technologies! I hope you learn a lot 😀 Of course, I'll be taking a week or two break from tutorials after this but the next one lined up is exactly that haha.

[@adamtak3128]

@@CognitiveSurge Awesome thanks! Enjoy your break :P I have a lot of things I'm learning at the moment so the gap is great for me. I wish more people would do more real world applications like this. Toy apps that barely do anything aren't great to learn from.

[@barkovurur3043]

For a minute I thought you were asking for an angular version. The horror, the horror. Mongo, Express, React, NodeJS and GraphQL--not NG for Angular.

[@adamtak3128]

@@CognitiveSurge Hey, so it looks like the Prisma team is working on a second version of Prisma with a lot of changes. Might want to hold off on using Prisma until they release the full version of Prisma2 sometime this year. Prisma2 looks amazing, and I'm looking forward to use it once it's production ready.

[@CognitiveSurge]

@@adamtak3128 Awesome, will do that! I did start the project but then I got that email haha

[@kalpeshmali1476]

help ful 🔥🔥🔥🔥

[@CognitiveSurge]

Ty!

[@Maindev1994]

36:56 were can I get an userId for this input?

[@CognitiveSurge]

Should be able to get it from Firebase

[@nurzhansaktaganov8670]

36:56 when I creating userId on firebase can I use randomly generated string, then use this string?

[@rafapiekara7343]

Amazing JOB!

[@CognitiveSurge]

Thank you!

[@danielaceros5723]

Fortunately I just found your channel!

[@CognitiveSurge]

Thank you Daniel!

[@killerpopholly4054]

Three years later, still an ultra interesting project, and still actual. I'am almost at the end and adapting all the project to Typescript with all new versions of libs, and sometime's, it's kinda tricky, but I really love it! That's a really great work!! Congrats! I'm learning working with Firebase, something I'd never did before. But something is questioning me since the begin, there is no user management? That's just fo one user and only this one ?

[@CognitiveSurge]

That's great to hear! I left the user management out, but you can the really basics of user management in Firebase. Creating an admin side to this would have taken just as much time as the app itself.

[@killerpopholly4054]

​@@CognitiveSurge For sure, that's already a hudge video !! And thanks for that !! I'm finishing the project first, with some adds and edits, and I think I will start user management. If you're interested, I will show you what it looks like after, and even the code to see the Typescript implementation. Merry X-Mas to you and your fam! Be safe tho ;)

[@swastikpatro6436]

@@killerpopholly4054 Hey, can you share your Github repo for this project, I'm thinking to start this project 😇👀

[@typingcompetition]

Just working through your tut, its great! BUUT: are you always writing your imports on your own? Nothing with autocompletion? Or are you just writing it because you're making a tut?

[@CognitiveSurge]

SpirIT I actually am just writing them for the tutorial so people don’t miss out, I’m far too lazy to write them myself normally 😂

[@ionvajda]

36:52 how did you generate the id?

[@CognitiveSurge]

Ionut Vajda firebase generates one or just google uuid generator for a function - either work, the id is the doc id I believe

[@ionvajda]

@@CognitiveSurge thanks

[@muhammadarslanrana942]

Awesome tutorial

[@CognitiveSurge]

Thank you!

[@digigoliath]

Wow, thanks!!

[@CognitiveSurge]

digigoliath you’re welcome 😁

[@OrionDomeric]

Which linting VS extension are you using? Fantastic tutorial btw.

[@CognitiveSurge]

Thanks man :) My entire setup is on my latest vid!

[@ruiqianghuang3819]

Nice work Karl. One question, what's linter setting you have? I don't have the same jsx error as you in vscode.

[@CognitiveSurge]

Hey 👋 I’m using Airbnb’s lint styles globally 👍

[@abdallasaad4126]

thanks man

[@CognitiveSurge]

no problem dude!

[@tomaszfr90]

Great video but please use dark idle theme

[@CognitiveSurge]

I've switched! I was using this in summer

[@ericmaina7922]

please make a video on the eslint setup

[@CognitiveSurge]

There's one on my channel

[@ericmaina7922]

Okay.... thanks

[@Abhishek-dp5tc]

44:20 to 49:00 I dont understand subscribe and other methods used, is any prerequisite there except for React for this tutorial?

[@CognitiveSurge]

Not really, it's more Firebase related

[@Abhishek-dp5tc]

@@CognitiveSurge so should I first learn Firebase then come back here? because I can't understand any of the code there

[@CognitiveSurge]

@@Abhishek-dp5tc It'd be good to understand the Firebase parts, but it's not essential to learning React

[@adamtak3128]

Hey did you know VSCode can auto import for you? I no longer have to do the tedious tax of importing. Just write the name of the function/component/thing I want to import and it should appear as the first item in the dropdown.

[@CognitiveSurge]

I think it's called path intellisense, give that ago and let me know if it is!

[@adamtak3128]

@@CognitiveSurge Yeah that's the one I have.

[@CognitiveSurge]

@Adam Tak ahh I read this wrong, yep I do use that but for this video I wanted to show the imports for people 😀

[@unknownman1]

hi, I can't understand what is data-testid used for?

[@CognitiveSurge]

To target these test ids from within the tests, so we can target them and make assertions against

[@unknownman1]

@@CognitiveSurge what do you mean by "within the tests". We can target className so why we used data-testid.

[@unknownman1]

@@CognitiveSurge what do you mean by "within the tests". We can target className so why we used data-testid.

[@JoseFlores-hk1xd]

i'm only about an hour in and im very impressed but im a little curious with the choice of using a ternary expression that is nested about three levels in your custom hook? I'm all about ternary expressions but when its this nested it's a bit hard to process. why not go with an if statement? Just curious...thank you again for making this!

[@CognitiveSurge]

Jose Flores 👋 thank you for the kind words! That’s just personal preference really, I should have used an if statement as it’s a lot easier to read! Feel free to use an if statement 😊

[@pulkitgupta5143]

Did you made any changes during testing the components

[@CognitiveSurge]

I don't think so? Maybe I added a few data test ids

[@Abhishek-dp5tc]

Hey Karl, thanks for this super awesome tutorial, I am starting with this, I am intermediate in React. I have this question that how should I follow this tutorial, code along with you? OR Should I watch this half hour and code that by myself and proceed ahead? or any other way?(so that I recollect and understand better) I want to utilize the best of the knowledge here

[@CognitiveSurge]

Hey! I'd code along and then try modify/add new features once you have finished

[@abuzubaer3083]

i've subscribe your channel ... i'm a beginner developer ... i wish you will make videos for beginners like me.. This video is amazing.. THanks :)

[@CognitiveSurge]

Thanks and welcome :D sorry for the late response, KZbin doesn't process all comments properly sometimes :(

[@Quattr0ff]

Hey Karl, I love this tut. One question. I'm trying to replicate your contexts structure in a project of my own. I have similar hook as your useProjects(), but I'm getting an error saying thet useState and useEffect are called in function which is neither a React function component or a custom react hook function. How come it works for you?

[@CognitiveSurge]

Hey, I think you may have copied it wrong, can you try copy it from my Github and see what happens by debugging that way?

[@Quattr0ff]

@@CognitiveSurge I haven't copied it, I recreated it, and now I know what I did wrong. My hook name did not start with 'use' :)))) Thank you!

[@CognitiveSurge]

Quattr0ff that’s awesome, glad you hear it’s working, those are the types of mistakes I make too 😂

[@CodingPhase]

holy shoot how did you stiched together 7 hours of video

[@CognitiveSurge]

I was closing to going a little crazy but I made it through luckily 😂

[@sus-net]

What vs code extensions are you using, how i can setup global linter like yours? what keyboard and mouse are you using?

[@CognitiveSurge]

MacBook keyboard + MX Master 3 - and I no longer use a global linter, I switched to per project basis

[@johnedwardcortesloboa2450]

Do I need to know react knowledge to do this tutorial? Which are the knowledge requirements?

[@CognitiveSurge]

Yeah, a bit of React knowledge would help you with this tutorial

[@johnedwardcortesloboa2450]

@@CognitiveSurge Thank you

[@hemangchaudhary4700]

Hey Karl! Do we need the firebase blaze plan for this?

[@CognitiveSurge]

Nup, we use the free version

[@Diamonddrake]

What linter are you using? I can’t get the results that you are using prettier

[@CognitiveSurge]

I'm using Airbnb's eslint rules for this video

[@unknownman1]

did you finish the tutorial in 1 day only?

[@CognitiveSurge]

To record this is took I think 2 or 3 days, I initially recorded like 4 hours but then I came back to it about 2 weeks later and finished it off.

[@unknownman1]

@@CognitiveSurge I'm planning to follow this tutorial from tomorrow onwards. Thanks for the video sir❤️❤️ . Hope you and family are staying safe and healthy.

[@unknownman1]

LOl. I've finally decided to follow the video after 1 month.

[@nilmendes7710]

In 2:02:26 → GoPrimitiveDot ( import { GoPrimitiveDot } from "react-icons/go"; )

[@fabianadecassiasilvaaranha5638]

looks a bit better ( import { BsDot } from "react-icons/bs"; )

[@stephenyin3509]

Hello, just wondering does this project have a login system?

[@CognitiveSurge]

It doesn't, but lots of people here have used Firebase Auth to do that

[@yisroelarnson9881]

Thanks so much for this tutorial! It was really helpful. I am creating a react app and using Redux to manage state. Is there a reason that you used react context over redux? I am trying to see which one is better depending on the type of project. Thanks again bro!

[@CognitiveSurge]

No problem! I'm just not a fan of Redux that's all, so I tend to avoid it at all costs - either will work though!

[@quincejoz-bruer9858]

Hello, i have a little issue. When i make a console log, my project are listings in the console, but i cant print them in the projects components (time in the video: 02:07:24 )

[@CognitiveSurge]

Hmm, can you provide more info please I'm a little confused

[@quincejoz-bruer9858]

When i call the component individualProject into Projects component, nothing showing only the style and the color bullet point. But all the projects are showing in the console if i make a console.log('projects', projects)

[@CognitiveSurge]

@@quincejoz-bruer9858 hmm that is strange, if you do a comparison against my Github repo, what are the differences? If we start there we can try figure out what the differences are and see what could be causing this issue

[@quincejoz-bruer9858]

@@CognitiveSurge All right. I'll check it out. And let you know.

[@yazanwidyan9596]

@@CognitiveSurge hi Karl Thanks for the tutorial, I think have the same issue here but with Tasks.js drive.google.com/file/d/1vvgG1neDypxhnwSyKYQJqmQqoNsDuJtw/view?usp=sharing

[@ashishranjan8228]

59:42 can someone explain what exactly is unsubscribe() on line 49 is doing in the cleanup function of the useState hook? Im at 1:11:00 and getting the expected tasks from firebase even when i remove that line.Thanks

[@CognitiveSurge]

Have a look in here in regards to clean up: reactjs.org/docs/hooks-effect.html

[@justkitob]

The best of the best

[@CognitiveSurge]

Thank you!

[@vishalsahoo405]

How to add the login functionality just like the original todoist site? It will be very interesting if authentication is also present.

[@CognitiveSurge]

Firebase has authentication that you can use to login :)

[@vishalsahoo405]

@@CognitiveSurge then we need to pass the users as variable as we used only one user id ??

[@MM-lo9tk]

What's the reasoning behind using "projectid", or "userid" when we have the document id which essentially is supposed to serve the same purpose?

[@CognitiveSurge]

Do you have a timestamp? I did this video quite a long time ago and can't fully remember.

[@fidahussain6366]

does it include backend programming ?

[@CognitiveSurge]

It doesn't, all client-side but Firebase is used

[@bourne101098]

Hi, I have this problem when installing node-sass at 31:10, it will be stuck at rebuilding all packages, any advice?

[@CognitiveSurge]

bourne101098 strange, I’d try removing all node modules and then do an install?

[@bourne101098]

@@CognitiveSurge Didn't work. I think it may be due to the incompatibility with my Node's version and the node-sass, can I know what version of Node are you using?

[@CognitiveSurge]

bourne101098 in this video I’m using the latest node version

[@Vjotaa]

@@CognitiveSurge try to do npm rebuild node-sass

[@sahoosiddharth]

53:00 useTasks is impossible to understand for me, so tough! Help me by elaborating in words. Please. I am on your discord server as well. Help me understand. I don't want to skip these concepts and go further. @Karl Hadwen

[@CognitiveSurge]

Which parts don't you understand? I should be on Discord all this week so I can try to help there, just drop me a message.

[@rofazayn]

Great tutorial, Can I have your vscode theme please, it looks so good!

[@CognitiveSurge]

thanks dude, i think the one in this video is Github Pro

[@rofazayn]

@@CognitiveSurge Thanks man! I searched for Github Pro didn't find any, I found one named Github Plus and it looks like it's the one. Thank again for this tutorial, I've been spamming redux lately, and this video made me fall in love with hooks

[@CognitiveSurge]

@@rofazayn Oh now you're addicted to hooks you'll not be using Redux as much, esp. with Context! I was the same, I was using Redux for a short amount of time, moved onto custom hooks & context, and I've never looked back :D

[@vishnuvnair756]

Hi Karl, I don't know React. But I do know JavaScript. Can I start learning react from this tutorial or should I first go and watch a tutorial that discusses React concepts before building a project with your tutorials?

[@CognitiveSurge]

Try the tutorial and the concepts that don't make sense, try Google and learn the fundamentals of React, it will help a lot

[@vishnuvnair756]

@@CognitiveSurge Thanks Karl for replying. And thank you for such great content❣️

[@kodoku9831]

I hope that you can add subtitle in video in the future, english isn't my native language and i certainlly that there are many other peoples like me. Thannks for your hard works.

[@CognitiveSurge]

I wish someone would help with translations :(

[@kodoku9831]

@@CognitiveSurge i think youtube has auto generate subtitles so you don't take time to this kind of works.

[@vishnuvnair756]

This would have helped us a lot. No need of translations. But if you could just turn on the auto subtitles in English of youtube atleast, it would have been nice.

[@juliuscecilia6005]

I wasn't able to get the html file which displays the file status for integration testing. Do you have to install something for that?

[@juliuscecilia6005]

I'm still able to see the test results in terminal though, but I don't have a separate folder and html file like you do.

[@CognitiveSurge]

Make sure you have turned on HTML for jest code coverage (coverage reporters) in package.json: github.com/karlhadwen/todoist/blob/master/package.json

[@viniciuscardoso5271]

Karl Hadwen first I want to thank you for excellent work with React. I have one doubt, I host this app in github pages and is working but after 1:00:00 hr of a video I updated a app (I send firebase.js to .gitignore too) and I have an error: firebase.initializeApp is not a function do you know why this is happening?

[@CognitiveSurge]

Hey, I'm not entirely sure why this is happening :( can you try compare your code with mine? e.g. replace contents of files and then narrow down the problem.

[@sergiucetulean1797]

Hello Guys, I have a problem, the scss styling is not working properly, when I start the app the browser is not reading all the styles applied, what can I do?

[@CognitiveSurge]

Your SCSS might be wrong, pls join the Discord for help

[@sergiucetulean1797]

@@CognitiveSurge I got the SCSS code from GitHub

[@CognitiveSurge]

Sergiu Cetulean pls join the Discord and myself or someone will be able to help

[@queensfinezt]

I see some one else also got a firebase quota exceeded, they fixed it by removing , "projects" from the useEffect hook on the useProjects custom hook. However, when adding Projects that custom hook wont trigger and the component won rerender. The Project is added tho, by refreshing it shows up again. I thought using memo would be a solution but not sure how to use it. So pretty much has some one fixed the firebase quota exceeded error?

[@CognitiveSurge]

Hey, can you check the code on GitHub? That should give the answers

[@richasharma6586]

can i used this as my college minor project? i am a MCA student.

[@CognitiveSurge]

Yep!

[@kadekeqw23]

useTasks is impossible to understand for me, so complex!

[@CognitiveSurge]

Which particular bit, fire away all the questions and I'll answer.

[@Quattr0ff]

@@CognitiveSurge Could you explain a little what is happening in that "unsubscribe" part? Thanks alot!

[@CognitiveSurge]

@@Quattr0ff Sure, it's a pretty big part but essentially what it's doing is handing back the real-time update to React from Firebase, but we don't want to leave these open and keep creating more and more subscriptions so what we do is we use 'return ()' to clean up. Take a look here for effects with cleanup: reactjs.org/docs/hooks-effect.html - hope that helps!

[@Quattr0ff]

@@CognitiveSurge Appreciate your answer, but I'm having a hard time seeing the logic from the docs on our case. What do you mean by creating more and more subscriptions? If we didn't clean up, would the hook run over and over? And why don't we need to clean up in useProjects? Thanks in advance!

[@CognitiveSurge]

@@Quattr0ff no problem, the reason we don't clean up in useProjects is that we're not subscribing to anything, we're just getting a snapshot, and once we have that we're done.

[@ameenalade5005]

Hi, I noticed that when I run my test I don't get a coverage report like you did and I also dont see any coverage folder can you point me in the right direction? is there something I'm doing wrong?

[@CognitiveSurge]

Hey, did you add the coverage to package.json? Are you using the same dev deps as in the package.json file?

[@hiteshdhake6299]

./src/firebase.js Module not found: Can't resolve 'fireabase/firestore' in ...... this problem face ..... plz solution provide

[@CognitiveSurge]

Do you have that file in the src folder?

[@judyminjichoi575]

has anyone just downloaded firebase and none-sass using "npm install firebase" and "npm install node-sass" instead of writing in the dependency directly? I can't download those specific versions and I was wondering if downloading the latest versions will be okay

[@CognitiveSurge]

I'd say go with the ones in the tutorial if possible, but if you must, try use the latest and fix whatever issues occur