React and Tailwind CSS Tutorial | Build a Contact List App
In this short Tailwind CSS tutorial, we'll learn how to build a contact list app with React, hooks and Tailwind CSS. We'll also learn how to work with APIs in React with the react-fetch-hook npm package. The prerequisite for this course is knowledge of React and React hooks.
Link to tailwind setup repo: https://github.com/ebenezerdon/tailwi...
Link to the final codebase: https://github.com/ebenezerdon/react-...
link to the project board: https://github.com/ebenezerdon/react-...
link to random user API: https://randomuser.me/
Follow me on Twitter @ / ebenezerdn
Follow me on GitHub: https://github.com/ebenezerdon
Message me on LinkedIn: / ebenezerdon
00:00:00 - Intro
00:00:53 - What we’ll be building
00:04:31 - Setting up our React app
00:05:16:23 - Setting up Tailwind CSS with React
00:08:04 - How to learn Tailwind CSS
00:11:28 - Refresher - What we’ll be building
00:12:14 - Creating our contact card component
00:15:22 - Creating and styling the search input field with Tailwind CSS
00:17:55 - Creating and styling our contact card with Tailwind CSS
00:21:51 - Styling our image with Tailwind CSS
00:23:04 - Creating and styling the contact details with Tailwind CSS
00:28:34 - Working with Responsive Grids in Tailwind CSS
00:32:18 - Fetch data from our API with the react-fetch-hook
00:36:37 - Working with the React useState and useEffect hooks
00:39:52 - Populating contact cards with our contact list data
00:42:14 - Accessing individual data from contactList
00:45:02 - Filtering through our data
00:52:56 - Displaying a message when no data matches user search
00:54:11 - Your turn - Extending our app
00:57:27 - Wrapping up!
#webdevelopment #programming #softwareengineering #tailwindcss