Task-Manager-ReactNative

TaskNexus - A Task Manager React Native App πŸ“±

Time to get organized! TaskNexus is a modern, cross-platform task management app built with React Native, Expo, and TypeScript. It allows users to efficiently manage their daily tasks with features like task addition, completion, deletion, drag-and-drop reordering, and interactive statistics visualization.

React Native Expo Node.js TypeScript JavaScript React Context npm Yarn React Native Paper React Native Chart Kit React Router React Native Vector Icons Supabase PostgreSQL WebSockets Docker GitHub Actions AWS Vercel GitHub Container Registry Jest React Testing Library Ruby on Rails Babel Prettier ESLint Husky

TaskNexus Logo

Table of Contents

Overview

TaskNexus - Task Manager React Native App is a modern, cross-platform mobile application built using React Native with Expo and TypeScript.

The app allows users to manage their daily tasks efficiently, with features like task addition, completion, deletion, and drag-and-drop reordering.

The app also includes a dedicated Stats screen with interactive charts (pie, bar, and line) for visualizing task statistics. It also features dark/light theme toggling with smooth transitions and a custom bottom tab bar for a better UI/UX.

TaskNexus Logo

TaskNexus Branding

I chose the name β€œTaskNexus” for the app to reflect its core purpose - a central hub for managing tasks.

I hope its name and branding convey a sense of connectivity and organization, with the app serving as a nexus for all tasks and to-dos.

iOS

Task Manager App - iOS Task Manager App - iOS Task Manager App - iOS Task Manager App - iOS Task Manager App - iOS Task Manager App - iOS Task Manager App - iOS Task Manager App - iOS Task Manager App - iOS

Android

Task Manager App - Android Task Manager App - Android Task Manager App - Android Task Manager App - Android Task Manager App - Android Task Manager App - Android Task Manager App - Android Task Manager App - Android Task Manager App - Android

Modals

Task Manager App - Add Modal Task Manager App - Add Modal Dark Task Manager App - Edit Modal Task Manager App - Edit Modal Dark

Web

Task Manager App - Web Task Manager App - Web Task Manager App - Web Task Manager App - Web Task Manager App - Web Task Manager App - Web

Screen Recordings (GIF)

Task Manager App - iOS Task Manager App - Android

Realtime Synchronization Demo

Task Manager App - Realtime Synchronization

[!IMPORTANT] The above GIFs and images may not fully represent the app’s current state, as they were recorded during development. The app has since been updated with new features and improvements. Please clone the repository and run the app to see the latest version in action!

[!NOTE] My apologies for the low quality of the GIFs - they were converted from high-resolution videos to reduce file size, which resulted in huge losses of quality. The app looks much better in real life, especially on mobile devices!

Features

Task Management

Cloud Synchronization

Statistics Visualization

Theme & UI

Flash Screen

…and many more features!

Technical Stack & Libraries

TaskNexus is built using a modern tech stack that includes both core and third-party libraries to enhance functionality and user experience. Here are the key components:

Core Dependencies:

Backend & Data:

Third-Party Dependencies:

Other:

Installation & Setup

Prerequisites

Clone the Repository

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

Install Dependencies

Using npm:

npm install

Using Yarn:

yarn install

Running the App

Start the Expo development server:

npm start
# or
yarn start

Alternatively, you can use the Expo CLI directly:

npx expo start

[!TIP] Note: You can also use the -c flag to clear the cache and start fresh if needed: npx expo start -c.

Then:

Usage Instructions

Once the app is running, you can start using TaskNexus to manage your tasks. Here are some key features and how to use them:

Authentication

[!NOTE] You will be required to log in or register before you can access the home screen and manage tasks. This is to ensure that your tasks are securely stored in the cloud and can be accessed from any device.

Home Screen

Stats Screen

Theme Toggle

Routing

… and so much more! set up the app locally and explore its features!

File Structure

Task-Manager-ReactNative
β”œβ”€β”€ app.json                       # Expo configuration file
β”œβ”€β”€ package.json                   # Project dependencies and scripts
β”œβ”€β”€ tsconfig.json                  # TypeScript configuration file
β”œβ”€β”€ .gitignore                     # Git ignore file
β”œβ”€β”€ Dockerfile                     # Dockerfile for containerization
β”œβ”€β”€ docker-compose.yml             # Docker Compose file for containerization
β”œβ”€β”€ jest.config.js                 # Jest configuration for testing
β”œβ”€β”€ babel.config.js                # Babel configuration for transpiling code
β”œβ”€β”€ jest.setup.js                  # Jest setup file for testing
β”œβ”€β”€ .env                           # Environment variables for Supabase credentials
β”œβ”€β”€ .github
β”‚   └── workflows
β”‚       └── ci.yml                 # GitHub Actions CI/CD workflow configuration
β”œβ”€β”€ app
β”‚   β”œβ”€β”€ _layout.tsx                # Main layout with theme, navigation, and context providers
β”‚   β”œβ”€β”€ index.tsx                  # Flash screen and redirection to home screen
β”‚   β”œβ”€β”€ +not-found.tsx             # Custom Not Found screen for undefined routes
β”‚   └── (tabs)
β”‚       β”œβ”€β”€ _layout.tsx            # Layout for tabbed screens
β”‚       β”œβ”€β”€ register.tsx           # Registration screen for user authentication
β”‚       β”œβ”€β”€ login.tsx              # Login screen for user authentication
β”‚       β”œβ”€β”€ home.tsx               # Home screen for task management
β”‚       └── stats.tsx              # Stats screen for displaying charts and statistics
β”œβ”€β”€ components
β”‚   β”œβ”€β”€ Chart.tsx                  # Reusable chart component for pie, bar, and line charts
β”‚   β”œβ”€β”€ CustomTabBar.tsx           # Custom bottom tab bar component (with theme toggle)
β”‚   β”œβ”€β”€ TaskAddModal.tsx           # Modal component for adding new tasks
β”‚   └── TaskItem.tsx               # Component for displaying individual tasks
β”œβ”€β”€ constants
β”‚   └── Colors.ts                  # Color definitions for light and dark themes
β”œβ”€β”€ contexts
β”‚   β”œβ”€β”€ ThemeOverrideContext.tsx   # React Context for theme override management (dark/light mode)
β”‚   └── TaskContext.tsx            # React Context for global task state management
β”œβ”€β”€ hooks
β”‚   └── usePrevious.ts             # Custom hook to capture previous state values
β”œβ”€β”€ lib
β”‚   └── supabaseClient.ts          # Supabase client configuration for database interactions
β”œβ”€β”€ scripts
β”‚   └── reset-project.js           # Script to reset project state (if needed)
β”œβ”€β”€ styles
β”‚   β”œβ”€β”€ HomeScreenStyles.ts        # Custom styles for the Home screen
β”‚   β”œβ”€β”€ StatsScreenStyles.ts       # Custom styles for the Stats screen
β”‚   β”œβ”€β”€ IndexStyles.ts             # Custom styles for the Flash screen and redirection
β”‚   β”œβ”€β”€ LayoutStyles.ts            # Custom styles for the main layout
β”‚   β”œβ”€β”€ TaskModalStyles.ts         # Custom styles for the task add modal
β”‚   β”œβ”€β”€ TaskItemStyles.ts          # Custom styles for individual task items
β”‚   β”œβ”€β”€ NotFoundStyles.ts          # Custom styles for the Not Found screen
β”‚   └── CustomTabStyles.ts         # Custom styles for the tab bar and related UI components
β”œβ”€β”€ ruby                           # Ruby backend for backup task management API
β”‚   β”œβ”€β”€ Gemfile                    # Ruby dependencies for the backup Rails backend
β”‚   β”œβ”€β”€ app.rb                     # Main Ruby API application file
β”‚   β”œβ”€β”€ config.ru                  # Rack configuration file for the Ruby app
β”‚   β”œβ”€β”€ app/                       # Ruby app directory
β”‚   β”‚   β”œβ”€β”€ controllers/           # Ruby app controllers directory
β”‚   β”‚   β”œβ”€β”€ models/                # Ruby app models directory
β”‚   β”œβ”€β”€ config/                    # Ruby app configuration directory
β”‚   β”œβ”€β”€ initializers/              # Ruby app initializers directory
β”œβ”€β”€ types
β”‚   └── types.ts                   # TypeScript type definitions for the project
β”œβ”€β”€ assets
β”‚   β”œβ”€β”€ fonts                      # Custom fonts for the app (Roboto)
β”‚   └── images                     # Images used in the app
β”œβ”€β”€ aws                            # AWS configuration files
β”‚   β”œβ”€β”€ main.tf                    # Terraform configuration for AWS resources
β”‚   β”œβ”€β”€ variables.tf               # Variables for AWS configuration
β”‚   β”œβ”€β”€ outputs.tf                 # Outputs for AWS configuration
β”‚   └── lambda
β”‚       └── handler.js             # Lambda function handler for AWS
β”œβ”€β”€ __tests__                      # Test files for the project
β”œβ”€β”€ __mocks__                      # Mock files for testing
β”œβ”€β”€ img                            # Screenshots and GIFs for the README
└── shell                          # Shell scripts for common tasks
    β”œβ”€β”€ run-platform.sh            # Script to run the app on a specific platform
    β”œβ”€β”€ format.sh                  # Script to format the project code
    β”œβ”€β”€ start.sh                   # Script to start the app
    β”œβ”€β”€ reset.sh                   # Script to reset the project state
    └── update.sh                  # Script to update project dependencies

(...and more files not listed here...)

Supabase Database Schema

The Supabase database schema for TaskNexus includes the following tables:

tasks Table

Column Name Data Type Description
id UUID Unique identifier for the task (primary key)
text Text The text content of the task
color Text Color associated with the task (optional)
due_date Timestamp Due date and time for the task (optional)
completed Boolean Indicates if the task is completed (default: false)
inserted_at Timestamp Timestamp when the task was created (default: current timestamp)
updated_at Timestamp Timestamp when the task was last updated (default: current timestamp)
user_id UUID Foreign key referencing the user who created the task

users Table

Column Name Data Type Description
id UUID Unique identifier for the user (primary key)
email Text Email address of the user (unique)
password Text Password hash for user authentication
created_at Timestamp Timestamp when the user was created (default: current timestamp)
updated_at Timestamp Timestamp when the user was last updated (default: current timestamp)

Supabase Database Schema

Scripts & Tools

Testing

TaskNexus includes unit and integration tests to ensure the app’s functionality and reliability. The tests are written using Jest and React Testing Library.

Running Tests

To run the tests, use the following command:

npm test
# or
yarn test

This will execute all tests in the __tests__ directory and output the results in the terminal.

Test Coverage

To check the test coverage, use the following command:

npm run test:coverage
# or
yarn test:coverage

This will generate a coverage report in the coverage directory, showing which parts of the code are covered by tests.

Watch Mode

To run tests in watch mode, which automatically re-runs tests when files change, use the following command:

npm run test:watch
# or
yarn test:watch

This is useful during development to quickly see the results of changes without having to manually re-run tests.

Known Issue

License

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

[!CAUTION] This project is for educational purposes only and is not intended for production use. It is a personal project to demonstrate my skills in React Native, Expo, and TypeScript. Please be sure to credit the original author if you use any part of this code in your own projects, regardless of use case.

Contact

For any questions, feedback, or suggestions, please contact the repository owner:


Thank you for checking out TaskNexus - A Task Manager React Native App! πŸš€πŸ“². Please feel free to contribute, report issues, or suggest improvements. Your feedback is always welcome!

πŸ” Back to top