Build a Contact List App with React and Tailwind CSS

In this short course, 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/tailwind-react-setup Link to the final codebase: https://github.com/ebenezerdon/react-contact-list link to the project board: https://github.com/ebenezerdon/react-contact-list/projects/1 link to random user API: https://randomuser.me/

Follow me on Twitter @ https://twitter.com/ebenezerDN Follow me on GitHub: https://github.com/ebenezerdon Message me on LinkedIn: https://linkedin.com/in/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! ... https://www.youtube.com/watch?v=3g42k_JVqI4