Skip to content

FlowTasks is a beautifully designed task management application built with React Native and Expo. Featuring an elegant UI with dark/light themes, customizable task categories, timed tasks, and intuitive organization. Perfect for users who appreciate modern design and efficient productivity tools.

Notifications You must be signed in to change notification settings

Soliux/Flow-Tasks

Repository files navigation

FlowTasks

Expo React Native TypeScript License

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

FeaturesScreenshotsInstallationUsageContributingLicense

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

FlowTasks Home Page

Installation

Prerequisites

Setup

  1. Clone the repository:
git clone https://github.com/Soliux/Flow-Tasks.git
cd Flow-Tasks
  1. Install dependencies:
npm install
# or if you use yarn
yarn install
  1. Start the development server:
npx expo start
# or
npm start
# or
yarn start
  1. 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

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

About

FlowTasks is a beautifully designed task management application built with React Native and Expo. Featuring an elegant UI with dark/light themes, customizable task categories, timed tasks, and intuitive organization. Perfect for users who appreciate modern design and efficient productivity tools.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published