Task

Speaking Cards addresses a practical task: an Expo/React Native application for speech practice, utilizing Jest, Testing Library, Husky, and lint-staged. The focus is on mobile UX and card-based learning scenarios.

This is a personal learning project (in active development) where specific patterns and tools are practiced without unnecessary overhead.

The case study demonstrates an approach to tasks in the realm of "Full-stack web applications and dashboards": from setting goals to delivery with a clear module structure.

Before starting, readiness criteria were established: a clear first screen, predictable form errors, and the ability to make improvements without rewriting half of the codebase.

Solution

A learning-focused yet complete implementation has been created with an emphasis on code readability and reproducible builds.

The scenarios are designed so that key actions fit within one or two screens: fewer switches, fewer input errors. Navigation and field labels align with familiar patterns — users do not need to "learn the interface".

Particular attention is given to loading states and empty lists: skeleton/spinner where data is fetched asynchronously, and clear empty-state texts instead of an empty table.

Architecture and stack

UI and client: React Native.

Infrastructure and utilities: Expo, TypeScript, Jest, ESLint.

Language distribution in the repository: TypeScript (83.4%), Shell (7.6%), CSS (6.9%), HTML (0.8%), JavaScript (0.8%), Dockerfile (0.4%).

Layers are separated so that the UI is unaware of transport details: API/storage adapters, domain types, presentation components. This simplifies backend replacement and targeted UX adjustments.

Key features

• React Native — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• Expo — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• TypeScript — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• Jest — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• ESLint — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.

Additionally:

• Integration and use of React Native in product logic and interface.
• Integration and use of Expo in product logic and interface.
• Integration and use of TypeScript in product logic and interface.

Result

The MVP already covers the key scenario; next steps include expanding reporting, tests, and monitoring.

The source code is open: https://github.com/astropsy999/speaking-cards — you can evaluate the module structure and commit style.

What I would improve

The next step is observability (logs/metrics), regression tests, and API documentation for integrators. For high-load scenarios — profiling bottlenecks and caching reference data.