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.
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.
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.
[!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!
β¦and many more features!
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:
npm install -g expo-cli
.env
file in the root directory of the project with your Supabase credentials:
EXPO_PUBLIC_SUPABASE_URL=your_supabase_url
EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
git clone https://github.com/hoangsonww/Task-Manager-ReactNative.git
cd Task-Manager-ReactNative
Using npm:
npm install
Using Yarn:
yarn install
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:
a
or i
in the terminal to open the app on Android/iOS, respectively, with the simulator/emulator running), orw
in the terminal, it will then open a new tab in your default browser).
[!IMPORTANT] Note: The web version may not display correctly on larger screens. Also, some functionalities, like drag-and-drop, date picker, time picker, etc. may not work as expected on the web since they are designed for mobile devices.
Once the app is running, you can start using TaskNexus to manage your tasks. Here are some key features and how to use them:
[!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.
+not-found
screen (though no such routes are present in the app - itβs technically impossible to get lost!).β¦ and so much more! set up the app locally and explore its features!
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...)
The Supabase database schema for TaskNexus includes the following tables:
tasks
TableColumn 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
TableColumn 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) |
scripts
folder, this script resets the project state as needed.npm run format
or yarn format
to format the entire project. It formats most (if not all) files in the project according to the Prettier configuration.chmod +x <script-name>.sh
to make it executable, then run ./<script-name>.sh
to execute it.docker-compose.yml
) to build and run the Docker container, by running docker-compose up --build
. Ensure that Docker is installed and running on your system.make start
, make format
, make test
, etc. This is optional and not required for the app to function, but it can be useful for quick access to common commands.TaskNexus includes unit and integration tests to ensure the appβs functionality and reliability. The tests are written using Jest and React Testing Library.
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.
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.
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.
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.
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!