Skip to content

README.md

Latest commit

 

History

History
183 lines (142 loc) · 7.18 KB

README.md

File metadata and controls

183 lines (142 loc) · 7.18 KB

Task Manager App

A modern React Native and Expo task manager with an intuitive interface, task prioritization, status tracking, and dark mode support.

Getting Started

Prerequisites

  • Node.js (v18 or higher recommended)
  • npm or yarn
  • iOS Simulator (for iOS development) or Android Studio (for Android development)
  • Expo Go app (for testing on physical devices)

Installation

  1. Clone the repository

    git clone git@github.com:AmrRiyad/task-manager.git
cd task-manager

  2. Install dependencies

    npm install

  3. Start the development server

    npm start

  4. Run on your preferred platform

    • Scan the QR code with Expo Go app on your physical device
    • Press i for iOS simulator
    • Press a for Android emulator

Available Scripts

npm start          # Start Expo development server
npm run lint       # Run ESLint

Usage Guide

Creating a Task

  1. Tap the pencil icon in the top-right corner of the Tasks screen
  2. Enter a title (required) and description (optional)
  3. Select a priority level: Low, Medium, or High
  4. Set the initial status: Todo, In Progress, or Done
  5. Tap Save Task button

Managing Tasks

  • Edit Task: Tap on the task title to open the edit screen where you can:

    • Update the title and description
    • Change the priority level
    • Update the status
    • Delete the task

  • Quick Delete: Use the trash icon on the task card for quick deletion

Filtering Tasks

Use the tab bar at the top of the task list to filter:

  • All Tasks - View all tasks grouped by status
  • Todo - View only pending tasks
  • In Progress - View tasks currently being worked on
  • Done - View completed tasks

Sorting Tasks

  1. Tap the three dots icon (⋮) next to the add task button in the header
  2. A bottom sheet will appear with sort options:
    • Priority - Sort tasks by priority (High → Medium → Low)
    • Newest First - Show most recently created tasks first
    • Oldest First - Show oldest tasks first

Changing Theme

  1. Navigate to the Settings tab
  2. Select your preferred theme:
    • Light - Light color scheme
    • Dark - Dark color scheme
    • System - Follow device system settings

Features

Core Functionality

  • ✅ Add Tasks - Create new tasks with title, description, priority, and status
  • ✏️ Edit Tasks - Update task details through an intuitive modal interface
  • ✓ Mark Complete - Toggle tasks through three states: Todo → In Progress → Done
  • 🗑️ Delete Tasks - Remove tasks
  • 📋 View All Tasks - See all tasks organized by status with filtering options
  • 👁️ View Details - Tap any task to see full details in a dedicated screen

User Experience

  • 🌓 Theme Support - Light, Dark, and System theme modes with persistent preferences
  • 🔍 Smart Filtering - Filter tasks by status (All, Todo, In Progress, Done)
  • 📊 Task Sorting - Sort tasks by Priority, Newest First, or Oldest First with independent sorting per category
  • 🎯 Priority Levels - Low, Medium, and High priority indicators
  • 📊 Status Tracking - Visual indicators for task status (Todo, In Progress, Done)
  • 🔔 Toast Notifications - Success, warning, and error feedback for all actions

Tech Stack

Core Dependencies

  • React Native (0.81.5) - Cross-platform mobile framework
  • Expo (~54.0.22) - Development platform and tooling
  • Expo Router (~6.0.14) - File-based routing system
  • TypeScript (~5.9.2) - Type safety and developer experience

UI Libraries

  • Lucide React Native (^0.552.0) - Beautiful icon library
  • React Navigation (^7.1.8) - Navigation infrastructure

Project Structure

task-manager/
├── app/                          # Application screens (file-based routing)
│   ├── (tabs)/                   # Tab-based navigation group
│   │   ├── _layout.tsx          # Tab layout configuration
│   │   ├── index.tsx            # Main task list screen (contains all task state)
│   │   └── settings.tsx          # Settings screen
│   ├── task/                     # Task-related screens
│   │   ├── [id].tsx             # Task edit screen (full CRUD capabilities)
│   │   └── new.tsx              # New task creation screen
│   └── _layout.tsx              # Root layout with theme provider
├── components/                   # Reusable components
│   ├── forms/                   # Form components
│   │   ├── form-header.tsx      # Reusable form header with back/save buttons
│   │   └── form-input.tsx       # Reusable form input with validation
│   ├── tasks/                   # Task-related components
│   │   ├── empty-state.tsx      # Empty state when no tasks
│   │   ├── grouped-task-list.tsx # Tasks grouped by status
│   │   ├── priority-selector.tsx # Priority dropdown selector
│   │   ├── status-selector.tsx  # Status dropdown selector
│   │   ├── task-card.tsx        # Individual task card component
│   │   ├── task-list.tsx        # Simple task list component
│   │   └── task-modal.tsx       # Task modal (legacy, may be unused)
│   ├── ui/                      # UI components
│   │   ├── confirm-dialog.tsx   # Confirmation dialog component
│   │   ├── dropdown-selector.tsx # Reusable dropdown selector
│   │   ├── save-button.tsx      # Sticky save button component
│   │   ├── sort-bottom-sheet.tsx # Sort options bottom sheet
│   │   ├── tabs.tsx             # Custom tab component
│   │   └── toast.tsx            # Toast notification system
│   ├── themed-text.tsx          # Theme-aware text component
│   └── themed-view.tsx          # Theme-aware view component
├── contexts/                     # React Context providers
│   └── theme-context.tsx        # Theme state management (persisted)
├── hooks/                        # Custom React hooks
│   ├── use-color-scheme.ts      # Theme-aware color scheme
│   ├── use-color-scheme.web.ts  # Web-specific color scheme hook
│   ├── use-tasks.ts             # Task state management hook
│   └── use-theme-color.ts       # Theme color utilities
├── types/                        # TypeScript type definitions
│   └── task.ts                  # Task-related types and interfaces
├── utils/                        # Utility functions
│   ├── date-helpers.ts          # Date formatting utilities
│   ├── shared-styles.ts         # Shared style definitions
│   ├── task-callbacks.ts        # Task callback management
│   ├── task-helpers.ts          # Task-related helper functions
│   └── validation-helpers.ts    # Form validation utilities
├── constants/                    # App constants
│   └── theme.ts                 # Color definitions
└── package.json                  # Dependencies and scripts

Acknowledgments