English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 23h 46m | 8.50 GB
Instagram Clone: Backend + Frontend + App + Server. NodeJS, Prisma, GraphQL, Hooks, React Native
You implement almost every Instagram function, including taking photos, uploading photos, feeds, searching for channels, likes, following, notifications and sending messages.
Backend for Instagram: NodeJS, Prisma, GraphQL, Passport, Heroku. Instagram frontend and app clones: React, Apollo, React Hooks, React Native, Expo.
What is Clone Coding
Best Way to Learn to Code
We believe that the best way to become a developer is by doing clone coding. It is very easy to get bored and unmotivated in the beginning if all you learn is theory. When we do clone coding we skip the theory and jump right into making useful and beautiful things. Is easy to forget theory, it’s impossible to forget practice. After you take this course you will have a working application that YOU made..
What will you make
Backend + Frontend + App + Server
We are cloning not only frontend but also an app!
We clone core features such as taking a photo, uploading it, browsing the feed, searching, following, and even messaging!
What will you learn
Users
- Email Login
- Facebook Login
- Google Login
- User Profile
- Follow / Unfollow
- Direct Messages
- Log In
- Log Out
Photos
- Search Photo
- Like Photo
- Commet on Photos
- Photo Feed
App
- Navigation
- Camera
Permissions - Media Library
Deployment
- Heroku
- Netlify
en.nomadcoders.co/instaclone
Table of Contents
0.0 What are we building
0.1 Requirements
1.0 Setting up the project
1.1 Creating GraphQL Server
1.2 Setting Up the Server like the Pros
2.0 Introduction to Prisma
2.1 Datamodel with Prisma
2.2 Testing Prisma OMG
2.3 Integrating Prisma in our Server
2.4 Resolvers with Prisma
3.0 Planning the API
3.1 Create Account Resolver
3.2 requestSecret Resolver
3.3 sendMail Function with Nodemailer
3.4 Passport JWT part One
3.5 Passport JWT part Two
3.6 Passport JWT part Three
3.7 toggleLike Resolver part One
3.8 toggleLike and addComment Resolver
3.9 searchUser and searchImage resolver
3.10 follow unfollow Resolver
3.11 editUser seeUser Resolver
3.12 me Resolver + Prisma’s Limitations
3.13 See Full Posts
3.14 Computed Fields in Prisma
3.15 itsMe and amIFollowing Fileds part One
3.16 itsMe and amIFollowing Fileds part Two
3.17 isLiked Computed File
3.18 upload Resolver
3.19 seeFullPost Refactoring
3.20 editPost deletePost Resolver
3.21 deletePost Resolver part Two
3.22 seeFeed Resolver
3.23 sendMessage part One
3.24 sendMessage part Two
3.25 seeRoom Resolver
3.26 Introduction to Subscriptions
3.27 newMessage Subscription part One
3.28 newMessage Subscription part Two
3.29 Conclusions
3.30 Kill The Fragments
4.0 CRA Cleanup and Installation
4.1 GlobalStyles and Theme
4.2 React Router
4.3 Apollo Client
4.4 First Hooks Query
5.0 Auth Route UI part One
5.1 Footer and Auth UI part Two
5.2 Footer and Auth UI part Three
5.3 Auth Form with Hooks
5.4 requestSecret Mutation and Refactor
5.5 Toastify and createAccount Mutation
5.6 createAccount Mutation part Two
5.7 createAccount Mutation part Three
5.8 confirmSecret + Log In Mutation
6.0 Header UI
6.1 Header Logic part One
6.2 Header Logic part Two
7.0 Getting the Feed and Loader Component
7.1 Post Component part One
7.2 Post Component part Two
7.3 Post Component part Three
7.4 toggleLike on Post Component
7.5 createComment on Post Component part One
7.6 createComment on Post Component part Two
8.0 Search Screen Queries
8.1 Search Screen UI Part One
8.2 Search Screen UI Part Two
8.3 Follow Button
8.4 SquarePost Component
9.0 Profile Screen part One
9.1 Profile Screen part Two
9.2 Log Out and Conclusions
10.0 Creating the Project
10.1 Preloading Assets
10.2 Preloading Cache
10.3 Recap
10.4 isLoggedIn part One
10.5 isLoggedIn part Two
10.6 AuthContext part One
10.7 AuthContext part Two
11.0 Introduction To Navigation
11.1 AuthNavigation
11.2 Tabs Navigation
11.3 Photo Navigation
11.4 Messages Navigation part One
11.5 Message Navigation part Two
11.6 Navigation Conclusions
12.0 AuthHome
12.1 Auth Components part One
12.2 Auth Components part Two
12.3 Login part One
12.4 Login part Two
12.5 Login part Three
12.6 Confirm
12.7 Singup
12.8 Facebook Login part One
12.9 Facebook Login part Two
12.10 Google Login
13.0 TabIcons part One
13.1 TabIcons part Two
13.2 TabBar, Styles, Loader
14.0 Apollo Context
14.1 ScrollView and RefreshControl
15.0 Post Component Header
15.1 Post Component Swiper
15.2 Finishing Post Component
15.3 Toggle Like
16.0 Search as HeaderTitle part One
16.1 Search as HeaderTitle part Two
16.2 Search Query
16.3 Search Photo
16.4 Photo Detail
17.0 Profile Screen
17.1 User Detail Screen
17.2 UserProfile Component Styles
17.3 UserProfile Photo Rendering
18.0 Tab Styles
18.1 Select Photo part One
18.2 Select Photo part Two
18.3 Take Photo part One
18.4 Take Photo part Two
18.5 Saving Photo
18.6 Navigating to Upload Photo
18.7 Preparing for Upload
18.8 Uploading to Backend
18.9 Uploading to S3
18.10 Uploading Mutation
18.11 Showing off!
18.12 Messages and Notifications
19.0 Deploying Frontend to Netlify
19.1 Building the Server
19.2 Copying Files
19.3 Deploying to Heroku
19.4 Recap
19.5 Deploying to Heroku part Two
19.6 Deploying Prisma Server
19.7 Deploying Prisma Server part Two + Netlify Fix
20.0 Conclusions
21.0 What are we building
21.1 Apollo Client Subscription Setup
21.2 React Suspense is Awesome!
21.3 Sending Messages and KeyboardAvoidingView
21.4 New Message Subscription
21.5 Push Notifications!
21.6 Conclussions
Resolve the captcha to access the links!