Смотрите прямо здесь, на удобной скорости (кнопки под видео).
Скорость
Одно здание, два выхода. Витрина для пользователя, подсобка для владельца. Данные одни, интерфейсы разные. Пользователь видит каталог, владелец таблицу товаров с кнопкой «добавить». И четыре обязательных поведения продукта, реакция, состояние, проверка, память. После этого макет уже действительно можно назвать продуктом.
О чём урок
1
Витрина и подсобка. Клиент видит одно, владелец управляет другим на тех же данных. Кейсы магазин и запись к мастеру.
2
Управление в две страницы. Список плюс форма добавления или редактирования (модальное или отдельно).
3
Реакции. Тыкнул кнопку, что-то произошло. Информер, счётчик, подтверждение. Ни одно действие без обратной связи.
4
Состояния. Четыре лица экрана, пустое, загрузка, данные, ошибка. Все прорабатываем, никаких белых стен.
5
Проверки. Маска телефона, подсказка «не хватает цифр». Помощь, а не обвинение «вы дурак».
6
Память. Закрыл, открыл, всё на месте. Куки без принудительной регистрации, продукт помнит контекст.
Что заберёте за урок
Разделение продукта на витрину и подсобку, где у каждой своя логика.
Двухэкранный паттерн управления, список плюс форма добавления/редактирования.
Четыре типа реакций на действия пользователя, ни одно не остаётся без ответа.
Четыре состояния каждого экрана, никаких белых стен и 404 без пояснения.
Валидация данных как помощь, а не как обвинение пользователя.
Память между сессиями, без «войдите чтобы сохранить».