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

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).

👉 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

[losVamonos]

I've been through a lot of tutorials and my man here is clear and concise with his explanations, no time wasted, efficient on time. A+

[derkaiser]

I love this guy, very clear and understandable tutorials to follow, awesome quality, useful resources and thorough explanation of the basic concepts. Fantastic!

[shahzaibkhan]

Sir, you explained everything. You just cleared our doubts. You are the true teacher. Love you from Pakistan 🎉

[christobongende]

It's a cool tutorial I really like your tips on best practices and architectural structures in the project!
thank you man!

[viniciusm.m.]

Awesome!
Obrigado, meu irmão!
God bless you!

[cedthedev]

For a web app (think dashboard where a user frequently updates/views data), would vanilla React or Next.js be better?

[shahrozahmed]

similar video with next js. api routes, server actions, caching, optimistic UI, pagination, context API, CRUD

[Soap_js]

would love to see React Native Projects

[improving_cow]

Nice, once I'll be sober from bhang, I'll re-watch it. Please remind me after 12 hours someone that I've to watch this video

[CoinD]

Hi there! This tutorial is great. Super informative. As I was trying to use kind. Specifically at 4:43:34 I have my code and setup done the same way. Our Kinde steps are a little different, but I still got to where it made sense that I would see the same thing you do. However, it is giving me "Failed to fetch" errors therefore it cant prove my signing. Is anyone else getting this error/know a solution? plz lmk.

[dreamsachiever]

wow a 2050 project. see you in the future

[FaridDiraf-lb]

The most challenging parts for me have been all these hex colors, loool 😅

[ombieautopilot]

Do you think it's enough to get a junior developer role? If I know everything well from this video.