CourseFlix

Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)

28h 38m 19s
English
Paid

GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data.

What is Apollo ?

Apollo is the industry-standard GraphQL implementation, providing the data graph layer that connects modern apps to the cloud. Apollo will handle data fetching, caching and state management of out the box!

What is Next.js ?

Next.js is React framework that provides infrastructure and simple development experience  for server side rendered(SSR) application.

  • An intuitive page-based routing system (with support for dynamic routes)

  • Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis

What are we going to build ?

We will work mainly on portfolios features. You will learn how to manage data on the client and the server with Apollo and Graphql. Data will be stored in Mongo Atlas Database to which we will be communicating through the Node JS Server. We will create a functionality to create a portfolio and I will explain you how to easily manage forms. Then we will take a look on an update functionality where I will show you how to populate inputs with existing data. After that will work on a delete functionality. All of the features will be reactive and updating view in real time. You will learn the basics of data fetching and data mutations with Apollo.

Another big feature we will be working on will be session based authentication. We will prepare login and register forms. Users will be able to register, login and experience features only for authenticated users. You will learn how to manage sessions, how to protect the pages, and manage an authentication state through your application.

Forum feature will be the biggest one. You are going to learn how to create fully working forum consisting of topics and posts. We will integrate a component that will be used for topic and posts creation. Users will be able to create various topics, posts and also replies to other posts, all updated in real time and also across the browsers. After that you will learn how to create a fully working pagination!

Later in the course we will create features to get randomised data for home page and I will talk about re-usability. We will finish CV page and we will get into deploying. After all production improvements will be applied we will deploy our application to heroku so anyone on internet can access our portfolio.

Requirements:
  • Basics of React Framework!
  • Fundamentals in HTML and CSS, but isn't must have
Who this course is for:
  • Starting as well as experienced developers interested in Next JS, GraphQL, Apollo
  • This course is for everyone eager to create apps with modern tech stack

What you'll learn:

  • Develop Real-world web application with Next JS, Apollo and Node
  • Create your own portfolio application in most demanded frameworks on the market
  • Grasp full power of GraphQL

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 157 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Project Preview
All Course Lessons (157)
#Lesson TitleDurationAccess
1
Project Preview Demo
02:34
2
How to resolve issues
08:29
3
Section Introduction
02:21
4
Creating the project
27:58
5
Create pages
12:00
6
Creating components!
09:18
7
Get initial props
12:26
8
More pages
09:55
9
Alias for absolute path
06:12
10
Root app component
12:04
11
Get initial props of _app
13:31
12
SSR Explanation
23:40
13
SSR Debugging
22:50
14
Navbar component
12:36
15
Navigation to pages
15:28
16
Section Introduction
02:35
17
GraphQL explanation
14:05
18
GraphQL integration
13:34
19
Portfolio resolvers
15:09
20
Data rework
09:14
21
Fetch portfolios on client
17:16
22
Portfolio card component
06:40
23
Provide parameters in query
04:37
24
Portfolio detail page
08:24
25
Links to portfolios
06:29
26
Server refactoring
04:40
27
Portfolio mutations
13:10
28
Apollo server
09:39
29
Update portfolio - server
13:21
30
Create portfolio
10:36
31
Update portfolio
12:06
32
Delete portfolio
08:24
33
Section Introduction
02:40
34
Apollo client
19:15
35
Get portfolio with Apollo
14:10
36
Get portfolios improvements
07:56
37
Create portfolio improvements
06:23
38
Create portfolio cache
20:41
39
Apollo high order component(HOC)
13:07
40
Apollo HOC with SSR
07:31
41
Update portfolio improvements
06:07
42
Delete portfolio improvements
08:48
43
Refactoring queries and mutations
07:31
44
Apollo dev tools
03:20
45
Mongo Atlas
08:59
46
Gitignore
01:55
47
Mongo DB + Mongoose
07:17
48
Portfolio Model + Fake DB
15:32
49
Populate DB
09:15
50
Get portfolio from DB
03:44
51
Portfolio create, update, delete in DB
16:50
52
GraphQL portfolio model
15:26
53
Separating apollo functions on server
06:12
54
Section introduction
02:27
55
User infrastructure
08:27
56
User mongoose model
11:16
57
Sign Up user
15:01
58
Password hashing
11:42
59
FakeDB populate users
09:39
60
Auth context
15:45
61
Sessions
15:49
62
GraphQL Strategy
13:28
63
Register strategy and debug
22:11
64
Promise in Auth
08:56
65
Find user in DB
13:59
66
Return user from sign in
04:29
67
Password validation
07:44
68
Middlewares
07:53
69
Store sessions with passport
15:41
70
Add sign out
05:24
71
Check if user is authenticated
14:14
72
Section introduction
02:44
73
Sign Up form
15:59
74
React hook form
04:09
75
Sign up user success
15:45
76
Redirect
09:52
77
Handle errors
06:52
78
Handle errors on server
09:44
79
Sign in form
05:02
80
Sign in done
11:34
81
Fetch user from server
07:08
82
Display username in navbar
14:24
83
Fix user after sign in
09:28
84
Sign out
16:18
85
HOC to check if user is authenticated
15:53
86
Check user role
05:17
87
Section introduction
02:34
88
Portfolio new page
08:26
89
Dropdown links + withAuth improvements
12:12
90
Datepicker component
06:11
91
Set dates in datepicker
12:08
92
Disable end date
11:33
93
Finishing create portfolio
14:39
94
Base layout
13:49
95
Handle errors
12:08
96
Check for user role
06:05
97
Section introduction
01:43
98
Instructor dashboard
06:47
99
User portfolio resolver
09:04
100
Fetch user portfolios
14:22
101
Add controls to dashboard
11:34
102
Remove portfolio mutation
09:31
103
Portfolio update form
13:41
104
Update portfolio mutation
11:25
105
Section Introduction
02:14
106
Toast messages
07:36
107
Format dates
11:57
108
Client side fields
12:43
109
Server redirect
16:09
110
Display message on redirect
15:01
111
Dispose message on login
13:30
112
Spinner component
10:30
113
Section Introduction
04:36
114
Add categories to FakeDB
08:20
115
Populate Topics data
07:30
116
Forum categories resolver
09:29
117
Fetch topics by category resolver
13:21
118
Fetch topics by slug changes
06:17
119
Display forum categories
10:19
120
Fetch and display topics
09:39
121
Create topic resolver
16:05
122
Slugify topic
06:18
123
Unique slug
10:32
124
Replier component
15:30
125
Replier improvements
15:07
126
Create topic functionality
10:41
127
Add topic to cache
11:10
128
Fetch topic by slug
17:55
129
Prepare posts data
24:17
130
Fetch posts resolver
14:54
131
Fetch posts
11:06
132
Display posts
18:59
133
Posts improvements
27:39
134
Create post resolver
17:20
135
Create post client side
13:23
136
Section introduction
02:55
137
Pagination component
11:28
138
Fetch more function
14:41
139
Get posts count
11:05
140
Get paginated data from server
14:35
141
Display data for specific page
08:19
142
Persistent pagination
13:23
143
Create post with pagination
20:20
144
Re-pooling data
07:06
145
Section Introduction
01:28
146
Highlight data
19:17
147
Reusable "random" function
08:48
148
Display highlight portfolios
12:53
149
Display topics
17:31
150
CV Page
06:00
151
Section Introduction
01:49
152
Prod base URL
07:54
153
Prod database changes
09:33
154
Prod session setup
06:07
155
Heroku and Git CLI
06:23
156
Deployment to Heroku
13:19
157
Course End + Testing
17:12
Unlock unlimited learning

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

Learn more about subscription

Course content

157 lessons · 28h 38m 19s
Show all 157 lessons
  1. 1 Project Preview 02:34
  2. 2 How to resolve issues 08:29
  3. 3 Section Introduction 02:21
  4. 4 Creating the project 27:58
  5. 5 Create pages 12:00
  6. 6 Creating components! 09:18
  7. 7 Get initial props 12:26
  8. 8 More pages 09:55
  9. 9 Alias for absolute path 06:12
  10. 10 Root app component 12:04
  11. 11 Get initial props of _app 13:31
  12. 12 SSR Explanation 23:40
  13. 13 SSR Debugging 22:50
  14. 14 Navbar component 12:36
  15. 15 Navigation to pages 15:28
  16. 16 Section Introduction 02:35
  17. 17 GraphQL explanation 14:05
  18. 18 GraphQL integration 13:34
  19. 19 Portfolio resolvers 15:09
  20. 20 Data rework 09:14
  21. 21 Fetch portfolios on client 17:16
  22. 22 Portfolio card component 06:40
  23. 23 Provide parameters in query 04:37
  24. 24 Portfolio detail page 08:24
  25. 25 Links to portfolios 06:29
  26. 26 Server refactoring 04:40
  27. 27 Portfolio mutations 13:10
  28. 28 Apollo server 09:39
  29. 29 Update portfolio - server 13:21
  30. 30 Create portfolio 10:36
  31. 31 Update portfolio 12:06
  32. 32 Delete portfolio 08:24
  33. 33 Section Introduction 02:40
  34. 34 Apollo client 19:15
  35. 35 Get portfolio with Apollo 14:10
  36. 36 Get portfolios improvements 07:56
  37. 37 Create portfolio improvements 06:23
  38. 38 Create portfolio cache 20:41
  39. 39 Apollo high order component(HOC) 13:07
  40. 40 Apollo HOC with SSR 07:31
  41. 41 Update portfolio improvements 06:07
  42. 42 Delete portfolio improvements 08:48
  43. 43 Refactoring queries and mutations 07:31
  44. 44 Apollo dev tools 03:20
  45. 45 Mongo Atlas 08:59
  46. 46 Gitignore 01:55
  47. 47 Mongo DB + Mongoose 07:17
  48. 48 Portfolio Model + Fake DB 15:32
  49. 49 Populate DB 09:15
  50. 50 Get portfolio from DB 03:44
  51. 51 Portfolio create, update, delete in DB 16:50
  52. 52 GraphQL portfolio model 15:26
  53. 53 Separating apollo functions on server 06:12
  54. 54 Section introduction 02:27
  55. 55 User infrastructure 08:27
  56. 56 User mongoose model 11:16
  57. 57 Sign Up user 15:01
  58. 58 Password hashing 11:42
  59. 59 FakeDB populate users 09:39
  60. 60 Auth context 15:45
  61. 61 Sessions 15:49
  62. 62 GraphQL Strategy 13:28
  63. 63 Register strategy and debug 22:11
  64. 64 Promise in Auth 08:56
  65. 65 Find user in DB 13:59
  66. 66 Return user from sign in 04:29
  67. 67 Password validation 07:44
  68. 68 Middlewares 07:53
  69. 69 Store sessions with passport 15:41
  70. 70 Add sign out 05:24
  71. 71 Check if user is authenticated 14:14
  72. 72 Section introduction 02:44
  73. 73 Sign Up form 15:59
  74. 74 React hook form 04:09
  75. 75 Sign up user success 15:45
  76. 76 Redirect 09:52
  77. 77 Handle errors 06:52
  78. 78 Handle errors on server 09:44
  79. 79 Sign in form 05:02
  80. 80 Sign in done 11:34
  81. 81 Fetch user from server 07:08
  82. 82 Display username in navbar 14:24
  83. 83 Fix user after sign in 09:28
  84. 84 Sign out 16:18
  85. 85 HOC to check if user is authenticated 15:53
  86. 86 Check user role 05:17
  87. 87 Section introduction 02:34
  88. 88 Portfolio new page 08:26
  89. 89 Dropdown links + withAuth improvements 12:12
  90. 90 Datepicker component 06:11
  91. 91 Set dates in datepicker 12:08
  92. 92 Disable end date 11:33
  93. 93 Finishing create portfolio 14:39
  94. 94 Base layout 13:49
  95. 95 Handle errors 12:08
  96. 96 Check for user role 06:05
  97. 97 Section introduction 01:43
  98. 98 Instructor dashboard 06:47
  99. 99 User portfolio resolver 09:04
  100. 100 Fetch user portfolios 14:22
  101. 101 Add controls to dashboard 11:34
  102. 102 Remove portfolio mutation 09:31
  103. 103 Portfolio update form 13:41
  104. 104 Update portfolio mutation 11:25
  105. 105 Section Introduction 02:14
  106. 106 Toast messages 07:36
  107. 107 Format dates 11:57
  108. 108 Client side fields 12:43
  109. 109 Server redirect 16:09
  110. 110 Display message on redirect 15:01
  111. 111 Dispose message on login 13:30
  112. 112 Spinner component 10:30
  113. 113 Section Introduction 04:36
  114. 114 Add categories to FakeDB 08:20
  115. 115 Populate Topics data 07:30
  116. 116 Forum categories resolver 09:29
  117. 117 Fetch topics by category resolver 13:21
  118. 118 Fetch topics by slug changes 06:17
  119. 119 Display forum categories 10:19
  120. 120 Fetch and display topics 09:39
  121. 121 Create topic resolver 16:05
  122. 122 Slugify topic 06:18
  123. 123 Unique slug 10:32
  124. 124 Replier component 15:30
  125. 125 Replier improvements 15:07
  126. 126 Create topic functionality 10:41
  127. 127 Add topic to cache 11:10
  128. 128 Fetch topic by slug 17:55
  129. 129 Prepare posts data 24:17
  130. 130 Fetch posts resolver 14:54
  131. 131 Fetch posts 11:06
  132. 132 Display posts 18:59
  133. 133 Posts improvements 27:39
  134. 134 Create post resolver 17:20
  135. 135 Create post client side 13:23
  136. 136 Section introduction 02:55
  137. 137 Pagination component 11:28
  138. 138 Fetch more function 14:41
  139. 139 Get posts count 11:05
  140. 140 Get paginated data from server 14:35
  141. 141 Display data for specific page 08:19
  142. 142 Persistent pagination 13:23
  143. 143 Create post with pagination 20:20
  144. 144 Re-pooling data 07:06
  145. 145 Section Introduction 01:28
  146. 146 Highlight data 19:17
  147. 147 Reusable "random" function 08:48
  148. 148 Display highlight portfolios 12:53
  149. 149 Display topics 17:31
  150. 150 CV Page 06:00
  151. 151 Section Introduction 01:49
  152. 152 Prod base URL 07:54
  153. 153 Prod database changes 09:33
  154. 154 Prod session setup 06:07
  155. 155 Heroku and Git CLI 06:23
  156. 156 Deployment to Heroku 13:19
  157. 157 Course End + Testing 17:12

Related courses

Frequently asked questions

What is Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node) about?
GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing…
Who teaches Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)?
Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node) is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)?
Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node) contains 157 lessons with a total runtime of 28 hours 38 minutes. All lessons are available to watch online at your own pace.
Is Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node) free to watch?
Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node) is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node) online?
Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node) is available to watch online on CourseFlix at https://courseflix.net/course/next-js-and-apollo-portfolio-app-w-react-graphql-node. The page hosts every lesson with the integrated video player; no download is required.