1gr14/игрич/
  • Фулстек-разработка веб-сервиса на TypeScript, Reaсt, Node.js (2023)
    • Как проходит обучение
    • Создание графического прототипа
    • Формирование и оценка бэклога проекта
    • Установка программ для разработки
    • Мастеркласс по VSCode
    • Создание React приложения с помощью Vite
    • Знакомство с Git и GitHub
    • HTML теги
    • React и JavaScript
    • Автоматическое форматирование кода через Prettier
    • Создание Node.js приложения на TypeScript
    • Создание express приложения
    • Создание эндпоинта, возвращающего JSON
    • Добавление tRPC в бэкенд
    • Добавление tRPC во фронтенд
    • Проверка типов
    • Создание скриптов для монорепы
    • Стандартизация стиля TypeScript кода с помощью ESLint
    • Автоматический вызов Prettier, ESLint и проверки типов при коммите
    • Стандартизация стиля сообщений в Git коммитах
    • Добавление React Router
    • Улучшение типизации React Router
    • Знакомстов с Lodash, генерация фейкового контента
    • Знакомство с Zod, создание tRPC процедуры со входными параметрами
    • Создание Layout компонента общего для всех страниц
    • Добавлям CSS стили с применением SCSS
    • Создание очередной страницы веб-приложения
    • Создание переиспользуемых компонентов
    • Стандартизация стиля SCSS файлов с помощью Stylelint
    • Проверка валидности SCSS файлов
    • Форма: база
    • Форма: инпут компоненты
    • Форма: Formik
    • Форма: валидация
    • Форма: забота о UX
    • Форма: Zod валидация
    • Разделение tRPC бэкенда на отдельные файлы
    • Автоматическая генерация индекс файла
    • Добавление tRPC мутации
    • Переиспользование логики валидации бэка на фронте
    • Ограничение на импорт кода бэкенда во фронт
    • Форма: загрузка
    • Форма: успех
    • Форма: ошибка
    • Стили: Input
    • Стили: Textarea
    • Компоненты: Alert
    • Компоненты: Button
    • Компоненты: FormItems
    • Поднятие базы данных PostgreSQL
    • Prisma: подключение базы данных (БД)
    • Передача клиента Prisma в tRPC контекст
    • Prisma: поиск по записям БД через Prisma клиент
    • Prisma: создание записей в БД
    • Prisma: добавление новых полей в существующую таблицу
    • Используем superjson для получения даты с бэкенда
    • Авторизация: модель пользователя + эндпоинт регистрации
    • Использование инструмента для ручного вызова tRPC эндпоинтов
    • PostgreSQL: GUI для работы с БД
    • Авторизация: страница регистрации
    • Авторизация: эндпоинт для входа
    • Авторизация: страница для входа
    • Авторизация как таковая
    • Environment Variables: backend
    • Environment Variables: webapp
    • Авторизация: соль
    • Авторизация: валидация токена
    • Prisma: связанные сущности
    • CRUD: Редактирование сущностей
    • Форма: создание своей обёртки
    • Создание контекста клиентского приложения
    • Создание обёртки для повторяющейся логики страниц веб-приложения
    • Улучшение типизации обёртки страниц
    • Добавление страницы 404
    • Распределение файлов по папкам при увеличении кодовой базы
    • Редактирование профиля пользователя
    • Очередное улучшение типизации обёртки страниц
    • Изменение пароля
    • Бесконечная подгрузка данных по нажатию кнопки
    • Бесконечная подгрузка данных при скроле
    • Делаем загрузку красивой
    • Более сложные связи сущностей в базе, оптимистический ответ на клиенте
    • Функционал поиска по базе данных, автоматическая отправка формы
    • Права пользователей
    • Установка HTML title на страницы веб-приложения
    • Добавление favicon
    • Добавление иконок
    • Добавление подгружаемых картинок
    • Добавление встроенных картинок
    • Prisma: кастомные миграции
    • E-mail: создание шаблонов с помощью MJML
    • E-mail: создание и добавление функций в места, где нужна отправка
    • E-mail: обработка шаблонов с помощью Handlebars
    • Регистрация домена
    • E-mail: Подключение домена к Brevo
    • E-mail: реальная отправка писем с помощью Brevo
    • Создание опциональных env переменных
    • Импорт роутов фронта на бэкенд
    • Делаем обёртку для создания роутов
    • Вытягиваем общие env переменные для фронта и бэка
    • CRON: выполнение задач по расписанию
    • PostgreSQL: написание сложных запросов
    • MJML + Handlebars: циклы и прочие хелперы
    • Monorepo: shared workspace
    • Стэйт-менeджмент веб-приложения
    • Логирование: добавление логгера
    • Логирование: стандартизация входных параметров + сериализация ошибок
    • Логирование: красивый вывод логов во время разработки
    • Логирование: tRPC бэкенд
    • Логирование: Prisma
    • Логирование: фильтрация логов
    • Логирование: секретные данные
    • Логирование: Express
    • Логирование: tRPC клиент
    • Sentry: отлавливание ошибок веб-приложения
    • Создание нового типа ошибок ExpectedError
    • Sentry: sourcemap веб-приложения
    • Sentry: отлавливание ошибок бэкенда
    • Sentry: sourcemap бэкенда
    • Тесты: юнит тесты
    • Тесты: интеграционные тесты
    • Тесты: запрет на импорт тестов в основной код
    • Тесты: переменные окружения
    • Тесты: мок модулей
    • Улучшение типизации функций pick & omit
    • Загрузка изобрежния на Cloudinary
    • Загрузка нескольких изображений на Cloudinary
    • Загрузка файла на AWS S3
    • Загрузка нескольких файлов на AWS S3
    • Стандартизируем общие env переменные для фронта и бэка
    • Продуктовая аналитика с помощью Mixpanel
    • Раздача веб-приложения через бэкенд
    • Получение переменных окружения фронта с бэкенда
    • DevOps: Создание Dockerfile, билд имейджа, запуск контейнера
    • DevOps: Деплой в Heroku
    • DevOps: Автоматический деплой в Heroku через GitHub Actions
    • Отправка логов в Datadog
    • Анализ фронтового бандла
    • Поддержка старых браузеров
    • Автоматическое подставление CSS префиксов
    • Окончание
  • Меню
    • Главная
    • Start0
    • Поддержать
    • Обучение
    • Группа
    • Блог
    • Автор
  • Сообщество
    • Discord
    • Telegram
  • Опенсорс
    • Point0
    • Route0
    • Error0
    • Flat
    • Agents Party
  • Аккаунт
    • Войти
    • Регистрация
1gr14/игрич/
Создаю опенсорс во славу Господа Иисуса Христа ☦️
С любовью ко всем разработчикам на свете ❤️
Условия использованияПолитика конфиденциальностиСергей Дмитриев 2026 😎
You have unsaved changes

Фулстек-разработка веб-сервиса на TypeScript, Reaсt, Node.js (2023)

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

Актуальность

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

В то же время я сейчас работаю над созданием нового курса по фулстек разработке, который по сути начинается от той точки, на которой заканчивается этот курс. У нас будет на уроках бойлерплейт со всеми настройками проекта и задача создать свой собственный SaaS-продукт: Антикурс по созданию SaaS на TypeScript, React, Bun, Point0.

Стек технологий

React, TypeScript, Vite, Node.js, pnpm, Express, tRPC, PostgreSQL, Prisma, Formik, Zod, Jest, Prettier, ESLint, Stylelint, SCSS, Husky, Passport, React Router, Cloudinary, AWS S3, MJML, Brevo, CRON, Winston, Balsamiq, Sentry, Mixpanel, Cloudflare, Docker, DataDog, Heroku.

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

Для тех, кто может отличить null от объекта

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

Кто хочет кайфовать от процесса разработки

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

Кто хочет создавать продукты целиком и полностью

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

Исходный код проекта

Весь код образовательного проекта доступен на GitHub. Получите доступ, скачайте и используйте как основу для разработки вашего собственного проекта.

github.com/1gr14/fullstack2023

Авторизуйтесь, чтобы увидеть урок

Урок бесплатный, просто нужно авторизоваться.

141 урок

  1. 1Как проходит обучение
  2. 2Создание графического прототипа
  3. 3Формирование и оценка бэклога проекта
  4. 4Установка программ для разработки
  5. 5Мастеркласс по VSCode
  6. 6Создание React приложения с помощью Vite
  7. 7Знакомство с Git и GitHub
  8. 8HTML теги
  9. 9React и JavaScript
  10. 10Автоматическое форматирование кода через Prettier
  11. 11Создание Node.js приложения на TypeScript
  12. 12Создание express приложения
  13. 13Создание эндпоинта, возвращающего JSON
  14. 14Добавление tRPC в бэкенд
  15. 15Добавление tRPC во фронтенд
  16. 16Проверка типов
  17. 17Создание скриптов для монорепы
  18. 18Стандартизация стиля TypeScript кода с помощью ESLint
  19. 19Автоматический вызов Prettier, ESLint и проверки типов при коммите
  20. 20Стандартизация стиля сообщений в Git коммитах
  21. 21Добавление React Router
  22. 22Улучшение типизации React Router
  23. 23Знакомстов с Lodash, генерация фейкового контента
  24. 24Знакомство с Zod, создание tRPC процедуры со входными параметрами
  25. 25Создание Layout компонента общего для всех страниц
  26. 26Добавлям CSS стили с применением SCSS
  27. 27Создание очередной страницы веб-приложения
  28. 28Создание переиспользуемых компонентов
  29. 29Стандартизация стиля SCSS файлов с помощью Stylelint
  30. 30Проверка валидности SCSS файлов
  31. 31Форма: база
  32. 32Форма: инпут компоненты
  33. 33Форма: Formik
  34. 34Форма: валидация
  35. 35Форма: забота о UX
  36. 36Форма: Zod валидация
  37. 37Разделение tRPC бэкенда на отдельные файлы
  38. 38Автоматическая генерация индекс файла
  39. 39Добавление tRPC мутации
  40. 40Переиспользование логики валидации бэка на фронте
  41. 41Ограничение на импорт кода бэкенда во фронт
  42. 42Форма: загрузка
  43. 43Форма: успех
  44. 44Форма: ошибка
  45. 45Стили: Input
  46. 46Стили: Textarea
  47. 47Компоненты: Alert
  48. 48Компоненты: Button
  49. 49Компоненты: FormItems
  50. 50Поднятие базы данных PostgreSQL
  51. 51Prisma: подключение базы данных (БД)
  52. 52Передача клиента Prisma в tRPC контекст
  53. 53Prisma: поиск по записям БД через Prisma клиент
  54. 54Prisma: создание записей в БД
  55. 55Prisma: добавление новых полей в существующую таблицу
  56. 56Используем superjson для получения даты с бэкенда
  57. 57Авторизация: модель пользователя + эндпоинт регистрации
  58. 58Использование инструмента для ручного вызова tRPC эндпоинтов
  59. 59PostgreSQL: GUI для работы с БД
  60. 60Авторизация: страница регистрации
  61. 61Авторизация: эндпоинт для входа
  62. 62Авторизация: страница для входа
  63. 63Авторизация как таковая
  64. 64Environment Variables: backend
  65. 65Environment Variables: webapp
  66. 66Авторизация: соль
  67. 67Авторизация: валидация токена
  68. 68Prisma: связанные сущности
  69. 69CRUD: Редактирование сущностей
  70. 70Форма: создание своей обёртки
  71. 71Создание контекста клиентского приложения
  72. 72Создание обёртки для повторяющейся логики страниц веб-приложения
  73. 73Улучшение типизации обёртки страниц
  74. 74Добавление страницы 404
  75. 75Распределение файлов по папкам при увеличении кодовой базы
  76. 76Редактирование профиля пользователя
  77. 77Очередное улучшение типизации обёртки страниц
  78. 78Изменение пароля
  79. 79Бесконечная подгрузка данных по нажатию кнопки
  80. 80Бесконечная подгрузка данных при скроле
  81. 81Делаем загрузку красивой
  82. 82Более сложные связи сущностей в базе, оптимистический ответ на клиенте
  83. 83Функционал поиска по базе данных, автоматическая отправка формы
  84. 84Права пользователей
  85. 85Установка HTML title на страницы веб-приложения
  86. 86Добавление favicon
  87. 87Добавление иконок
  88. 88Добавление подгружаемых картинок
  89. 89Добавление встроенных картинок
  90. 90Prisma: кастомные миграции
  91. 91E-mail: создание шаблонов с помощью MJML
  92. 92E-mail: создание и добавление функций в места, где нужна отправка
  93. 93E-mail: обработка шаблонов с помощью Handlebars
  94. 94Регистрация домена
  95. 95E-mail: Подключение домена к Brevo
  96. 96E-mail: реальная отправка писем с помощью Brevo
  97. 97Создание опциональных env переменных
  98. 98Импорт роутов фронта на бэкенд
  99. 99Делаем обёртку для создания роутов
  100. 100Вытягиваем общие env переменные для фронта и бэка
  101. 101CRON: выполнение задач по расписанию
  102. 102PostgreSQL: написание сложных запросов
  103. 103MJML + Handlebars: циклы и прочие хелперы
  104. 104Monorepo: shared workspace
  105. 105Стэйт-менeджмент веб-приложения
  106. 106Логирование: добавление логгера
  107. 107Логирование: стандартизация входных параметров + сериализация ошибок
  108. 108Логирование: красивый вывод логов во время разработки
  109. 109Логирование: tRPC бэкенд
  110. 110Логирование: Prisma
  111. 111Логирование: фильтрация логов
  112. 112Логирование: секретные данные
  113. 113Логирование: Express
  114. 114Логирование: tRPC клиент
  115. 115Sentry: отлавливание ошибок веб-приложения
  116. 116Создание нового типа ошибок ExpectedError
  117. 117Sentry: sourcemap веб-приложения
  118. 118Sentry: отлавливание ошибок бэкенда
  119. 119Sentry: sourcemap бэкенда
  120. 120Тесты: юнит тесты
  121. 121Тесты: интеграционные тесты
  122. 122Тесты: запрет на импорт тестов в основной код
  123. 123Тесты: переменные окружения
  124. 124Тесты: мок модулей
  125. 125Улучшение типизации функций pick & omit
  126. 126Загрузка изобрежния на Cloudinary
  127. 127Загрузка нескольких изображений на Cloudinary
  128. 128Загрузка файла на AWS S3
  129. 129Загрузка нескольких файлов на AWS S3
  130. 130Стандартизируем общие env переменные для фронта и бэка
  131. 131Продуктовая аналитика с помощью Mixpanel
  132. 132Раздача веб-приложения через бэкенд
  133. 133Получение переменных окружения фронта с бэкенда
  134. 134DevOps: Создание Dockerfile, билд имейджа, запуск контейнера
  135. 135DevOps: Деплой в Heroku
  136. 136DevOps: Автоматический деплой в Heroku через GitHub Actions
  137. 137Отправка логов в Datadog
  138. 138Анализ фронтового бандла
  139. 139Поддержка старых браузеров
  140. 140Автоматическое подставление CSS префиксов
  141. 141Окончание

Дополнительно

Сообщество

Вопросы и общение — Discord на английском, Telegram на русском
DiscordTelegram

Соцсети

Видео и посты на других площадках
YouTubeTwitter

Закрытая группа

Платное сообщество с наставничеством, где каждый создаёт свой IT-продукт
Про группу

Start0

SaaS-бойлерплейт на Point0 — самый быстрый способ создать свой продукт
Посмотреть Start0

Комментарии

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