neuhaus93 / todoasp

A simple Todoist clone to study some fundamentals of React Native + a Backend solution

TodoASP - React Native

This is a React Native project that is a clone of the popular to-do list app Todoist. The app allows users to create, edit, and delete tasks, as well as mark them as complete or incomplete.

Goals

This project is meant for studying and practicing mobile development. It will be improved in small steps.

Milestones

• Base Inbox page [ Apr 4, 2023 ]

  • Create task, with name, due date, description, and priority values
  • View & Edit tasks
  • Check tasks completed and uncompleted
  • Be able to toggle between seeing completed tasks and not seeing
  • Delete task
  • At this point, all data should be persisted locally with AsyncStorage

• Today page [ Apr 24, 2023 ]

  • Add routing the the application, make sure it supports Inbox and Today pages
  • Today page should show only overdue tasks and tasks due today. Separated between sections

todoASP.mp4

• Improve the date picker

• Add a dark theme

• To be determined

Getting Started

To get started with the project, clone this repository to your local machine:

git clone https://github.com/Neuhaus93/TodoASP.git

Then, navigate to the project directory and install the necessary dependencies:

cd TodoASP
npm install

Finally, start the project with:

npm run start

This will start the development server and open the Expo client in your browser. You can then use the Expo client to run the app on your iOS or Android device, or in a simulator.

Features

The Todoist clone has the following features:

• Create new tasks with a title and description
• Edit existing tasks
• Delete tasks
• Mark tasks as complete or incomplete
• View completed tasks separately

Technologies Used

The project was built with:

• React Native
• Expo
• Expo router
• React Native Animated

Contributing

Contributions to the project are welcome. To contribute, fork the repository and create a new branch for your changes:

git checkout -b my-new-feature

Then, make your changes and commit them with a descriptive message:

git commit -m "Add some feature"

Finally, push your changes to your fork and create a pull request.

License

This project is licensed under the MIT License.

todoasp's Issues

Implement the feature to edit task due date

At the moment, we can only update a task's name.

Objectives

• When pressing a task and opening the view task modal, we should be able to press the task due date to open the calendar to change the due date
• If dismissing the calendar without saving, the due date should not be altered;
• Add a small trash can button icon to delete existing due dates (only show if the task has a due date)

Add tests to utility functions

It would be good to add tests for the utility functions.

There should be Github actions preventing merging on master branch if there are tests not passing.

Show splash screen while loading tasks

At the moment, the application is currently showing the empty state view while loading the tasks.
This causes the app to have a flicker effect, not good.

Create and show a splash screen until the tasks finished loading.

Create the Inbox layout

Copy the Inbox layout from the Todoist App. Should have a simple empty screen as well.

Delete Task

On "View Task" modal, add a menu on the top right that has the option to delete the task.

Clicking delete must open a confirmation dialog that prevents the user from accidentally deleting the task.

This action has no return.

Implement the feature to check a task as completed

Currently, it is impossible to check a task as done, which makes a to-do app not very useful.

• Make it possible to press the task checkbox to mark it as done
• Add a little animation when pressing the checkbox
• Hide completed tasks (after the animation). An option to show completed tasks will be implemented in the future.

Navigation menu

The navigation menu allows users to navigate between Inbox and Today pages.
There will be more pages in the future, such as "Profile", "Settings", "Soon", but those two will be all for now.

The menu should be opened when clicking the (to be created) hamburger menu icon at the bottom left.

Improve the README.md of the project

At the moment the README sucks.

I have to improve it with project updates and goals, to make it more appealing.

Implement the feature to add task priority

Priorities are "P1", "P2", "P3", and "P4" (no priority).

Priorities P1 through P3 are color coded. The color should reflect on the task checkbox circle color.

Preview

Colors

	Border	Fill
High Priority	#D1453B	rgba(209,69,59,.1)
Medium Priority	#EB8909	rgba(235,137,9,.1)
Low Priority	#246FE0	rgba(36,111,224,.1)

Implement view and edit task modals

Clicking on a task should open a "View Task" modal, which should take just a small space at the bottom.

In the "View Task" modal, if the user clicks on the task name to edit, the modal should expand to full-screen, and the modal header should change to a Back arrow + "Edit task" text on the top left, and "Save" pressable on the top right. Save should be disabled if no changes in the task name happened.

TODO: Add clear images of the expected result

Improve the date picker

At the moment, a shortcut was taken on for the date picker. It is using a simple usage of the @react-native-community/datetimepicker library.

I want to have a more Todoist-like picker, with custom pressable for "Today", "Tomorrow", "Next week" and "No date", as well as a custom calendar showing the current week + 2 weeks by default, but that can be scrolled down indefinitely (or up to a certain range, to be determined during development).

Time picking is not to be added at the moment.

Toggle completed tasks visibility

Implement the feature to toggle the visibility of completed tasks.

Clicking on the "Mover Vertical" dots on the top right should open a quick menu that shows the option to toggle the visibility of the completed task.

By default, completed tasks should not be visible.

The preference must be persisted in AsyncStorage. Make it a session preference

Add basic create Todo item UI

Add the functionality to:

• Clicking the Plus button should open a small modal on the bottom, focused on the title input field;
• Clicking on the backdrop should close it;
• Task name is required, due date is not required. Create button should be disabled until the required fields are set.

• Disabled button bg: #e5e5e5

Add empty tasks list state for Inbox

There should be a special text and image showing when there are no tasks in the inbox list.

It should be a simple empty state with an icon and a similar text from the Todoist application:

"Your peace of mind is priceless"
"Well done! All your tasks are organized in the right place."

Implement the feature to add description to tasks

Should be able to add a description when creating a task.
On the tasks list, the description should now show more than one line. For longer descriptions, the text should behave as text-overflow: ellipsis

On View modal, we should be able to see the description. Pressing on it should open the Edit modal and with the description input focused.
Should be able to edit the description and save the new one.

Create tasks and make them persistent with Async Storage

At the moment we only have the UI for the Inbox tasks list and the create task modal.

We should:

• Add a date picker and make it usable in the create task modal;
• Create new tasks and persist them with Async storage;
• Get the tasks list from Async storage and show them in the inbox list.

Present tasks on Today page appropriately

Tasks on Today page are shown in a different manner than on Inbox page.

The Today page should be divided into two sections: "Overdue" and "Today".
The overdue section should show the date of the task normally, as on the Inbox page. This section can be shrunk/collapsed.
The Today section doesn't need to show the task date (since all tasks are due today).