React Project Tutorial for Beginners (Hooks, Context API, Tailwind, TypeScript, Authentication)

Video Description

👉 IMPORTANT: Sign up for Kinde authentication here: https://bit.ly/3QOe1Bh (paid sponsorship). Disclaimer: this is a sponsored video (paid). It's your responsibility to evaluate safety, accuracy and other relevant parts of the reviewed product. 👉 NEW React & Next.js Course: https://bytegrad.com/courses/professional-react-nextjs Final code: https://github.com/ByteGrad/todo-app Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). 👉 NEW React & Next.js Course: https://bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: https://bytegrad.com/courses/professional-javascript 👉 Professional CSS Course: https://bytegrad.com/courses/professional-css 👉 Web development roadmap 2024 & 2025: https://email.bytegrad.com 👉 Email newsletter (BIG update soon): https://email.bytegrad.com 👉 Discord: all my courses have a private Discord ⏱️ Timestamps: 00:00 Intro 02:10 Project setup 04:12 Fresh React app look-around 12:25 Tailwind CSS setup 16:52 Google font 19:54 Kinde setup 21:33 Creating components + styling with Tailwind 59:43 Reusable button component 1:03:50 Props 1:15:15 List / map (initial todos) 1:31:05 Manipulate styling (line-through) 1:33:25 useState hook (toggle, delete) 2:10:18 Event bubbling 2:13:45 Counter (prop drilling) 2:27:07 Add todo 2:29:08 Controlled input 2:35:38 Conditional rendering (empty state) 2:39:15 Restrict functionality for guest users 2:42:05 Better app structure 2:56:43 TypeScript in React 3:26:00 State management: State / derived state / event handlers 3:33:40 Folder structure: lib folder (types) 3:35:15 Context API for state management 4:03:45 Custom hook (for Todos Context) 4:10:02 useEffect: Data fetching in React 4:17:20 useEffect: Persist data in localStorage 4:32:12 Add authentication 4:50:21 Deploy to Vercel 4:54:07 Build (npm run build) 5:02:49 Outro #webdevelopment #reactjs #nextjs Note that my videos may contain mistakes. Always verify yourself that your code is safe and does what you want it to do for your specific situation. You agree by watching the videos that you are solely responsible for any mistakes in your code. This channel and all its content is owned & operated by ByteGrad Sp. z o.o. with Tax ID: PL6762676561 . . TOP resource to LEARN AI for Developers - https://datacamp.pxf.io/RGyxrR (paid sponsorship & ByteGrad Sp. z o.o. gets commission)