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

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