Главная страницаКатегория graphqlNext.js и Apollo - приложение портфолио (с React, GraphQL, Node)

Next.js и Apollo - приложение портфолио (с React, GraphQL, Node)

Name: Next.js и Apollo - приложение портфолио (с React, GraphQL, Node)
Price: 12.5 USD
Rating: 4.4 (57 reviews)

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

udemy

★4.4 (всего оценок - 57)

Продолжительность

28 ч 38 мин

Категория

GraphQL

Количество уроков

157 Видео

Дата добавления

8 мая 2020 г., 17:53

Язык

Английский

Дата выхода

1 мая 2020 г., 20:43

Дата обновления

29 апр. 2026 г., 07:47

Хотите создать современное, производительное и гибкое веб‑приложение? В этом курсе вы шаг за шагом освоите Next.js, Apollo и GraphQL, а также научитесь строить полноценный backend на Node.js. Вы создадите профессиональное портфолио‑приложение, включающее авторизацию, работу с базой данных, создание и управление контентом, форум и развертывание.

Основные технологии курса

GraphQL — быстрая и гибкая работа с данными

GraphQL — это язык запросов для API и серверная среда выполнения, позволяющая эффективно получать именно те данные, которые нужны приложению. Он не привязан к конкретной БД и идеально подходит для современных веб‑приложений.

Apollo — стандарт индустрии для GraphQL

Apollo упрощает управление данными, предоставляя кэширование, извлечение, мутации и управление состоянием «из коробки». Вы научитесь использовать Apollo как на клиенте, так и на сервере.

Next.js — мощный фреймворк на базе React

Next.js обеспечивает быструю разработку, серверный рендеринг (SSR), статическую генерацию (SSG) и удобную маршрутизацию. Его возможности идеально подходят для портфолио и проектов с высокой производительностью.

Маршрутизация на основе файловой структуры
Поддержка SSR, SSG и ISR для отдельных страниц
Превосходная оптимизация и готовность к продакшену

Что вы создадите в рамках курса

Полноценное портфолио‑приложение

Вы научитесь управлять данными на клиенте и сервере, используя Apollo и GraphQL. В ходе разработки вы:

настроите подключение к MongoDB Atlas через Node.js сервер;
создадите функционал создания, редактирования и удаления портфолио;
научитесь заполнять формы существующими данными и обновлять UI в реальном времени;
поймёте основы мутаций и запросов в Apollo Client.

Аутентификация на основе сессий

Пользователи смогут регистрироваться, входить в систему и получать доступ к защищённым функциям. Вы узнаете:

как организовать сессионную аутентификацию;
как защищать страницы и маршруты;
как управлять состоянием авторизации во всём приложении.

Форум с темами и сообщениями

Самая объёмная часть курса — разработка форума с поддержкой тем, сообщений и ответов. Реализация включает:

создание и обновление тем и постов в реальном времени;
синхронизацию данных между разными окнами и браузерами;
организацию вложенных ответов;
реализацию удобной пагинации.

Дополнительные темы курса

Работа со случайными данными и переиспользование логики

Вы научитесь создавать функции для генерации контента, оптимизировать код и повышать переиспользуемость компонентов.

Финальная страница резюме

Курс включает разработку страницы резюме, где вы соберёте ключевую информацию о себе и структуре проекта.

Развертывание на Heroku

После оптимизации проекта под продакшен вы выполните развертывание на Heroku, чтобы ваше приложение стало доступно всем пользователям сети.

Итог

Курс идеально подойдёт разработчикам, которые хотят прокачать навыки работы с GraphQL, Next.js и Apollo, создавая полноценное, современное и продакшен‑готовое приложение.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

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

Автор - udemy

udemy

Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.

+198

Комментарии

sashka
8 янв. 2022 г., 19:44
Приветствую, не могли бы обновить архив, там все файлы от 8.05.2020
webuxmotion
18 сент. 2021 г., 22:18
Есть еще курсы от этого автора?
webuxmotion
29 нояб. 2020 г., 16:38
Курс замечательный
Anonymous
21 нояб. 2020 г., 14:40
Обновите, пожалуйста, курс. Он использует устаревшие версии Apollo. И если ты делаешь по документации новой версии Аполло+по видео, вылезают warnings с ошибками с проблемами кэша. Думаю в новой версии он много багов уже пофиксил.
webuxmotion Anonymous
29 нояб. 2020 г., 16:37
Там версия аполло клиента 2 используется
А актуальная уже 3 версия.
Разница небольшая, например здесь gql импортируется из apollo-boost - https://github.com/webuxmotion/next-cv/blob/main/apollo/queries/index.js
А здесь (3 версия) из @apollo/client - https://github.com/webuxmotion/pereverziev/blob/main/apollo/queries/index.js
Anonymous webuxmotion
6 дек. 2020 г., 08:09
там ошибки жёсткие вылетают, и тут даже дело не в том откуда импортируется
Victor Anonymous
1 апр. 2021 г., 07:47
Нет никаких ошибок, если импортировать из правильных мест.
Т.к. версия Apollo на сайте более новая, чем в курсе, надо большинство импортировать из @apollo/client
import { gql, useQuery, useMutation, ApolloClient, ApolloProvider, createHttpLink, InMemoryCache } from '@apollo/client';
за исключением:
import { getDataFromTree } from "@apollo/client/react/ssr";
iad
4 авг. 2020 г., 13:20
Курс понравился, не понятно - за что минусуют, и куда делить все комментарии.