Skip to content

khaymanii/To-Do-List-App

Repository files navigation

📝 Voice-Enabled To-Do List App

This project is a React Native To-Do List Application enhanced with Voice-to-Task and Voice Command Delete features.
It allows users to add tasks and delete tasks using voice commands for a seamless and hands-free experience.


🚀 Features

  • ✅ Add, search, toggle, and delete tasks with voice command
  • 🗣️ Voice-to-Task functionality via Floating Action Button (FAB)
  • ✂️ Automatic splitting of multiple dictated tasks (e.g. “Buy groceries and call mom”) into separate tasks
  • 🌗 Dark and light mode toggle
  • 🔔 Toast notifications when tasks are added
  • 📅 Real-time task search by title, description, or date

🧠 Voice-to-Task Implementation

When the Floating Action Button (FAB) is pressed, the app:

  1. Activates the microphone using react-native-voice.
  2. Transcribes spoken input into text.
  3. Parses and splits the text using common connectors like and, then, also.
  4. Adds each parsed segment as a new task to the task list.
  5. Displays a toast notification for each new task.

📝 Example

Voice Input: Buy groceries and call mom and water the plants

Parsed Tasks:

  • Buy groceries
  • Call mom
  • Water the plants

🧹 Voice Command Delete Implementation

The app listens for delete commands like:

  • “Delete task name
  • “Remove task name
  • “Clear task name

When detected, the corresponding task is removed from the list, and a toast message is displayed.

🗣️ Example

Voice Input: Delete buy groceries

Action:
✅ Task “Buy groceries” is deleted.

🧠 API Choice: Speech-to-Text

For speech recognition, I used:

  • react-native-voice — a lightweight and reliable speech-to-text library for React Native (iOS and Android).
  • This API provides real-time transcription of the user’s speech and exposes event listeners for starting, stopping, and receiving recognized text.

Why this API:

  • It works offline (depending on device support).
  • It’s simple to integrate and requires no external cloud API key.
  • It provides continuous listening mode which is ideal for short to-do voice inputs.

🧠 Natural Language Parsing Approach

The app uses a rule-based natural language parsing logic to interpret spoken commands intelligently.

1. Preprocessing

  • Convert the entire transcribed text to lowercase.
  • Trim leading and trailing whitespaces.
  • Normalize punctuation (e.g., remove trailing periods or commas).

2. Intent Detection

  • If the text starts with a delete keyword such as:

    • delete
    • remove
    • clear

    → The parser extracts the text after the keyword as the task to delete.

    Example:

    • Input: delete call mom
    • Detected Intent: delete
    • Extracted Task: call mom
    • Action: remove task "Call mom" from the list.

3. Task Splitting (for Additions)

  • If no delete keyword is found, the parser assumes the intent is to add tasks.

  • The text is split into multiple tasks using common natural connectors:

    • and
    • then
    • commas ,
    • also
  • The resulting array is cleaned:

    • Remove empty strings
    • Trim whitespaces for each segment
    • Capitalize the first letter for readability

    Example:

    • Input: buy groceries and call mom, then clean the kitchen
    • Split → ["buy groceries", "call mom", "clean the kitchen"]
    • Final → ["Buy groceries", "Call mom", "Clean the kitchen"]

4. Task Creation

  • Each parsed segment is added to the task list context individually.
  • A toast notification confirms each addition: ✅ Task added: "Buy groceries"

5. Future Parsing Enhancements

  • Support for fuzzy matching on delete (e.g., “Delete groceries” deletes “Buy groceries”).
  • Handling more complex phrases (e.g., “Remind me to...” or “Set a task for...”).
  • Multi-language support for task commands.

🛠️ Tech Stack

  • React Native (Expo)
  • TypeScript
  • React Navigation (Stack)
  • AsyncStorage for local persistence
  • Context API + Hooks for state management
  • React Native Voice for Speech-To-Text

Requirements

  • Node.js (>=16)
  • Expo CLI (optional) or use npx expo commands

Install & Run

  1. Clone this repo
  2. cd To-Do-List-App
  3. npm install or yarn
  4. npx expo start (or expo start)
  5. Run on emulator or physical device using Expo Go

About

A Technical assessment task for AAIR Labs React Native Developer Position

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors