Remember Me - Voice Reminder App Context
Context for working with the Remember Me repository, a React + TypeScript + Vite application that uses Google Gemini AI to convert voice recordings into structured, actionable reminders.
Development Commands
When working with this codebase, use these commands:
**Install dependencies**: `npm install`**Start development server**: `npm run dev`**Build for production**: `npm run build`**Preview production build**: `npm run preview`Project Architecture
Technology Stack
**Frontend Framework**: React 19 with TypeScript**Build Tool**: Vite with ESM imports from esm.sh CDN**Styling**: Tailwind CSS with PostCSS (proper installation, not CDN)**AI Integration**: Google Gemini AI (`gemini-2.5-flash` model)**Voice Input**: Web Speech API with browser-native transcription**Storage**: localStorage for reminder persistence**State Management**: React hooks (no external library)Configuration Files
**Tailwind**: `tailwind.config.js` (custom color palette, dark mode support)**PostCSS**: `postcss.config.js`**Main CSS**: `src/index.css` (Tailwind directives + custom component classes)**TypeScript**: Comprehensive types in `src/types/index.ts`**Environment**: `.env.local` for `VITE_GEMINI_API_KEY` (optional, runtime config available)Core Application Flow
1. Voice Recording & Transcription
Web Speech API captures speech in browserComponent: `src/components/Recorder.tsx`Includes TypeScript definitions for speech recognition interfaces2. AI Processing with Gemini
Service: `src/services/geminiService.ts`Three main functions with structured schemas: - `processVoiceInput()`: Converts speech transcript → structured reminder (title, description, date, time)
- `generateTaskSuggestions()`: Generates productivity advice for specific tasks
- `sendChatMessage()`: Conversational assistant for task planning
Schema validation ensures JSON responses with required fieldsItalian locale support (`it-IT`) for time/date formatting3. Storage & State Management
Reminders persist in localStorage under `'remember-me-reminders'` keyMain state container: `src/App.tsx`Global state includes: reminders array, API key, processing status, error handling4. Display & Categorization
Components: `src/components/ReminderList.tsx`, `src/components/ReminderCard.tsx`Time-based grouping logic: `src/utils/timeUtils.ts`Categories: Oggi (Today), Domani (Tomorrow), Scaduto (Overdue), Prossimi (Upcoming)Color-coded urgency levels with Italian localizationKey Components
Core UI Components
**App.tsx**: Main container, API key validation, adaptive UI (shows sidebar if no environment key)**Recorder.tsx**: Voice input with Web Speech API integration**ReminderList.tsx / ReminderCard.tsx**: Reminder display with calendar export, re-recording, AI chat**SettingsModal.tsx**: API key configuration for environment keys**SettingsSidebar.tsx**: Runtime API key input when no environment key exists**ThemeContext.tsx**: Dark/light theme system with localStorage persistence + system preference detectionAdvanced Features
**Re-recording Mode**: Updates existing reminders by merging new voice input with existing content (doesn't replace)**AI Chat**: Per-reminder conversational assistance for planning/troubleshooting**Smart Time Parsing**: Italian locale, AM/PM inference, relative date calculation, 24-hour format**Theme System**: Dark/light modes with Tailwind classes + automatic persistence**Calendar Export**: Export reminders to `.ics` formatAPI Key Configuration
The app supports two API key configuration methods:
1. **Environment Variable** (recommended for development):
- Set `VITE_GEMINI_API_KEY` in `.env.local`
- Key is embedded at build time
2. **Runtime Configuration**:
- If no environment key exists, sidebar appears for manual input
- Keys stored only in memory during session (never persisted)
Important Conventions
Styling
Use Tailwind utility classes (NOT CDN - proper PostCSS setup required for production)Custom colors defined in `tailwind.config.js`: primary, secondary, accent variantsDark mode support via `dark:` prefixCustom component classes in `src/index.css`Time & Date Handling
All time operations use Italian locale (`it-IT`)Timezone-aware formatting via `Intl.DateTimeFormat`Relative date calculations in `src/utils/timeUtils.ts`Time categorization logic: urgent (< 2h), soon (< 6h), upcoming, pastAI Processing
Model: `gemini-2.5-flash` for fast responsesStructured JSON schemas for all AI functionsComprehensive error handling for API failures, empty responses, JSON parsingContext integration in chat/suggestions maintains reminder context + user timezoneTypeScript
Strict type definitions in `src/types/index.ts`Time-enhanced reminder interfacesWeb Speech API interfaces defined in `Recorder.tsx`Architecture Notes
**Client-side only**: No backend server required**No external state management**: Pure React hooks**ESM imports**: React 19 and Google GenAI loaded from esm.sh CDN**localStorage**: Single source of truth for reminder data (`'remember-me-reminders'` key)When Making Changes
1. **Installing dependencies**: Always run `npm install` after pulling changes
2. **Styling changes**: Remember Tailwind requires PostCSS compilation (no CDN)
3. **API changes**: Update schemas in `geminiService.ts` and types in `src/types/index.ts`
4. **Time logic**: All time categorization must respect Italian locale
5. **State updates**: Reminder modifications must sync with localStorage
6. **Theme changes**: Update both Tailwind config and ThemeContext if adding new colors
Common Tasks
Adding a new AI feature
1. Define schema in `geminiService.ts`
2. Create typed interface in `src/types/index.ts`
3. Add function to `geminiService.ts` with error handling
4. Update component state in `App.tsx` or relevant component
5. Add UI in appropriate component with loading/error states
Modifying reminder structure
1. Update `Reminder` interface in `src/types/index.ts`
2. Update AI schema in `geminiService.ts`
3. Migrate localStorage data if breaking changes
4. Update display components (`ReminderCard.tsx`, `ReminderList.tsx`)
Changing time categorization
1. Modify logic in `src/utils/timeUtils.ts`
2. Ensure Italian locale compatibility
3. Update color coding in `ReminderList.tsx`
4. Test with various date ranges