Krishnvani

The application follows a modular monorepo structure separating platform‑specific entry points (krishnvani/app/*.tsx for Expo) from shared web components (src/*.tsx). The frontend architecture is centered on React functional components with hooks for navigation (useRouter), context (useAppContext), and data fetching via React Query. State such as onboarding status, language preference, and verse data is stored in context providers (AppContext, GitaProvider).

Data ingestion is performed locally through the gitaService module, which supplies static chapter and verse information. Random verse generation (getRandomVerse) and chapter listings (getAllChapters) are pure functions, enabling instant UI updates without network latency. The execution flow starts at a splash screen that delays 1.5 seconds before routing the user based on onboarding state, then proceeds to screens like ChaptersScreen and RandomVerseScreen, each wrapped in a ScreenWrapper that provides consistent padding and theming.

Security guardrails are implicit: the app does not expose external APIs, avoiding network attack surfaces. All assets are bundled with the Expo build, and the web build uses Vite's production optimizations. The build topology includes an Expo managed workflow for iOS/Android (app.json with EAS project ID) and a Vite configuration for the SPA, both sharing TypeScript configurations and ESLint rules for code quality.

The UI layer employs Framer Motion for page transitions and card animations, while Tailwind CSS and Shadcn/UI provide responsive, theme‑aware components. Accessibility is considered via StatusBar settings and proper aria attributes in web components. The architecture enables rapid iteration and easy extension to new languages or verse collections.