This is a training application built using React, Redux, Hooks and styled with styled-components. The app allows users to add, edit, and delete tasks, as well as mark them as completed or important. You can view a live demo of the project here: [https://nastyakamalova.github.io/Uno_Todo/].
Use React documentation. Use React components. Connect React and Redux. Use custom styles in a React app. Use styled-components Use of Hooks Apply React best practices and language style guides in code.
- React: A JavaScript framework for building applications.
- Redux: A predictable state container for managing the application's state.
- Hooks: Utilized for functional components to manage state and side effects.
- styled-components: A popular CSS-in-JS library for styling React components.
Task Management:
- Create, edit, and delete tasks and task lists effortlessly.
- Add due dates, notes or important/completed marks to each task.
- Filter visible tasks to see all tasks from all lists.
- Filter visible tasks to see only important or completed tasks.
- Search tasks by title. Language Selection:
- Personalize your experience by choosing from multiple language options. Palette Customization:
- Tailor the app's appearance to your liking with various color themes. Mode Switching:
- Easily toggle between light and dark modes for comfortable day and night usage.
Clone the repository to your local machine using the following command:
Navigate to the project directory:
Install the dependencies:
Use the following command to run the app on your desktop:
The app will automatically open in your default web browser.
Get Started:
Press the "Get Started" button to open the app.
Right Sidebar:
To create a new task list, navigate to the right sidebar and click on the "New List" button. To view a list, click on the list name that appears in the sidebar. Filter visible tasks by selecting the desired filter option. Choose from "Tasks" to view all tasks from all lists or "Important" for important tasks. Search for tasks by title using the search bar. Type the task title, and relevant tasks will be displayed. To cancel the search, click on the cross button. For Settings, click on the username displayed at the top of the sidebar. Customize the app's appearance by accessing the "Settings" modal. Choose a color palette, language, or mode to personalize your experience. To sign out, click on the "Sign Out" button.
Task List:
To delete or rename a task list, find the delete and edit icons near the list title. While the list is open, you can add a new task to that list by clicking on the "Add a task" button. Mark tasks as important or completed by clicking on the star for important or the square checkbox for completed tasks.
Task Edit Panel:
To open the task edit panel, click on the task. In the edit panel, you can edit the task title by tapping on the task name and making the necessary changes. Delete a task by pressing on the rubbish bin icon at the bottom. To close the edit panel, click on the chevron button at the bottom.
Note:
Add a note to a task by typing something in the "Add Note" section.