Бесплатное обучение фулстек-разработке веб-сервиса с нуля по видео-урокам с исходным кодом и поддержкой

TLDR. Я примерно год создавал курс из 141 урока. Курс получился хороший, все кто проходят рады и пишут положительные отзывы. Я пытался его продавать, в лучшем случае у меня получалось отбивать рекламу в ноль. Короче, я хороший разработчик, я хорошо доношу материал, но я плохой маркетолог. Все эти таргреты, ретаргеты, воронки, шморонки — тоска унылая. Мне гораздо веселее и понятнее заработать на создании и запуске IT-продуктов, чему я и учу в этом учебнике. Так что пишу эту статью, чтобы сообщить вам о существовании моего курса и предложить всем желающим абсолютно бесплатно получить от него пользу 🙂

Цель обучения — создать проект с нуля, изучив и применив технологии и архитектуру, которые обеспечивают качество и масштабируемость вашего кода, скорость разработки, а также удовольствие и радость от процесса.

Технологии

• React

• TypeScript

• Vite

• Node.js

• pnpm

• Express

• trpc

• PostgreSQL

• Prisma

• Formik

• Zod

• Jest

• Prettier

• ESLint

• Stylelint

• SCSS

• Husky

• React Router

• Cloudinary

• AWS S3

• MJML

• CRON

• Winston

• Balsamiq

• Sentry

• Mixpanel

• Cloudflare

• Docker

• DataDog

• Heroku

Для кого это обучение

Для тех, кто может отличить null от объекта
Я буду обучать вас огромному количеству технологий и тому, как связать их между собой. Но вам нужно уже хоть что-то знать о программировании и вёрстке, потому что я не буду разжёвывать базовые понятия, а буду обучать продвинутым.

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

Кто хочет создавать продукты целиком и полностью
Судьба многих разработчиков сводится к тому, что они приходят на уже давно кем-то как попало начатые продукты, и вынуждены подстраиваться под существующие неудобные архитектуру и стек. Вы же стремитесь самостоятельно создавать продукты целиком, от и до.

Кто учит и как проходит обучение

Учитесь по видео‑учебнику с исходным кодом

В основе обучения лежит учебник из 141 урока. В учебнике освещается процесс создания веб-сервиса, который содержит в себе практически всё, что встречается в каждом IT-продукте: авторизация, формы, роутер, логирование, тесты, деплой, и т.д. Всё это сопровождается исходным кодом и видео-инструкциями. Изучите, скопируйте, адаптируйте под свой или заказной проект.

Образовательная программа

1. Как проходит обучение 14:39

2. Создание графического прототипа 38:47

3. Формирование и оценка бэклога проекта 30:56

4. Установка программ для разработки 3:33

5. Мастеркласс по VSCode 9:45

6. Создание React приложения с помощью Vite 13:35

7. Знакомство с Git и GitHub 15:50

8. HTML теги 8:47

9. React и JavaScript 5:38

10. Автоматическое форматирование кода через Prettier 7:05

11. Создание Node.js приложения на TypeScript 16:54

12. Создание express приложения 4:09

13. Создание эндпоинта, возвращающего JSON 2:12

14. Добавление tRPC в бэкенд 8:38

15. Добавление tRPC во фронтенд 24:33

16. Проверка типов 5:18

17. Создание скриптов для монорепы 11:46

18. Стандартизация стиля TypeScript кода с помощью ESLint 14:10

19. Автоматический вызов Prettier, ESLint и проверки типов при коммите 14:08

20. Стандартизация стиля сообщений в Git коммитах 11:13

21. Добавление React Router 11:14

22. Улучшение типизации React Router 11:53

23. Знакомстов с Lodash, генерация фейкового контента 8:22

24. Знакомство с Zod, создание tRPC процедуры со входными параметрами 6:53

25. Создание Layout компонента общего для всех страниц 2:48

26. Добавлям CSS стили с применением SCSS 27:21

27. Создание очередной страницы веб-приложения 5:21

28. Создание переиспользуемых компонентов 8:53

29. Стандартизация стиля SCSS файлов с помощью Stylelint 5:00

30. Проверка валидности SCSS файлов 3:42

31. Форма: база 7:26

32. Форма: инпут компоненты 7:40

33. Форма: Formik 8:17

34. Форма: валидация 9:48

35. Форма: забота о UX 5:24

36. Форма: Zod валидация 4:28

37. Разделение tRPC бэкенда на отдельные файлы 10:49

38. Автоматическая генерация индекс файла 6:21

39. Добавление tRPC мутации 5:21

40. Переиспользование логики валидации бэка на фронте 2:26

41. Ограничение на импорт кода бэкенда во фронт 3:36

42. Форма: загрузка 3:22

43. Форма: успех 3:43

44. Форма: ошибка 5:36

45. Стили: Input 7:42

46. Стили: Textarea 5:05

47. Компоненты: Alert 4:04

48. Компоненты: Button 3:37

49. Компоненты: FormItems 4:19

50. Поднятие базы данных PostgreSQL 2:58

51. Prisma: подключение базы данных (БД) 10:56

52. Передача клиента Prisma в tRPC контекст 10:18

53. Prisma: поиск по записям БД через Prisma клиент 3:22

54. Prisma: создание записей в БД 2:54

55. Prisma: добавление новых полей в существующую таблицу 7:58

56. Используем superjson для получения даты с бэкенда 8:27

57. Авторизация: модель пользователя + эндпоинт регистрации 5:56

58. Использование инструмента для ручного вызова tRPC эндпоинтов 4:40

59. PostgreSQL: GUI для работы с БД 3:50

60. Авторизация: страница регистрации 8:57

61. Авторизация: эндпоинт для входа 5:34

62. Авторизация: страница для входа 2:40

63. Авторизация как таковая 38:49

64. Environment Variables: backend 8:27

65. Environment Variables: webapp 8:38

66. Авторизация: соль 3:30

67. Авторизация: валидация токена 4:13

68. Prisma: связанные сущности 10:07

69. CRUD: Редактирование сущностей 18:54

70. Форма: создание своей обёртки 26:04

71. Создание контекста клиентского приложения 9:50

72. Создание обёртки для повторяющейся логики страниц веб-приложения 31:55

73. Улучшение типизации обёртки страниц 10:43

74. Добавление страницы 404 2:53

75. Распределение файлов по папкам при увеличении кодовой базы 7:38

76. Редактирование профиля пользователя 14:02

77. Очередное улучшение типизации обёртки страниц 4:31

78. Изменение пароля 10:12

79. Бесконечная подгрузка данных по нажатию кнопки 21:42

80. Бесконечная подгрузка данных при скроле 9:36

81. Делаем загрузку красивой 13:15

82. Более сложные связи сущностей в базе, оптимистический ответ на клиенте 34:37

83. Функционал поиска по базе данных, автоматическая отправка формы 12:58

84. Права пользователей 31:30

85. Установка HTML title на страницы веб-приложения 17:27

86. Добавление favicon 3:51

87. Добавление иконок 5:12

88. Добавление подгружаемых картинок 7:38

89. Добавление встроенных картинок 6:11

90. Prisma: кастомные миграции 9:33

91. E-mail: создание шаблонов с помощью MJML 10:50

92. E-mail: создание и добавление функций в места, где нужна отправка 15:39

93. E-mail: обработка шаблонов с помощью Handlebars 6:11

94. Регистрация домена 6:07

95. E-mail: Подключение домена к Brevo 7:20

96. E-mail: реальная отправка писем с помощью Brevo 10:23

97. Создание опциональных env переменных 6:29

98. Импорт роутов фронта на бэкенд 11:16

99. Делаем обёртку для создания роутов 21:09

100. Вытягиваем общие env переменные для фронта и бэка 6:59

101. CRON: выполнение задач по расписанию 5:38

102. PostgreSQL: написание сложных запросов 20:10

103. MJML + Handlebars: циклы и прочие хелперы 17:40

104. Monorepo: shared workspace 18:17

105. Стэйт-менeджмент веб-приложения 10:09

106. Логирование: добавление логгера 6:21

107. Логирование: стандартизация входных параметров + сериализация ошибок 8:00

108. Логирование: красивый вывод логов во время разработки 9:56

109. Логирование: tRPC бэкенд 10:01

110. Логирование: Prisma 6:07

111. Логирование: фильтрация логов 4:55

112. Логирование: секретные данные 9:32

113. Логирование: Express 2:45

114. Логирование: tRPC клиент 4:58

115. Sentry: отлавливание ошибок веб-приложения 25:53

116. Создание нового типа ошибок ExpectedError 18:31

117. Sentry: sourcemap веб-приложения 12:27

118. Sentry: отлавливание ошибок бэкенда 11:10

119. Sentry: sourcemap бэкенда 9:15

120. Тесты: юнит тесты 28:51

121. Тесты: интеграционные тесты 31:24

122. Тесты: запрет на импорт тестов в основной код 4:57

123. Тесты: переменные окружения 17:45

124. Тесты: мок модулей 26:02

125. Улучшение типизации функций pick & omit 7:50

126. Загрузка изобрежния на Cloudinary 50:16

127. Загрузка нескольких изображений на Cloudinary 18:54

128. Загрузка файла на AWS S3 30:48

129. Загрузка нескольких файлов на AWS S3 7:42

130. Стандартизируем общие env переменные для фронта и бэка 9:03

131. Продуктовая аналитика с помощью Mixpanel 19:15

132. Раздача веб-приложения через бэкенд 9:25

133. Получение переменных окружения фронта с бэкенда 15:13

134. DevOps: Создание Dockerfile, билд имейджа, запуск контейнера 47:53

135. DevOps: Деплой в Heroku 22:30

136. DevOps: Автоматический деплой в Heroku через GitHub Actions 18:52

137. Отправка логов в Datadog 12:51

138. Анализ фронтового бандла 3:29

139. Поддержка старых браузеров 1:38

140. Автоматическое подставление CSS префиксов 3:19

141. Окончание 0:46

Обзор архитектуры и фичей учебного проекта

Залог технического успеха проекта в его архитектуре. Код проекта должен легко поддерживаться и масштабироваться. Архитектура проекта задаётся выбранными технологиями и определением их взаимодействия. Качественно заложенная на старте проекта архитектура определяет качество вашей жизни и кода на протежении всего времени работы над проектом.

Я много раз писал крупные проекты с нуля и понял, как выстроить архитектуру лучшим образом для проектов с командой от 1 до 3 человек. В уроках учебника мы шаг за шагом выстраиваем эту архитектуру с применением перечисленных выше технологий.

В этом видео я бегло пройдусь по всем элементам архитектуры.

Где начать учиться?

1. Начните, пожалуйста, на ютюбе. Буду очень признателен подписке, лайкам, комментриям.

2. Ещё курс выложен на самописной платформе. Но позже я эту платформу хочу закрыть, не хочу её поддерживать.

3. И ещё курс выложен бесплатно на степике. Буду также очень признателен отзывам на курсе там.