TaskNexus - Modern Task Management

Overview

TaskNexus is a comprehensive task management solution designed for modern users who need reliable, efficient, and beautiful task tracking across all their devices. Built with cutting-edge technologies and best practices, it offers a seamless experience whether you're on iOS, Android, or the web.

🎯

Purpose-Built

Designed specifically for efficient task management with an intuitive interface that gets out of your way.

⚡

Lightning Fast

Optimized performance with real-time updates and smooth animations throughout the app.

🔒

Secure & Private

Your data is protected with Supabase authentication and row-level security policies.

📊

Visual Analytics

Beautiful charts and statistics to help you understand your productivity patterns.

Why TaskNexus?

The name "TaskNexus" reflects the app's core purpose – serving as a central hub (nexus) for all your tasks. It conveys a sense of connectivity and organization, bringing together tasks from different aspects of your life into one unified, powerful platform.

Key Features

📝

Task Management

Add, update, and delete tasks effortlessly
Drag-and-drop reordering with smooth animations
Mark tasks as complete/incomplete with a tap
Color-coded tasks for easy categorization
Due date and time tracking

☁️

Cloud Synchronization

Real-time sync across all devices
Supabase-powered backend
WebSocket-based live updates
Automatic conflict resolution
Manual refresh capability

📊

Statistics & Charts

Pie chart for completion ratios
Bar chart for overdue vs. upcoming tasks
Line chart for tasks over time
Theme-adaptive transparent charts
Real-time chart updates

🎨

Theming & UI

Dark and light mode support
Smooth theme transitions (200ms)
System theme auto-detection
Material Design components
Custom bottom tab bar

🔐

Authentication

Secure user registration and login
Supabase authentication integration
Row-level security policies
Session management
Password encryption

🚀

Performance

Optimized React Native components
Efficient state management with Context API
Smooth 60 FPS animations
Lazy loading and code splitting
Minimal bundle size

System Architecture

TaskNexus follows a modern, scalable architecture pattern with clear separation of concerns. The application is built using React Native with Expo, leveraging TypeScript for type safety and Supabase for backend services.

graph TB subgraph "Client Layer" A[Mobile App - iOS/Android] B[Web App] C[React Native Components] end subgraph "Application Layer" D[Expo Router] E[Context API State Management] F[Task Context] G[Theme Context] end subgraph "UI Components" H[Home Screen] I[Stats Screen] J[Auth Screens] K[Custom Tab Bar] L[Chart Components] end subgraph "Backend Services" M[Supabase Client] N[Authentication Service] O[Real-time Subscriptions] P[PostgreSQL Database] end subgraph "Data Layer" Q[Tasks Table] R[Users Table] S[Row Level Security] end A --> C B --> C C --> D D --> E E --> F E --> G F --> H F --> I G --> K H --> M I --> M J --> N M --> O M --> N N --> P O --> P P --> Q P --> R P --> S style A fill:#4CAF50 style B fill:#4CAF50 style M fill:#3ECF8E style P fill:#336791 style E fill:#61DAFB

Component Architecture

graph LR A[App Root] --> B[Layout] B --> C[Theme Provider] B --> D[Task Provider] C --> E[Navigation] D --> E E --> F[Tab Screens] F --> G[Home] F --> H[Stats] F --> I[Auth] style A fill:#FF6B6B style B fill:#4ECDC4 style C fill:#45B7D1 style D fill:#FFA07A style E fill:#98D8C8

Data Flow

sequenceDiagram participant U as User participant C as Component participant Ctx as Context participant S as Supabase participant DB as Database U->>C: Interact (Add Task) C->>Ctx: Update State Ctx->>S: API Call S->>DB: Insert Data DB->>S: Confirm S->>Ctx: Real-time Update Ctx->>C: Re-render C->>U: UI Update

Project Structure

Task-Manager-ReactNative/
├── 📱 app/                    # Expo Router screens
│   ├── _layout.tsx           # Root layout with providers
│   ├── index.tsx             # Flash/Splash screen
│   └── (tabs)/               # Tab-based navigation
│       ├── home.tsx          # Task management screen
│       ├── stats.tsx         # Analytics screen
│       ├── login.tsx         # Authentication screen
│       └── register.tsx      # Registration screen
├── 🎨 components/            # Reusable components
│   ├── Chart.tsx            # Chart visualizations
│   ├── CustomTabBar.tsx     # Custom tab bar with theme toggle
│   ├── TaskAddModal.tsx     # Task creation modal
│   └── TaskItem.tsx         # Individual task component
├── 🎯 contexts/              # Global state management
│   ├── TaskContext.tsx      # Task state & operations
│   └── ThemeOverrideContext.tsx  # Theme management
├── 🔧 lib/                   # Utilities & configuration
│   └── supabaseClient.ts    # Supabase initialization
├── 💅 styles/                # Component styles
│   ├── HomeScreenStyles.ts
│   ├── StatsScreenStyles.ts
│   └── ...
├── 🎭 constants/             # App constants
│   └── Colors.ts            # Theme colors
├── 🪝 hooks/                 # Custom React hooks
│   └── usePrevious.ts       # Previous state hook
├── 📦 types/                 # TypeScript definitions
│   └── types.ts             # Shared types
├── 🗄️ supabase/              # Database schema
│   └── db.sql               # PostgreSQL schema
├── 🧪 __tests__/             # Test files
├── 🐳 Dockerfile             # Container configuration
└── 📝 README.md              # Documentation

App Gallery

📱 iOS Platform

Flash Screen

Home - Light Mode

Stats - Light Mode

Home - Dark Mode

Stats - Dark Mode

🤖 Android Platform

Flash Screen

Home - Light Mode

Stats - Light Mode

Home - Dark Mode

Stats - Dark Mode

🌐 Web Platform

Home - Light Mode

Stats - Light Mode

Home - Dark Mode

Stats - Dark Mode

✨ Interactive Demos

iOS User Experience

Android User Experience

Real-time Synchronization Across Devices

Note: The GIFs and images may not fully represent the app's current state, as they were captured during development. The app has since been enhanced with new features and improvements. Clone the repository to experience the latest version!

Technology Stack

Core Technologies

Backend & Database

UI & Charts

DevOps & Deployment

Testing & Quality

State Management

React Context API for global state management with TaskContext and ThemeContext providers

Navigation

Expo Router for file-based routing with nested layouts and tab navigation

Animations

React Native Reanimated for smooth 60 FPS animations and gesture handling

Real-time Updates

Supabase real-time subscriptions for instant synchronization across devices

Installation & Setup

1

Prerequisites

Node.js version 14 or above
npm or Yarn package manager
Expo CLI (install globally)
Android/iOS Emulator or Physical Device
Supabase Account for cloud sync

# Install Expo CLI globally
npm install -g expo-cli

2

Clone the Repository

git clone https://github.com/hoangsonww/Task-Manager-ReactNative.git
cd Task-Manager-ReactNative

3

Install Dependencies

# Using npm
npm install

# Or using Yarn
yarn install

4

Configure Environment

Create a .env file in the root directory with your Supabase credentials:

EXPO_PUBLIC_SUPABASE_URL=your_supabase_url
EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

5

Set Up Database

Run the SQL schema from supabase/db.sql in your Supabase project:

-- Creates tasks table with row-level security
-- Run this in your Supabase SQL editor

6

Run the App

# Start the Expo development server
npm start

# Or use Expo CLI directly
npx expo start

# Clear cache if needed
npx expo start -c

Press a for Android, i for iOS, or w for Web

💡 Pro Tip

Use the shell scripts in the shell/ directory for common tasks:

./shell/start.sh - Start the app
./shell/format.sh - Format code
./shell/reset.sh - Reset project state

⚠️ Important

The web version may not display correctly on larger screens and some features like drag-and-drop may have limited functionality on web.

Documentation

📚 Usage Guide

Authentication: Register or login to access your tasks
Add Tasks: Tap the "Add Task" button to create new tasks
Reorder: Drag and drop tasks to adjust their order
Complete: Tap the checkbox to mark tasks as done
Statistics: View charts in the Stats tab
Theme: Toggle dark/light mode from the tab bar

🧪 Testing

# Run all tests
npm test

# Watch mode
npm run test:watch

# Coverage report
npm run test:coverage

Tests are located in the __tests__/ directory using Jest and React Testing Library.

🐳 Docker Support

# Build and run with Docker Compose
docker-compose up --build

# Stop containers
docker-compose down

Note: Docker setup is optimized for the web version of the app.

📊 Database Schema

Tasks Table

Column	Type	Description
id	UUID	Primary key
user_id	UUID	Foreign key to auth.users
text	Text	Task description
color	Text	Task color
due_date	Timestamp	Due date and time
completed	Boolean	Completion status

Available Scripts

npm start

Start the Expo development server

npm run android

Start on Android emulator

npm run ios

Start on iOS simulator

npm run web

Start on web browser

npm run format

Format code with Prettier

npm test

Run test suite

Contact & Support

👨‍💻

Developer

Son Nguyen

sonnguyenhoang.com

📧

Email

hoangson091104@gmail.com

GitHub

@hoangsonww

LinkedIn

Son Nguyen

🤝 Contribute

TaskNexus is open source and welcomes contributions! Feel free to:

Report bugs or request features via GitHub Issues
Submit pull requests to improve the codebase
Share feedback and suggestions
Star the repository if you find it useful!

📄 License

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

Note: This project is for educational purposes. Please credit the original author when using any part of this code.