Build the BEST Instagram Clone with Tailwind CSS, React, Apollo client and Laravel - Part 2/2
In this video, we'll finish this awesome Instagram clone, you won't find anything like this on Youtube or even a paid course on the Internet. This is a full stack project created from scratch, the two videos of the series combined are 8+ hours of content! Here we'll create some more React components and create the GraphQL API using Laravel Lighthouse, and consume it with Apollo Client. We'll also implement some other cool libraries like React Toastify, Headless UI and Apollo Upload File + React Dropzone for file uploads, this is a great full stack project to learn and improve your Tailwind CSS, React and GraphQL skills and to add to your portfolio if you are just starting as a web developer or you want to become a full stack developer. This is the second and final part of the Instagram clone project series, .
00:00:00 - Introduction
00:00:48 - Install React Router
00:06:00 - Install Headless UI and create Dropdown Menu and Modals
00:08:00 - Create Dropdown Menu in the navbar
00:25:59 - Create Modals
01:32:00 - Create the Login page
01:48:13 - Create the Edit Profile page
02:01:35 - Create the Settings page
02:21:53 - Install Laravel with Sail and Docker
02:25:17 - Install Laravel Lighthouse
02:27:02 - Update the config/lighthouse.php file to authenticate with sanctum
02:27:45 - Install Laravel Graphql Playground
02:29:29 - Create migration to update the users table
02:32:55 - Update the User factory class
02:36:00 - Update the User Seeder class
02:39:12 - Create new models: Post, PostComment, UserFollower and PostLike
02:40:20 - Generate the Post model, migration, factory and seeder classes
02:49:00 - Generate the PostComment model, migration, factory and seeder classes
02:55:40 - Generate the PostLike model, migration, factory and seeder classes
02:58:40 - Generate the UserFollower model, migration, factory and seeder classes
03:03:47 - Add more relationships to the models
03:06:38 - Update the schema.graphql (add new types)
03:14:01 - Create the Login mutation
03:21:25 - Create the Like mutation
03:25:30 - Create the Unlike mutation
03:28:13 - Create the Follow mutation
03:32:09 - Create the Unfollow mutation
03:34:40 - Create the AddComment mutation
03:37:14 - Create the UpdateUser mutation
03:42:53 - Create the AddPost mutation
03:48:00 - Create GraphQL queries ( me, posts, post, suggestions, feed, stories and highlights)
03:59:00 - Create the Logout mutation
04:02:00 - Install Apollo Client and apollo upload client
04:04:49 - Update the cors.php file to fix cors errors
04:05:24 - Connect the login mutation
04:16:00 - Get data from the api for the feed
04:20:20 - Update the Post component to show data from GraphQL
04:26:00 - Get current user data from the api
04:34:32 - Show comments in the comments section
04:42:48 - Like and unlike posts
04:52:25 - Add comments to posts
04:59:29 - Show data from the api in the post modal
05:07:42 - Update the Navbar and upload posts
05:46:51 - Update the Profile page to get data from the api
06:01:49 - Update the Edit Profile page
06:07:38 - Install React Toastify
06:14:06 - Redirect to login for pages that require authentication
06:17:00 - Implement logout functionality
06:21:35 - Get data for the Suggestions section and create Follow component
06:26:00 - Ending
*Need help?*
👾 Discord ➜ / discord
Part 1 (previous video) ➜ • Build the BEST Instagram Clone with T...
Repo ➜ https://github.com/gigo6000/instagram...
Newsletter ➜ http://eepurl.com/dGyT0L
Patreon ➜ / carlosmafla
Instagram ➜ / gigo6000
Twitter ➜ / gigo6000
Github ➜ https://www.github.com/gigo6000/
#tailwindcss #react #instagram
Смотрите видео Build the BEST Instagram Clone with Tailwind CSS, React, Apollo client and Laravel - Part 2/2 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Carlos Mafla 31 Август 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,27 раз и оно понравилось 2 людям.