INTERLAB
Как делать · 11

Готовые решения

Рецепты кода под конкретную задачу: компоненты, утилиты, Next.js, Spring, мобильные, авторизация, SQL.

Прочитано: 0 / 11Компоненты ReactУтилиты JavaScriptРешения для Next.jsРецепты Java / SpringРецепты React NativeКомпоненты FlutterРецепты аутентификацииРецепты для APIРецепты для баз данныхПереиспользуемые архитектурные шаблоны

Компоненты React

  1. Рецепт кода✓

    Рецепт: доступное модальное окно на React

    Возьмите нативный <dialog> и открывайте его методом showModal() из эффекта React: браузер сам выводит окно в верхний слой, делает страницу под ним инертной, закрывает окно по Esc и возвращает фокус элементу, который был в фокусе до открытия. Компоненту остаётся синхронизировать состояние через событие close, закрывать окно по клику на подложку, подписать его через aria-labelledby и заблокировать прокрутку одним CSS-правилом. Ниже — готовый Modal.tsx, стили с учётом prefers-reduced-motion и тесты в настоящем браузере.

    Средний · 7 мин чтения · практика ~40–90 мин

Утилиты JavaScript

  1. Рецепт кода✓

    Рецепт: debounce и throttle

    Debounce откладывает вызов, пока события не прекратятся на заданную паузу, — это поиск по вводу и пересчёт после ресайза. Throttle, пока события идут, пропускает вызов не чаще одного раза за интервал, — это работа с прокруткой. Ниже — типизированные реализации с cancel, flush и опциями leading/trailing, хук useDebouncedValue для React и тесты на поддельных таймерах Vitest.

    Начальный · 5 мин чтения · практика ~20–40 мин

Решения для Next.js

  1. Рецепт кода✓

    Рецепт: форма заявки на Server Action с валидацией

    Форма заявки в Next.js 16 обходится без отдельного API-маршрута: <form> вызывает Server Action, который проверяет данные схемой Zod на сервере и возвращает ошибки полей обычным значением, а useActionState показывает их и даёт флаг pending для блокировки кнопки. Защита от спама и дублей тоже живёт на сервере: скрытое поле-ловушка (honeypot), лимит запросов с одного IP и повторная отправка, которая не создаёт вторую заявку. Сбой CRM пользователь видит как понятное сообщение с кодом, а подробности остаются в серверном логе.

    Средний · 7 мин чтения · практика ~40–90 мин
  2. Рецепт кода✓

    Рецепт: закрытые страницы в Next.js

    В Next.js 16 закрытый раздел защищают в два слоя. proxy.ts (так с 16-й версии называется middleware) быстро проверяет подпись cookie сессии: гостя отправляет на /login?next=… с кодом 307, пользователю без нужной роли отвечает 403. Настоящая защита — слой доступа к данным (Data Access Layer): каждая функция, которая читает или меняет данные, сама проверяет сессию и актуальную роль по базе, поэтому её не обходят ни прямой запрос, ни устаревшая cookie, ни Server Action, вызванный без страницы.

    Средний · 6 мин чтения · практика ~40–90 мин

Рецепты Java / Spring

  1. Рецепт кода✓

    Рецепт: единый формат ошибок в Spring Boot

    Единый формат ошибок в Spring Boot делается одним классом: @RestControllerAdvice, унаследованный от ResponseEntityExceptionHandler, возвращает ProblemDetail по стандарту RFC 9457 для всех случаев — ошибок валидации, 404, 409 и непредвиденных 500. Клиент всегда получает application/problem+json с понятным detail, а стектрейс остаётся в логе и связывается с ответом через errorId.

    Средний · 6 мин чтения · практика ~20–40 мин

Рецепты React Native

  1. Рецепт кода✓

    Рецепт: список с загрузкой из API и pull-to-refresh в React Native

    Список из API в React Native строят на FlatList: пара refreshing + onRefresh даёт жест «потяни, чтобы обновить», а onEndReached — догрузку следующей страницы. Чтобы экран не ломался в реальной сети, к этому добавляют отдельные состояния загрузки, ошибки и пустого списка, синхронный флаг против повторной догрузки, отмену устаревших запросов через AbortController и отбрасывание дублей по id. Ниже — готовые хук и экран для Expo SDK 57 и девять тестов к ним.

    Средний · 6 мин чтения · практика ~20–40 мин

Компоненты Flutter

  1. Рецепт кода✓

    Рецепт: форма с валидацией во Flutter

    Форму во Flutter собирают из виджета Form с ключом GlobalKey<FormState> и полей TextFormField с функцией validator: она возвращает текст ошибки или null. Чтобы ошибки не появлялись, пока человек печатает, форме задают AutovalidateMode.onUnfocus, а полям — onUserInteractionIfError. Ниже — готовая форма заявки для Flutter 3.47 с маской телефона, состоянием отправки, ошибками сервера, подписями для экранного диктора и 11 тестами.

    Средний · 6 мин чтения · практика ~20–40 мин

Рецепты аутентификации

  1. Рецепт кода✓

    Рецепт: хранение паролей — хеширование и проверка

    Пароль хранят не в открытом виде и не как SHA-256, а как медленный хеш с уникальной солью: OWASP рекомендует Argon2id минимум с 19 MiB памяти, двумя проходами и одним потоком. Рецепт даёт готовый модуль для Node.js 24 — хеширование, проверку, перехеширование при смене параметров, переход со старых bcrypt-хешей при входе и проверку несуществующего email за то же время, что и настоящего.

    Средний · 7 мин чтения · практика ~20–40 мин

Рецепты для API

  1. Рецепт кода✓

    Рецепт: типизированный API-клиент на fetch

    Типизированный API-клиент — это тонкая обёртка над fetch, через которую проходят все запросы проекта: она собирает URL от базового адреса, ставит общие заголовки, ограничивает время ожидания, проверяет ответ схемой Zod и превращает любые сбои в один класс ApiError с разобранным Problem Details. Рецепт даёт готовый файл api-client.ts около 180 строк, пример модуля API и тесты против локального HTTP-сервера.

    Средний · 5 мин чтения · практика ~20–40 мин

Рецепты для баз данных

  1. Рецепт кода✓

    Рецепт: keyset-пагинация в SQL

    Keyset-пагинация (seek method) выбирает следующую страницу условием «всё, что после последней показанной строки»: WHERE (created_at, id) < ($1, $2) ORDER BY created_at DESC, id DESC LIMIT 21. С составным индексом по (created_at, id) база читает только строки страницы, поэтому скорость не зависит от глубины, а новые записи не сдвигают страницы. Цена — нельзя перейти сразу на страницу N: клиент получает курсор и листает от него.

    Средний · 6 мин чтения · практика ~20–40 мин

Переиспользуемые архитектурные шаблоны

  1. Рецепт кода✓

    Рецепт: порт и адаптер для внешнего сервиса

    Порт — это интерфейс, которым приложение описывает, что ему нужно от внешнего сервиса, своими словами: «отправь SMS», а не «POST /v2/messages». Адаптер реализует порт для конкретного провайдера и переводит в обе стороны форматы и ошибки; fake-адаптер реализует тот же порт в памяти для тестов. Один контрактный тест прогоняется на обоих адаптерах и гарантирует, что подделка ведёт себя как настоящий адаптер.

    Продвинутый · 6 мин чтения · практика ~40–90 мин

Траектории с этим направлением

JavaScript с нуля · 9 →React · 8 →Next.js · 7 →Java · 6 →Spring Boot · 7 →Backend на Node.js · 8 →React Native + Expo · 9 →Flutter + Dart · 6 →SQL и PostgreSQL · 9 →Архитектура ПО · 9 →API и интеграции · 8 →← Все направления
Расскажите о задаче — мы изучим запрос и свяжемся с вами

Есть задача?
Обсудим и оценим — бесплатно.

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

  • Оценка объёма и рисков до старта
  • NDA — по вашему или нашему шаблону
  • Старт работ в течение недели
Написать в WhatsApp

Не присылайте через форму пароли, ключи доступа и исходный код — безопасную передачу доступа обсудим отдельно.

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