🚀 Learn React by Projects: Build & Test a GitHub User Search App with TailwindCSS 🌟

Published: 01 August 2024
on channel: coding with LuLu

172

Welcome to "Learn React by Projects," your ultimate guide to mastering React through practical, hands-on projects! In this engaging tutorial series, designed for absolute beginners, we'll build a complete GitHub user search application. Along the way, you'll learn how to set up a project, style it with TailwindCSS, manage state with Context API and Reducers, and write comprehensive unit tests.

challenge: https://www.frontendmentor.io/challen...

font: https://fonts.google.com/specimen/Spa...

code source:
starter: https://github.com/luluCodingWizard/u...
section 1: https://github.com/luluCodingWizard/u...
section 2: https://github.com/luluCodingWizard/u...
section 3: https://github.com/luluCodingWizard/u...
section 4: https://github.com/luluCodingWizard/u...
section 5: https://github.com/luluCodingWizard/u...
section 6: https://github.com/luluCodingWizard/u...
section 7: https://github.com/luluCodingWizard/u...
section 8: https://github.com/luluCodingWizard/u...

Timeline:
00:00 requirements & project overview
02:06 section 1: Project Clean up
04:00 add tailwindCSS to create react app project
07:05 section 2: UI structure
07:39 Import Font
09:47 create Header component
12:16 tailwindCSS Configuration
17:10 Switching theme
27:40 section 3: Theme Custom Hook
32:28 section 4: unit test Header Component
41:04 unit test useTheme Custom hook
47:30 section 5: Github user search
01:01:04 section 6: Refactor to Reducer & context Api
01:19:25 section 7: unit test user search Context
01:28:41 unit test User Search component
01:33:57 section 8: Build user details component

By the end of this tutorial, you'll not only have a fully functional GitHub user search app but also a solid understanding of key React concepts and testing practices. Plus, you'll have a beautifully styled app thanks to TailwindCSS.

Make sure to follow along, and don't forget to check out the GitHub repository (link will be added later) for the complete source code.

#LearnReact #ReactTutorial #ReactProjects #GitHubAPI #TailwindCSS #ContextAPI #ReactHooks #WebDevelopment #FrontEndDevelopment #JavaScript #CodingForBeginners #ReactTesting #CreateReactApp #ReactComponents

On this page of the site you can watch the video online 🚀 Learn React by Projects: Build & Test a GitHub User Search App with TailwindCSS 🌟 with a duration of hours minute second in good quality, which was uploaded by the user coding with LuLu 01 August 2024, share the link with friends and acquaintances, this video has already been watched 172 times on youtube and it was liked by 12 viewers. Enjoy your viewing!