Sergei
71f194cc4d
Implemented comprehensive loading and error handling components for the WellNuo web application with full test coverage. Components added: - LoadingSpinner: Configurable spinner with sizes, colors, and variants * LoadingOverlay: Full-screen loading with backdrop options * InlineLoader: Small inline spinner for buttons * PageLoader: Full-page centered loading state - ErrorMessage: Inline error messages with severity levels * FullScreenError: Full-page error states with retry/back actions * FieldError: Form field validation errors * ErrorBoundaryFallback: Error boundary fallback component * EmptyState: Empty data state component - Skeleton: Animated loading skeletons * SkeletonAvatar: Circular avatar skeleton * SkeletonText: Multi-line text skeleton * SkeletonCard: Card-style skeleton * SkeletonList: List of skeleton cards * SkeletonTable: Table skeleton with rows/columns * SkeletonDashboard: Dashboard-style skeleton layout * SkeletonForm: Form skeleton with fields Technical details: - Tailwind CSS styling with cn() utility function - Full accessibility support (ARIA labels, roles) - Comprehensive test coverage (57 tests, all passing) - TypeScript strict mode compliance - Added clsx and tailwind-merge dependencies Files: - web/components/ui/LoadingSpinner.tsx - web/components/ui/ErrorMessage.tsx - web/components/ui/Skeleton.tsx - web/components/ui/index.ts - web/lib/utils.ts - web/components/ui/__tests__/*.test.tsx 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
WellNuoLite @ 9f12830850
WellNuo - Caregiving App
WellNuo is a React Native/Expo app for monitoring and caring for loved ones (beneficiaries).
Tech Stack
- React Native with Expo SDK 54
- Expo Router for file-based navigation
- TypeScript
Get started
-
Install dependencies
npm install -
Start the app
npx expo start
Authentication Flow
The app uses email-based OTP authentication with two distinct paths:
Existing User (Login)
login.tsx -> Enter email -> welcome-back.tsx -> verify-otp.tsx -> Main App
- User enters email on login screen
- System checks if email exists in database
- If exists: navigates to "Welcome Back" screen, sends OTP
- User enters OTP code
- After verification: navigates to main app (tabs)
New User (Registration)
login.tsx -> Enter email -> verify-email.tsx (auto-sends OTP) -> verify-otp.tsx -> enter-name.tsx -> add-loved-one.tsx -> Main App
- User enters email on login screen
- System checks if email exists in database
- If NOT exists: navigates to "Verify Email" screen
- OTP is automatically sent when screen loads
- User can optionally enter a partner/referral code (6-digit numeric)
- User proceeds to OTP verification
- After verification: enters their name
- Then adds their first beneficiary (or skips)
- Finally navigates to main app
Partner/Referral Code
Partner codes are 6-digit numeric codes for marketing/referrals:
- Only available during NEW user registration (verify-email screen)
- NOT shown for existing users logging in
- Visual: 6 separate cells with hidden TextInput for keyboard
- Only accepts digits (non-numeric characters are filtered out)
- Test code "123456" available for development
Key Files
Authentication
app/(auth)/login.tsx- Email entry screenapp/(auth)/verify-email.tsx- OTP sending for new users + partner codeapp/(auth)/welcome-back.tsx- OTP sending for existing usersapp/(auth)/verify-otp.tsx- OTP verificationapp/(auth)/enter-name.tsx- Name entry for new usersapp/(auth)/add-loved-one.tsx- Add first beneficiary
Main App
app/(tabs)/index.tsx- Beneficiary list (home)app/(tabs)/voice.tsx- Voice assistantapp/(tabs)/account.tsx- Account settings
Services
services/api.ts- API serviceservices/sherpaTTS.ts- Text-to-Speech (stub for Expo Go)contexts/AuthContext.tsx- Authentication contextcontexts/BeneficiaryContext.tsx- Beneficiary context
Development Notes
Expo Go Limitations
Some features are stubbed when running in Expo Go:
expo-speech-recognition- Uses Alert fallback instead of native speechsherpa-onnx-tts- Uses expo-speech instead of native TTS
Running on Simulators
Use specific UDID for each port:
IOS_SIMULATOR_UDID=FCED72EF-3ADE-47D5-AC67-5C9B0DE59D7E npx expo start --port 8082 --ios
See ~/Desktop/dev instructions/SIMULATORS.md for full port-to-UDID mapping.