Templates
Voice AI
A helpful template for building voice assistant apps with Groq and cool & creative UI. Built with `expo-audio`, `react-native-reanimated`, and Groq APIs. ## Project structure ### Where things live All details included in the app readme with deeper details. #### `voice-assistant/` in detail - **`VoiceAssistant.tsx`** — Main component. Flow states: `idle` → `starting` → `listening` → `post_recording` → `waiting_for_ai` → `ai_responding`. Uses hooks from `hooks/`, constants from `constants/`, and `formatTime` from `utils/voice-recording`. - Visuals: `IdleFourCircles`, `ListeningMetering`, `ThoughtBubbleAnimation`, `RespondingMeteringCircle`. ## Groq integration Three Groq APIs are used; all share **one API key** (`EXPO_PUBLIC_GROQ_API_KEY`). ### 1. Transcription (Speech-to-Text) - **Model:** `whisper-large-v3-turbo` (default) - **Flow:** After recording, the audio URI is sent via `transcribe(uri)` → `FormData` with `file` and `model`; response is `verbose_json`. The returned `text` is passed to chat. ### 2. Chat (LLM reply) - **Model:** `llama-3.1-8b-instant` (default) - **Flow:** Transcribed text is sent with `complete(userMessage)`. System prompt asks for short, conversational replies (1–3 sentences for voice). `max_tokens: 150`, `temperature: 0.7`. The returned text is passed to TTS. ### 3. Text-to-Speech (TTS) - **Model:** `canopylabs/orpheus-v1-english` (default), voice `hannah` - **Flow:** Chat reply text is sent with `speak(text)` → response is binary (WAV). It’s base64-encoded and written to cache with `expo-file-system`; the file path is passed to the `expo-audio` player. ## Setup and run 1. Install dependencies: ```bash npm install ``` 2. Groq API key: - Get a key from [console.groq.com](https://console.groq.com). - Copy `.env.example` to `.env` and set the key: ```bash cp .env.example .env ``` In `.env`: ``` EXPO_PUBLIC_GROQ_API_KEY=your_key_here ``` 3. Start the dev server (restart after changing `.env`): ```bash npx expo start ``` A detailed readme included in the zip file.
Habit Calendar
A beautiful, interactive, and highly functional calendar and agenda application built with React Native and Expo. This app features a seamless integration between a calendar view and a daily agenda, allowing users to manage their goals and tasks with a playful and intuitive interface. ## 🚀 Features - **Interactive Calendar**: Seamless switching between month and week views. - **Daily Agenda**: Manage tasks and goals with a swipeable list for different days. - **Task Management**: Full CRUD operations for goals including title, time, category, and priority. - **Visual Badges**: Color-coded category and priority badges for quick task identification. - **Custom Month Picker**: A custom-built, user-friendly month and year selector. - **Dark Mode Support**: Fully responsive theme that adapts to system or manual appearance settings. - **Haptic Feedback**: Enhanced user experience with tactile feedback for interactions. - **Smooth Animations**: Powered by `react-native-reanimated` for fluid transitions. ## 📦 Getting Started ### Installation 1. Download the repository: 2. Install dependencies: ```bash npm install ``` 3. Start the development server: ```bash npm start ``` 4. Use the QR code in the terminal or browser to open the app in Expo Go (Android/iOS) or an emulator. ## 🏗️ Project Structure ```text ├── app/ # Expo Router navigation (tabs, modals) ├── components/ # Reusable UI components │ └── calendar/ # Core calendar and agenda logic │ ├── badges/ # Category and Priority badges │ ├── forms/ # Input components for adding goals │ └── ... # Header, Agenda, MonthPicker, etc. ├── context/ # Context providers (Theme, etc.) ├── hooks/ # Custom hooks (useGoals, useThemeColor) ├── constants/ # Global constants and theme definitions └── assets/ # Static assets (images, icons, fonts) ``` ## 📝 Making Updates ### Adding New Features Most UI components are located in `components/calendar/`. To add a new UI element, create a new file there and follow the existing functional component pattern. ### Updating the Theme Theme colors and constants are managed in `components/calendar/theme.ts` and `constants/theme.ts`. We use a `ThemeContext` to handle dark/light mode switching. ### Modifying Data Logic The core task management logic resides in `hooks/useGoals.ts`. If you need to add persistence (e.g., SQLite or Supabase), this is the place to implement those updates.
