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
  • Аккаунт
    • Войти
    • Регистрация
1gr14/игрич/
Создаю опенсорс во славу Господа Иисуса Христа ☦️
С любовью ко всем разработчикам на свете ❤️
Условия использованияПолитика конфиденциальностиСергей Дмитриев 2026 😎

Добавление React Router

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

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

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

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

Сообщество

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

Соцсети

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

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

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

Start0

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

Комментарии

, чтобы оставить комментарий
Пока нет комментариев. Будьте первым.
НазадСтандартизация стиля сообщений в Git коммитахДалееУлучшение типизации React Router