Задача

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 сценаріїв — профілювання вузьких місць та кешування довідників.