- Регистрация
- 26 Март 2018
- Сообщения
- 84.917
Название: Фулстек-разработка веб-сервиса на TypeScript, Reaсt, Node.js [stepik] [Сергей Дмитриев]
Описание:
Цель обучения — создать проект с нуля, изучив и применив технологии и архитектуру, которые обеспечивают качество и масштабируемость вашего кода, скорость разработки, а также удовольствие и радость от процесса.
О курсе
Я с детства мечтал, что когда вырасту, смогу сам сделать крутой многопользовательский сервис как вконтакте (это было лет 16 назад). И вот я 16 лет корпел, корпел, и научился. Сервисы, которые я раньше программировал больше года в команде из 3 человек, я теперь могу запрограммировать за пару, тройку месяцев в одиночку. Решающую роль сыграли выбранные технологии (перебрал многие) и способ их совмещения — архитектура.
И вот я создал курс, где показываю как в итоге оказывается с моей точки зрения надо создавать веб-сервисы с нуля, чтобы обеспечить качество и масштабируемость кода, скорость разработки, а также удовольствие и радость от процесса.
Курс вообще без воды, чисто практический. 28 часов видео и 143 урока, из которых аж 43 бесплатные.
Для кого этот курс
Начальные требования
Вообще мы пишем прямо с чистого листа. Но хорошо бы, чтобы вы уже имели какие-то навыки в вёрстке. Всё остальное я объясню в этом учебнике и дам ссылки на сторонние источники, где можно глубже изучить каждую отдельную тему.
Как проходит обучение
В основе обучения лежит учебник из 141 урока (42 бесплатных, остальные платные). В учебнике освещается процесс создания веб-сервиса, который содержит в себе практически всё, что встречается в каждом IT-продукте: авторизация, формы, роутер, логирование, тесты, деплой, и т.д. Всё это сопровождается исходным кодом и видео-инструкциями. Изучите, скопируйте, адаптируйте под свой или заказной проект.
Учебник освещает аспекты встречающиеся в практически 100% IT-продуктов. Однако некоторая часть кода индивидуальна в каждом отдельном продукте, и её вы должны написать самостоятельно. Постарайтесь написать её самостоятельно. Будет нужна поддержка, совет, код-ревью, обращайтесь за индивидуальной консультацией.
Посмотрите все видео уроки учебника, в рамках которого будет создан типовой многопользовательский веб-сервис. Ознакомьтесь с кодом представленным в каждом уроке. Скачайте полный исходных код образовательного проекта (доступно только в платной версии) и используйте его в качестве основы для своего проекта. Если будете застревать в ходе создания собственного проекта, обращайтесь за индивидуальной консультацией, или вступайте в образовательную группу. Ниже перечислены все уроки учебника.
Программа курса
Введение
Обзор архитектуры и фичей учебного проекта
Как проходит обучение
Связь с Автором
Создание графического прототипа
Формирование и оценка бэклога проекта
Установка программ для разработки
Бэкенд-фронтенд, уровень 1
Создание express приложения
Создание эндпоинта, возвращающего JSON
Добавление tRPC в бэкенд
Добавление tRPC во фронтенд
Качество кода
Проверка типов
Создание скриптов для монорепы
Стандартизация стиля TypeScript кода с помощью ESLint
Автоматический вызов проверок и фиксов при коммите
Стандартизация стиля сообщений в Git коммитах
Роутер
Добавление React Router
Улучшение типизации React Router
Вспомогательные библиотеки
Знакомстов с Lodash, генерация фейкового контента
Знакомство с Zod и создание tRPC процедуры с инпутом
Вёрстка
Создание Layout компонента общего для всех страниц
Добавлям CSS стили с применением SCSS
Создание очередной страницы веб-приложения
Создание переиспользуемых компонентов
Стандартизация стиля SCSS файлов с помощью Stylelint
Проверка валидности SCSS файлов
Форма
Форма: база
Форма: инпут компоненты
Форма: Formik
Форма: валидация
Форма: забота о UX
Форма: Zod валидация
Бэкенд-фронтенд, уровень 2
Разделение tRPC бэкенда на отдельные файлы
Автоматическая генерация индекс файла
Добавление tRPC мутации
Переиспользование логики валидации бэка на фронте
Ограничение на импорт кода бэкенда во фронт
Рефакторинг, уровень 1
Форма: загрузка
Получите доступ к полному исходному коду проекта на гитхабе
Форма: успех
Форма: ошибка
Стили: Input
Стили: Textarea
Компоненты: Alert
Компоненты: Button
Компоненты: FormItems
База данных, уровень 1
Поднятие базы данных PostgreSQL
Prisma: подключение базы данных (БД)
Передача клиента Prisma в tRPC контекст
Prisma: поиск по записям БД через Prisma клиент
Prisma: создание записей в БД
Prisma: добавление новых полей в существующую таблицу
Используем superjson для получения даты с бэкенда
Авторизация
Авторизация: модель пользователя + эндпоинт регистрации
Использование инструмента для ручного вызова tRPC эндпоинтов
PostgreSQL: GUI для работы с БД
Авторизация: страница регистрации
Авторизация: эндпоинт для входа
Авторизация: страница для входа
Авторизация как таковая
Environment Variables: backend
Environment Variables: webapp
Авторизация: соль
Авторизация: валидация токена
База данных, уровень 2
Prisma: связанные сущности
CRUD: Редактирование сущностей
Рефакторинг, уровень 2
Форма: создание своей обёртки
Создание контекста клиентского приложения
Создание обёртки для повторяющейся логики страниц веб-приложения
Улучшение типизации обёртки страниц
Добавление страницы 404
Распределение файлов по папкам при увеличении кодовой базы
Новые фичи
Редактирование профиля пользователя
Очередное улучшение типизации обёртки страниц
Изменение пароля
Бесконечная подгрузка данных по нажатию кнопки
Бесконечная подгрузка данных при скроле
Делаем загрузку красивой
База данных, уровень 3
Сложные связи сущностей в БД, оптимистический ответ на клиенте
Функционал поиска по базе данных, автоматическая отправка формы
Права пользователей
Картинки
Установка HTML title на страницы веб-приложения
Добавление favicon
Добавление иконок
Добавление подгружаемых картинок
Добавление встроенных картинок
База данных, уровень 4
Prisma: кастомные миграции
E-mail
E-mail: создание шаблонов с помощью MJML
E-mail: создание и использование функций отправки
E-mail: обработка шаблонов с помощью Handlebars
Регистрация домена
E-mail: Подключение домена к Brevo
E-mail: реальная отправка писем с помощью Brevo
Бэкенд-фронтенд, уровень 3
Создание опциональных env переменных
Импорт роутов фронта на бэкенд
Делаем обёртку для создания роутов
Вытягиваем общие env переменные для фронта и бэка
Ещё новые фичи
CRON: выполнение задач по расписанию
PostgreSQL: написание сложных запросов
MJML + Handlebars: циклы и прочие хелперы
Monorepo: shared workspace
Стэйт-менeджмент
Стэйт-мен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 префиксов
Окончание[/SPOILER]
Чему вы научитесь
Спойлер Создавать многопользовательские веб-сервисы с нуля
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
Наши преподаватели
Сергей Дмитриев
Фулстек тайпскрипт, разработчик стартапов
Описание:
Цель обучения — создать проект с нуля, изучив и применив технологии и архитектуру, которые обеспечивают качество и масштабируемость вашего кода, скорость разработки, а также удовольствие и радость от процесса.
О курсе
Я с детства мечтал, что когда вырасту, смогу сам сделать крутой многопользовательский сервис как вконтакте (это было лет 16 назад). И вот я 16 лет корпел, корпел, и научился. Сервисы, которые я раньше программировал больше года в команде из 3 человек, я теперь могу запрограммировать за пару, тройку месяцев в одиночку. Решающую роль сыграли выбранные технологии (перебрал многие) и способ их совмещения — архитектура.
И вот я создал курс, где показываю как в итоге оказывается с моей точки зрения надо создавать веб-сервисы с нуля, чтобы обеспечить качество и масштабируемость кода, скорость разработки, а также удовольствие и радость от процесса.
Курс вообще без воды, чисто практический. 28 часов видео и 143 урока, из которых аж 43 бесплатные.
Для кого этот курс
- Для тех, кто может отличить null от объекта: Я буду обучать вас огромному количеству технологий и тому, как связать их между собой. Но вам нужно уже хоть что-то знать о программировании и вёрстке, потому что я не буду разжёвывать базовые понятия, а буду обучать продвинутым
- Для тех, кто хочет кайфовать от процесса разработки: Предлагаемые мной стек технологий и архитектура очень приятны для самого разработчика. Ваш код будет понятным, лаконичным, легко поддерживаемым. Вы будете получать удовольствия в процессе создания своего продукта.
- Для тех, кто хочет создавать продукты целиком и полностью: Судьба многих разработчиков сводится к тому, что они приходят на уже давно кем-то как попало начатые продукты, и вынуждены подстраиваться под существующие неудобные архитектуру и стек. Вы же стремитесь самостоятельно создавать продукты целиком, от и до.
Начальные требования
Вообще мы пишем прямо с чистого листа. Но хорошо бы, чтобы вы уже имели какие-то навыки в вёрстке. Всё остальное я объясню в этом учебнике и дам ссылки на сторонние источники, где можно глубже изучить каждую отдельную тему.
Как проходит обучение
В основе обучения лежит учебник из 141 урока (42 бесплатных, остальные платные). В учебнике освещается процесс создания веб-сервиса, который содержит в себе практически всё, что встречается в каждом IT-продукте: авторизация, формы, роутер, логирование, тесты, деплой, и т.д. Всё это сопровождается исходным кодом и видео-инструкциями. Изучите, скопируйте, адаптируйте под свой или заказной проект.
Учебник освещает аспекты встречающиеся в практически 100% IT-продуктов. Однако некоторая часть кода индивидуальна в каждом отдельном продукте, и её вы должны написать самостоятельно. Постарайтесь написать её самостоятельно. Будет нужна поддержка, совет, код-ревью, обращайтесь за индивидуальной консультацией.
Посмотрите все видео уроки учебника, в рамках которого будет создан типовой многопользовательский веб-сервис. Ознакомьтесь с кодом представленным в каждом уроке. Скачайте полный исходных код образовательного проекта (доступно только в платной версии) и используйте его в качестве основы для своего проекта. Если будете застревать в ходе создания собственного проекта, обращайтесь за индивидуальной консультацией, или вступайте в образовательную группу. Ниже перечислены все уроки учебника.
Программа курса
Введение
Обзор архитектуры и фичей учебного проекта
Как проходит обучение
Связь с Автором
Создание графического прототипа
Формирование и оценка бэклога проекта
Установка программ для разработки
Бэкенд-фронтенд, уровень 1
Создание express приложения
Создание эндпоинта, возвращающего JSON
Добавление tRPC в бэкенд
Добавление tRPC во фронтенд
Качество кода
Проверка типов
Создание скриптов для монорепы
Стандартизация стиля TypeScript кода с помощью ESLint
Автоматический вызов проверок и фиксов при коммите
Стандартизация стиля сообщений в Git коммитах
Роутер
Добавление React Router
Улучшение типизации React Router
Вспомогательные библиотеки
Знакомстов с Lodash, генерация фейкового контента
Знакомство с Zod и создание tRPC процедуры с инпутом
Вёрстка
Создание Layout компонента общего для всех страниц
Добавлям CSS стили с применением SCSS
Создание очередной страницы веб-приложения
Создание переиспользуемых компонентов
Стандартизация стиля SCSS файлов с помощью Stylelint
Проверка валидности SCSS файлов
Форма
Форма: база
Форма: инпут компоненты
Форма: Formik
Форма: валидация
Форма: забота о UX
Форма: Zod валидация
Бэкенд-фронтенд, уровень 2
Разделение tRPC бэкенда на отдельные файлы
Автоматическая генерация индекс файла
Добавление tRPC мутации
Переиспользование логики валидации бэка на фронте
Ограничение на импорт кода бэкенда во фронт
Рефакторинг, уровень 1
Форма: загрузка
Получите доступ к полному исходному коду проекта на гитхабе
Форма: успех
Форма: ошибка
Стили: Input
Стили: Textarea
Компоненты: Alert
Компоненты: Button
Компоненты: FormItems
База данных, уровень 1
Поднятие базы данных PostgreSQL
Prisma: подключение базы данных (БД)
Передача клиента Prisma в tRPC контекст
Prisma: поиск по записям БД через Prisma клиент
Prisma: создание записей в БД
Prisma: добавление новых полей в существующую таблицу
Используем superjson для получения даты с бэкенда
Авторизация
Авторизация: модель пользователя + эндпоинт регистрации
Использование инструмента для ручного вызова tRPC эндпоинтов
PostgreSQL: GUI для работы с БД
Авторизация: страница регистрации
Авторизация: эндпоинт для входа
Авторизация: страница для входа
Авторизация как таковая
Environment Variables: backend
Environment Variables: webapp
Авторизация: соль
Авторизация: валидация токена
База данных, уровень 2
Prisma: связанные сущности
CRUD: Редактирование сущностей
Рефакторинг, уровень 2
Форма: создание своей обёртки
Создание контекста клиентского приложения
Создание обёртки для повторяющейся логики страниц веб-приложения
Улучшение типизации обёртки страниц
Добавление страницы 404
Распределение файлов по папкам при увеличении кодовой базы
Новые фичи
Редактирование профиля пользователя
Очередное улучшение типизации обёртки страниц
Изменение пароля
Бесконечная подгрузка данных по нажатию кнопки
Бесконечная подгрузка данных при скроле
Делаем загрузку красивой
База данных, уровень 3
Сложные связи сущностей в БД, оптимистический ответ на клиенте
Функционал поиска по базе данных, автоматическая отправка формы
Права пользователей
Картинки
Установка HTML title на страницы веб-приложения
Добавление favicon
Добавление иконок
Добавление подгружаемых картинок
Добавление встроенных картинок
База данных, уровень 4
Prisma: кастомные миграции
E-mail: создание шаблонов с помощью MJML
E-mail: создание и использование функций отправки
E-mail: обработка шаблонов с помощью Handlebars
Регистрация домена
E-mail: Подключение домена к Brevo
E-mail: реальная отправка писем с помощью Brevo
Бэкенд-фронтенд, уровень 3
Создание опциональных env переменных
Импорт роутов фронта на бэкенд
Делаем обёртку для создания роутов
Вытягиваем общие env переменные для фронта и бэка
Ещё новые фичи
CRON: выполнение задач по расписанию
PostgreSQL: написание сложных запросов
MJML + Handlebars: циклы и прочие хелперы
Monorepo: shared workspace
Стэйт-менeджмент
Стэйт-мен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 префиксов
Окончание[/SPOILER]
Чему вы научитесь
Спойлер Создавать многопользовательские веб-сервисы с нуля
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
Наши преподаватели
Сергей Дмитриев
Фулстек тайпскрипт, разработчик стартапов
Скрытый контент для пользователей All-dar.