CF

Instagram Clone Coding 3.0

20h 48m 39s
English
Paid

This course guides you as you build a full Instagram clone. You create the backend, the frontend, and the mobile app. You work with NodeJS, Prisma, GraphQL, React, and React Native. You add features like photo upload, photo feed, search, likes, follows, messages, and alerts.

What You Build

You build a backend with NodeJS, Prisma, GraphQL, Passport, and Heroku. You also build the web and mobile apps with React, Apollo, React Hooks, React Native, and Expo.

Before You Start

  • You should know JavaScript well.
  • You need basic React and React Native skills.
  • You should know the basics of GraphQL.

About the Author: Nomad Coders

Nomad Coders thumbnail

Nomad Coders is a Korean-origin online coding school founded by Nicolas Serrano (Nico). The school is one of the largest in the Korean developer-education market and has expanded internationally, publishing courses in both Korean and English that emphasise project-based learning across modern web and mobile stacks.

The CourseFlix listing carries eight Nomad Coders courses covering React, React Native, Next.js, NestJS, Twitter / Instagram clones, and the surrounding ecosystem (auth, real-time updates, deployment). Material is paid and aimed at developers who learn best from building complete applications end-to-end rather than studying frameworks in isolation.

Watch Online 139 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 139 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Welcome!
All Course Lessons (139)
#Lesson TitleDurationAccess
1
Welcome! Demo
02:03
2
#2.1 Requirements
02:13
3
#3.0 Setup
05:01
4
#3.1 Apollo Server
06:45
5
#3.2 Babel
08:25
6
#3.3 POC API
09:29
7
#3.4 Prisma Setup
09:25
8
#3.5 Prisma Migrate
11:42
9
#3.6 Prisma Client
11:18
10
#3.7 Prisma Client part Two
07:14
11
#3.8 Prisma Studio
03:34
12
#3.9 Architecture part One
08:53
13
#3.10 Architecture part Two
08:52
14
#3.11 Dotenv
04:23
15
#3.12 Recap
08:21
16
#4.0 Create Account part On
10:27
17
#4.1 Create Account part Two
10:52
18
#4.2 Create Account part Three
12:57
19
#4.3 seeProfile
07:38
20
#4.4 login
11:03
21
#4.5 login part Two and Refactor
12:29
22
#4.6 Divide and Conquer
06:38
23
#4.7 updateProfile
11:37
24
#4.8 authentication part One
07:45
25
#4.9 authentication part Two
09:39
26
#4.10 authentication part Three
10:30
27
#4.11 Protecting Resolvers part One
06:20
28
#4.12 Protecting Resolvers part Two
12:51
29
#4.13 Recap
09:59
30
#4.14 File Upload part One
08:34
31
#4.15 File Upload part Two
09:18
32
#4.16 File Upload part Three
07:23
33
#4.17 File Upload part Four
09:08
34
#4.18 Ejecting from Apollo Server
06:28
35
#4.19 Changing Avatar
11:36
36
#4.20 Followers part One
08:00
37
#4.21 Following User
08:31
38
#4.22 Unfollow User and See Followers
13:53
39
#4.23 Followers Pagination part One
12:15
40
#4.24 Followers Pagination part Two
06:03
41
#4.25 Following Pagination
11:57
42
#4.26 Computed Fields part One
12:51
43
#4.27 Computed Fields part Two
10:16
44
#4.28 Computed Fields part Three
06:40
45
#4.29 Searching Users
07:19
46
#5.0 TS Setup part One
07:59
47
#5.1 TS Setup part Two
09:08
48
#6.0 Photos Model
07:59
49
#6.1 Prisma Fields vs SQL Fields
03:20
50
#6.2 Upload Photo part One
11:56
51
#6.3 Upload Photo part Two
09:12
52
#6.4 Upload Photo part Three
09:04
53
#6.5 seePhoto
07:41
54
#6.6 seeHashtag
14:40
55
#6.7 editPhoto part One
11:10
56
#6.8 editPhoto part Two
10:12
57
#6.9 Like Unlike Photos
11:13
58
#6.10 Like Unlike Photos part Two
07:10
59
#6.11 seeLikes
06:26
60
#6.12 seeFeed
06:57
61
#6.13 Comment on Photos
11:57
62
#6.14 See Photo Comments
07:56
63
#6.15 isMine
04:32
64
#6.16 Delete Comment and Photos
08:14
65
#6.17 editComment
08:05
66
#6.18 protectedResolver Refactor
07:48
67
#6.19 S3 Photo Upload
09:26
68
#6.20 S3 Photo Upload part Two
10:35
69
#6.21 S3 Photo Upload part Three
05:39
70
#7.0 Introduction
03:51
71
#7.1 Models
04:42
72
#7.2 seeRooms
06:27
73
#7.3 sendMessage
12:51
74
#7.4 seeRoom
09:39
75
#7.5 readMessage
11:24
76
#7.6 Super Test
06:40
77
#7.7 Subscriptions Setup part One
10:31
78
#7.8 Subscriptions Setup part Two
12:32
79
#7.9 Filtering Subscriptions part One
06:54
80
#7.10 Filtering Subscriptions part Two
06:10
81
#7.11 Authenticating Subscriptions
15:52
82
#7.12 Recap
08:30
83
#8.0 Create React App
05:04
84
#8.1 Installing All
06:09
85
#8.2 What Does Setup Mean?
02:49
86
#8.3 Router Setup part One
10:30
87
#8.4 Router Setup part Two
10:23
88
#8.5 Auth POC
06:34
89
#8.6 Reactive Variables
08:51
90
#8.7 Introduction to Styled Components
12:18
91
#8.8 Themes on Styled Components
07:34
92
#8.9 GlobalStyles on Styled Components
06:24
93
#9.0 Styled Components
08:28
94
#9.1 React Hook Form
04:43
95
#9.2 GraphQL
12:47
96
#10.0 Introduction
02:48
97
#10.1 Login UI Clone
18:41
98
#10.2 Cleaning Login Code
13:51
99
#10.3 Shared Components
19:02
100
#10.4 Sign Up UI
08:30
101
#10.5 Forms in React
07:37
102
#10.6 Helmet Component
04:11
103
#10.7 React Hook Form
12:14
104
#10.8 React Hook Form is Awesome
14:33
105
#10.9 Apollo Client
04:29
106
#10.10 Login part One
09:27
107
#10.11 Login part Two
10:50
108
#10.12 Create Account
14:24
109
#10.13 Redirecting Users
08:02
110
#10.14 Dark Mode
08:25
111
#11.0 Header and Layout
08:12
112
#11.1 Header part Two
10:25
113
#11.2 Header part Three
12:17
114
#11.3 Avatar
08:35
115
#11.4 Photo Component part One
10:33
116
#11.5 Photo Component part Two
12:00
117
#11.6 isLiked
07:06
118
#11.7 Liking Photos
10:51
119
#11.8 Refetching Queries
06:53
120
#11.9 writeFragment
07:41
121
#11.10 readFragment
08:04
122
#11.11 Comments part One
11:32
123
#11.12 Comments part Two
10:31
124
#11.13 Parsing Hashtags
12:03
125
#11.14 Parsing Hashtags part Two
12:19
126
#11.15 cache Modify
05:11
127
#11.16 Create Comment part One
06:45
128
#11.17 Create Comment part Two
12:23
129
#11.18 Create Comment part Three
08:00
130
#11.19 Delete Comment
12:18
131
#12.0 useParams
08:41
132
#12.1 Queries and Fragments
11:27
133
#12.2 keyFields
08:43
134
#12.3 Follow Unfollow part One
04:50
135
#12.4 Follow Unfollow part Two
12:34
136
#12.5 Follow Unfollow part Three
08:57
137
#12.6 Follow Unfollow part Four
09:50
138
#12.7 Follow Unfollow part Five
04:40
139
#12.8 Web Conclusions
02:43
Unlock unlimited learning

Get instant access to all 138 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What prerequisites are needed before enrolling in this course?
Before enrolling, you should have a good understanding of JavaScript and basic skills in React and React Native. Additionally, knowing the basics of GraphQL will be helpful as the course includes building a backend using these technologies.
What will I build during the course?
You will build a full Instagram clone, comprising a backend, a frontend, and a mobile app. The backend is built using NodeJS, Prisma, GraphQL, Passport, and Heroku. The web and mobile apps are developed using React, Apollo, React Hooks, React Native, and Expo.
Who is the target audience for this course?
This course is suitable for developers who are comfortable with JavaScript and have basic knowledge of React, React Native, and GraphQL. It is ideal for those looking to create full-stack applications and gain experience with a variety of modern web development tools.
How does this course differ from similar courses?
Unlike some courses that focus solely on frontend or backend development, this course provides a comprehensive learning experience by guiding you to build both the backend and frontend of an application, including a mobile app. It covers a wide range of tools such as NodeJS, Prisma, React, and React Native, providing a holistic view of full-stack development.
What specific tools and platforms are used in the course?
The course utilizes a variety of tools and platforms including NodeJS, Prisma, GraphQL for backend development and React, Apollo, React Hooks, React Native, and Expo for frontend and mobile app development. Deployment is handled using Heroku.
What topics are not covered in this course?
The course does not cover the basics of JavaScript, React, React Native, or GraphQL. It assumes prior knowledge in these areas. Additionally, topics such as advanced database management or alternative backend frameworks are not part of the curriculum.
How much time should I expect to commit to this course?
The course consists of 139 lessons. While the exact runtime isn't specified, students should prepare to dedicate a substantial amount of time to get through all materials, including practical coding exercises and deploying the completed project.