FlowTasks

A sleek, modern task management application built with React Native and Expo.

Features • Screenshots • Installation • Usage • Contributing • License

Features

✨ Beautiful UI - Modern interface with support for both light and dark themes
⏱️ Timer Tasks - Create tasks with countdown timers for time-sensitive activities
🔍 Task Categories - Organize your tasks with custom categories and color coding
📝 Task Details - Add detailed descriptions to your tasks for better context
🔄 Task Status - Easily track completed and uncompleted tasks
📅 Due Dates - Set due dates and times for your tasks
💾 Persistence - Your tasks are saved locally on your device

Screenshots

Installation

Prerequisites

• Node.js (v14 or newer)
• Expo CLI
• Yarn (optional, but recommended)

Setup

1. Clone the repository:

git clone https://github.com/Soliux/Flow-Tasks.git
cd Flow-Tasks

2. Install dependencies:

npm install
# or if you use yarn
yarn install

3. Start the development server:

npx expo start
# or
npm start
# or
yarn start

4. Open the app:
   • Use the Expo Go app on your phone to scan the QR code
   • Press 'a' to open in an Android emulator
   • Press 'i' to open in an iOS simulator

Usage

Creating a Task

1. Tap the "Add" tab in the bottom navigation bar
2. Fill in the task details:
   • Enter a title for your task
   • Select a category
   • Add an optional description
   • Choose a color tag
   • Set a due date and time
   • Toggle the timer option if needed
3. Tap "Create Task" to save your task

Timer Tasks

1. When creating a task, toggle "Timer Task" on
2. Use the slider to set the duration (from 5 seconds to 5 minutes)
3. Create the task to start the timer
4. The task will automatically mark as complete when the timer ends

Managing Tasks

• Tap on the checkbox to mark a task as complete
• Tap on a task with a description to view the details
• Tasks are automatically sorted into "Tasks," "Timers," and "Completed" sections

Project Structure

Flow-Tasks/
├── app/                  # Main application code
│   ├── (tabs)/           # Tab-based navigation screens
│   │   ├── index.tsx     # Tasks list screen
│   │   ├── add.tsx       # Add task screen
│   │   └── _layout.tsx   # Tab navigation layout
├── context/              # React context for state management
│   └── TodoContext.tsx   # Todo state management
├── types/                # TypeScript type definitions
│   └── todo.ts           # Todo-related types
├── constants/            # App constants
├── hooks/                # Custom React hooks
└── components/           # Reusable components

Tech Stack

• React Native - Mobile app framework
• Expo - React Native toolkit
• TypeScript - Type-safe JavaScript
• React Navigation - Navigation library

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

_{Built with ❤️ by Soliux}