Все работы
Работа 01 / 03

Кейс 01Frontend[год — год]

Админ-панель для [компании]

Интерфейс управления поверх GraphQL-бэкенда: типобезопасные запросы, проверка ответов сервера в рантайме, полная локализация.

Роль
Frontend
Период
[год — год]
Команда
[состав команды]
Стек
TypeScript, React, Apollo Client, io-ts, i18next, Hasura
01

Задача

[Кто пользуется панелью и что в ней делает. Что было не так до тебя: медленно, неудобно, много ошибок в данных? Какие были ограничения — сроки, команда, легаси.]

02

Решение

[Коротко: какой подход ты выбрал и почему именно его.]

  1. /01

    Данные проверяются на входе

    Ответы GraphQL проходят через io-ts-кодеки: если сервер прислал не то, интерфейс узнаёт об этом сразу, а не пустой ячейкой в таблице.

  2. /02

    Локализация с первого дня

    Все строки интерфейса живут в i18next — в компонентах нет ни одной захардкоженной фразы.

  3. /03

    [Третье решение]

    [Например: таблицы с фильтрами и пагинацией, права доступа по ролям, оптимистичные обновления в кэше Apollo.]

// упрощённый пример: проверка ответа сервера
const User = t.type({
  id: t.string,
  email: t.string,
  role: t.keyof({ admin: null, editor: null }),
})

const { data } = useQuery(GET_USERS)
const users = await tPromise.decode(t.array(User), data.users)
Если поле пришло не того типа — ошибка ловится здесь, а не в интерфейсе.
03

Результат

[Что изменилось после: скорость работы, количество ошибок, отзывы пользователей. Только реальные цифры — если их нет, опиши словами.]

[цифра][что измерили]
[цифра][что измерили]
[цифра][что измерили]
Дальше3 работыВсе работы