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 человек. В уроках учебника мы шаг за шагом выстраиваем эту архитектуру с применением перечисленных выше технологий.
В этом видео я бегло пройдусь по всем элементам архитектуры.
Где начать учиться?
-
Начните, пожалуйста, на ютюбе. Буду очень признателен подписке, лайкам, комментриям.
-
Ещё курс выложен на самописной платформе. Но позже я эту платформу хочу закрыть, не хочу её поддерживать.
-
И ещё курс выложен бесплатно на степике. Буду также очень признателен отзывам на курсе там.
Автор: iserdmi
