A modern, AI-powered communication tool designed for the Deaf and Hard of Hearing community.
ClearCard is a mobile-first web app that helps Deaf and Hard of Hearing individuals communicate quickly and clearly with hearing people in everyday situations — at the doctor, restaurant, store, or anywhere else.
Instead of typing out messages repeatedly, users build a personal library of high-contrast communication cards that can be shown on screen instantly.
- Create and store personal communication cards organized by category
- Full-screen display mode with adjustable font size for easy reading
- High-contrast text options (white or yellow) for maximum visibility
- Flip mode to rotate text for showing across a table
- Medical — doctor visits, prescriptions, appointments
- Daily — restaurants, coffee orders, everyday tasks
- Services — car service, hair salon, rideshare
- Emergency — urgent alerts, emergency contacts
- Vault — sensitive private information locked behind a passcode
- Custom categories you can add and reorder
- Passcode-protected private card storage
- Toggle any card as private directly in the editor
- Vault auto-locks when leaving the section
- Accent color picker (5 presets + custom color wheel)
- Display text color (White or Yellow)
- Passcode management for Vault access
| Layer | Technology |
|---|---|
| Framework | React 19 + TypeScript |
| Styling | Tailwind CSS v4 |
| Build Tool | Vite 6 |
| Icons | Lucide React |
| Storage | localStorage (no backend required) |
| Deployment | Vercel |
- Node.js 18+
- npm
git clone https://github.com/yourusername/clearcard.git
cd clearcard
npm install
npm run devOpen http://localhost:3000 in your browser.
npm run buildnpx vercel --prodclearcard/
├── App.tsx # Root app component
├── index.tsx # React entry point
├── index.html # HTML shell
├── index.css # Global styles + Tailwind
├── types.ts # TypeScript types
├── components/
│ ├── CardEditorModal.tsx # Create/edit cards
│ ├── CategoryManagerModal.tsx
│ ├── FullscreenViewer.tsx # Full-screen card display
│ ├── Icons.tsx # SVG icon components
│ ├── PasscodeModal.tsx # Vault passcode entry
│ ├── SettingsModal.tsx # App settings
├── lib/
│ └── storage.ts # localStorage helpers
├── services/
│ └── geminiService.ts # Smart generate templates
└── api/
└── grammar.ts # Vercel serverless grammar API
ClearCard stores all data locally on the user's device using localStorage. No accounts, no servers, no data collection. Each user's cards, conversations, and settings stay private on their own phone or browser.
- High-contrast display mode
- Adjustable font size (24px–160px)
- Full ARIA labels and roles throughout
- Keyboard navigable
- Haptic feedback on supported devices
- Designed specifically for the Deaf and Hard of Hearing community
<<<<<<< HEAD
- Add language support (Spanish, French, Chinese, and more)
- AI-powered grammar correction via Anthropic API =======
- PWA support (install to home screen)
- Export/import cards as backup
- QR code sharing for individual cards
c3dde8e (Remove SmartGenerateModal and ClearChat components and all references)
MIT License — free to use, modify, and distribute.
Built with ❤️ for the Deaf and Hard of Hearing community.