Todo Voice 🎙️📝

A modern React Native voice-powered todo application built with Expo. Use your voice to create, manage, and organize your tasks effortlessly using OpenAI's Whisper speech-to-text technology.

✨ Features

• Voice-to-Text: Create tasks hands-free using voice input powered by OpenAI Whisper
• Smart Multi-Task Creation: Speak multiple tasks at once and the app intelligently parses them
• Task Management: Mark tasks as complete/pending, edit, and delete with ease
• Persistent Storage: All tasks are saved locally using AsyncStorage
• Beautiful UI: Modern, gradient-based interface with smooth animations
• Organized View: Tasks grouped by status (Pending/Completed)
• Modal Editing: Full-screen modal for detailed task editing and management

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher)
• npm or yarn
• Expo CLI (will be installed with dependencies)
• iOS Simulator (Mac only) or Android Emulator or Expo Go app on your mobile device

🔑 Getting Your OpenAI API Key

This application requires an OpenAI API key to use the Whisper speech-to-text service. Follow these steps:

1. Create an OpenAI Account

   • Visit OpenAI Platform
   • Sign up or log in to your account

2. Generate an API Key

   • Navigate to API Keys
   • Click on "Create new secret key"
   • Give it a name (e.g., "Todo Voice App")
   • Copy the generated key immediately (you won't be able to see it again!)

3. Add Billing Information (if required)

   • Go to Billing
   • Add a payment method if you haven't already
   • Note: OpenAI charges for API usage, but the Whisper API is very affordable

🚀 Installation & Setup

1. Clone the repository

   git clone <your-repo-url>
   cd todo-voice

2. Install dependencies

   npm install

3. Set up environment variables

   ⚠️ Important: The .env file is not included in this repository for security reasons.

   • Copy the example environment file:

     cp .env.example .env

   • Open .env and replace your_openai_api_key with your actual OpenAI API key:

     OPENAI_API_KEY=xx-xxxx-xxxxxxxxxxxxxxxxxxxxx
     

   • Save the file

4. Start the development server

   npx expo start

5. Run the app

   • Press i for iOS simulator (Mac only)
   • Press a for Android emulator
   • Scan the QR code with Expo Go app on your phone

📱 How to Use

Creating Tasks with Voice

1. Tap the microphone button (FAB) at the bottom right of the screen
2. Speak your task(s):
   • Single task: "Buy groceries"
   • Multiple tasks: "Buy groceries, call the dentist, finish project report"
3. Tap to stop recording
4. The app will automatically transcribe your voice and create task(s)

Managing Tasks

• Mark Complete/Pending: Tap the status button on any task card
• Edit Task: Tap the "Edit" button to modify the task title
• Delete Task: Tap the "Delete" button to remove a task
• View Details: Tap on a task card to open the detailed modal view

Task Organization

• Tasks are automatically organized into two sections:
  • Pending Tasks: Tasks that are not yet complete
  • Completed Tasks: Tasks marked as done

🛠️ Tech Stack

• Framework: React Native with Expo
• Language: TypeScript
• State Management: React Context API
• Storage: AsyncStorage
• Voice-to-Text: OpenAI Whisper API
• Audio Recording: expo-av
• UI Components: React Native core components with custom styling
• Navigation: Expo Router (file-based routing)

📁 Project Structure

todo-voice/
├── src/
│   ├── components/         # Reusable UI components
│   │   └── TaskCard.tsx    # Individual task card component
│   ├── contexts/           # React Context providers
│   │   └── TaskContext.tsx # Global task state management
│   ├── hooks/              # Custom React hooks
│   │   ├── useTasks.ts     # Task management hook
│   │   └── useVoiceRecorder.ts  # Voice recording hook
│   ├── screens/            # Main app screens
│   │   └── TaskListScreen.tsx   # Main task list view
│   ├── services/           # External API services
│   │   └── speechToText.ts # Covert speech to text 
│   └── types/              # TypeScript type definitions
│       └── type.ts         # Task-related types
├── app/                    # Expo Router screens
│   └── index.tsx           # Entry point
├── .env.example            # Example environment variables
└── README.md               # This file

🔒 Security Notes

• ⚠️ Never commit your .env file to version control
• The .env file is already added to .gitignore for your protection
• Keep your OpenAI API key secure and don't share it publicly
• Consider using environment-specific keys for development and production

🐛 Troubleshooting

Voice Recording Not Working

• Ensure you've granted microphone permissions to the app
• Check your device's microphone hardware

API Key Errors

• Verify your API key is correctly set in .env
• Ensure there are no extra spaces or quotes around the key
• Check that your OpenAI account has billing enabled

App Won't Start

• Clear cache: npx expo start -c
• Reinstall dependencies: rm -rf node_modules && npm install

📄 License

This project is open source and available under the MIT License.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

👨‍💻 Developer

Built with ❤️ using React Native and OpenAI

---

Note: This app uses the OpenAI API which may incur costs based on usage. Please monitor your API usage on the OpenAI dashboard.