← Back to Portfolio

speaking-cards

speaking-cards main image

Project Description & Details

Задача

Speaking Cards решает прикладную задачу: Приложение Expo/React Native для практики речи: Jest, Testing Library, Husky и lint-staged. Фокус на мобильном UX и карточных сценариях обучения.

Это личный учебный проект (в активной разработке), где отрабатывались конкретные паттерны и инструменты без лишней обвязки.

Кейс показывает подход к задачам в области «Full-stack веб-приложения и дашборды»: от постановки до сдачи с понятной структурой модулей.

Перед стартом зафиксировали критерии готовности: понятный первый экран, предсказуемые ошибки форм, возможность доработки без переписывания половины кодовой базы.

Решение

Сделана учебная, но полноценная реализация с акцентом на читаемость кода и воспроизводимую сборку.

Сценарии спроектированы так, чтобы основные действия укладывались в один–два экрана: меньше переключений, меньше ошибок при вводе. Навигация и подписи полей согласованы с привычными паттернами — пользователю не нужно «учить интерфейс».

Отдельное внимание — состояния загрузки и пустые списки: skeleton/spinner там, где данные приходят асинхронно, и понятные empty-state тексты вместо пустой таблицы.

Архитектура и стек

UI и клиент: React Native.

Инфраструктура и утилиты: Expo, TypeScript, Jest, ESLint.

Распределение языков в репозитории: TypeScript (83.4%), Shell (7.6%), CSS (6.9%), HTML (0.8%), JavaScript (0.8%), Dockerfile (0.4%).

Слои разделены так, чтобы UI не знал деталей транспорта: адаптеры API/хранилища, доменные типы, компоненты представления. Это упрощает замену бэкенда и точечные UX-правки.

Ключевые функции

  • React Native — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
  • Expo — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
  • TypeScript — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
  • Jest — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
  • ESLint — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.

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

  • Интеграция и использование React Native в продуктовой логике и интерфейсе.
  • Интеграция и использование Expo в продуктовой логике и интерфейсе.
  • Интеграция и использование TypeScript в продуктовой логике и интерфейсе.

Результат

MVP уже покрывает ключевой сценарий; дальше — расширение отчётности, тестов и мониторинга.

Исходный код открыт: https://github.com/astropsy999/speaking-cards — можно оценить структуру модулей и стиль коммитов.

Что бы улучшил

Следующий шаг — observability (логи/метрики), автотесты на регресс и документация API для интеграторов. Для high-load сценариев — профилирование узких мест и кеширование справочников.

FAQ

What is «speaking-cards» for?

Expo/React Native app for speaking practice with Jest and Testing Library, Husky and lint-staged for quality gates. Targets mobile UX and iterative card-based learning flows.

Which stack powers «speaking-cards»?

Technologies: React Native, Expo, TypeScript, Jest, ESLint.

Project information

Personal/LearningIn Development

Technologies Used

React NativeExpoTypeScriptJestESLint

Languages

TypeScript (83.4%)Shell (7.6%)CSS (6.9%)HTML (0.8%)JavaScript (0.8%)Dockerfile (0.4%)