An accessible, mobile-first web application for elderly healthcare management — built with React Native Web & Expo.
👉 https://dist-five-smoky-31.vercel.app
Platform Notice: ElderCare is a mobile web application. It is designed and optimized exclusively for mobile browsers and is best experienced on a smartphone. It is not a native iOS or Android app — no app store installation is required. Simply open the link in your mobile browser to get started.
ElderCare is a mobile-first web application that simplifies healthcare management for elderly individuals. Built using React Native Web and deployed via Vercel, it delivers a native app-like experience directly in the browser — with no installation required. It features a clean, large-touch UI, bilingual support (English & Hindi), voice navigation, and haptic feedback, making it accessible to seniors regardless of technical experience.
| Feature | Description |
|---|---|
| 🏠 Home Dashboard | Quick access to all services with a friendly, card-based layout |
| 💊 Medicine Tracker | Schedule and track daily medications with reminders |
| 📅 Appointments | Book and manage doctor appointments |
| 📋 Health Reports | View and store health reports in one place |
| 👤 Profile | Manage personal and emergency contact information |
| 🎙️ Voice FAB | Floating voice assistant for hands-free navigation |
| ♿ Accessibility Panel | High contrast, large touch targets, and font scaling |
| 🌐 Bilingual Support | Full English & Hindi (i18n) translation |
| 📳 Haptic Feedback | Tactile responses for key interactions |
| 🚨 Emergency Button | One-tap emergency alert feature |
eldercare/
├── src/
│ ├── screens/ # Main app screens
│ │ ├── HomeScreen.js
│ │ ├── AppointmentScreen.js
│ │ ├── MedicineScreen.js
│ │ ├── ReportsScreen.js
│ │ └── ProfileScreen.js
│ ├── components/ # Reusable UI components
│ │ ├── AccessibilityPanel.js
│ │ ├── BottomTabBar.js
│ │ ├── EmergencyButton.js
│ │ ├── FeatureCard.js
│ │ ├── MedicineCard.js
│ │ ├── ToastManager.js
│ │ ├── VoiceFAB.js
│ │ └── AppLoader.js
│ ├── hooks/ # Custom React hooks
│ │ ├── useAccessibility.js
│ │ ├── useAnimatedMount.js
│ │ ├── useFontScale.js
│ │ ├── useHaptic.js
│ │ └── useVoiceRecognition.js
│ ├── navigation/ # React Navigation setup
│ │ ├── RootNavigator.js
│ │ └── TabNavigator.js
│ ├── i18n/ # Localization
│ │ ├── en.js
│ │ ├── hi.js
│ │ └── index.js
│ └── theme/ # Design system
│ ├── colors.js
│ ├── spacing.js
│ └── typography.js
├── assets/ # Images and icons
├── App.js
├── index.js
└── app.json
| Layer | Technology |
|---|---|
| UI Framework | React Native Web + Expo ~54 |
| Deployment | Vercel (Web Build via expo export --platform web) |
| Navigation | React Navigation v7 (Bottom Tabs + Native Stack) |
| Fonts | Outfit (Latin), Noto Sans Devanagari (Hindi) — @expo-google-fonts |
| Animations | React Native Reanimated v4 |
| Storage | AsyncStorage (client-side persistence) |
| Localization | i18n-js (EN / HI) |
| Speech | expo-speech (Web Speech API) |
| Haptics | expo-haptics (mobile browser vibration) |
Since ElderCare is a mobile web app, the easiest way to use it is to simply open the live link on your smartphone:
👉 https://dist-five-smoky-31.vercel.app
Works best on Chrome / Safari on Android or iOS.
- Node.js ≥ 18
- Expo CLI
# Clone the repo
git clone https://github.com/whyabhiiiii/eldercare.git
cd eldercare
# Install dependencies
npm install
# Start the web dev server
npx expo start --webThis opens the app in your browser at http://localhost:8081. For the best experience, enable mobile device emulation in your browser's DevTools (F12 → Toggle Device Toolbar).
npx expo export --platform webThe output will be in the dist/ folder, ready to deploy on any static hosting provider (Vercel, Netlify, etc.).
ElderCare is built with seniors in mind:
- Large touch targets for easier tapping
- High contrast mode for low-vision users
- Scalable fonts — adjustable from the accessibility panel
- Voice navigation — navigate the app without touching the screen
- Haptic feedback for every key interaction
The app supports English and Hindi. Language can be toggled from the Profile screen. All UI strings are managed in src/i18n/.
| Version | Notes |
|---|---|
beta 1.0 |
Core app foundation — navigation, screens, theming, and config |
beta 1.1 |
Assets, full src directory — components, hooks, i18n, and workflow |
Abhishek Kumar — @whyabhiiiii
This project is for academic and demonstration purposes.