🌍 polski ∙ English

To-do list

• Try it Now
• Presentation
• Description
• Technologies
• Setup
• Application view

🎬 Presentation

📝 Description

'To-do List' is an application built using the React.js library.

The application enables:

• downloading example tasks,
• adding new tasks to the list,
• marking tasks as completed,
• searching for tasks,
• displaying task details,
• removing tasks from the list,
• hiding completed tasks,
• marking all tasks as completed.

Utilize this application to efficiently manage your tasks and track progress in completing your duties!

User Instructions:

1. Downloading example tasks:
   • Select the "Download sample tasks" option to load a set of sample tasks into the list.
2. Adding a task:
   • Enter the task name in the text field.
   • Press the "Dodaj zadanie" button or hit the Enter key to add the task to the list.
3. Marking a task as completed:
   • Click on the checkbox next to the task to mark it as completed.
4. Searching for tasks:
   • Enter the desired word or phrase in the search field.
   • Tasks matching the search criteria will be automatically displayed on the list.
5. Displaying task details:
   • Click on the task in the list to view its details.
6. Removing a task:
   • Click the delete button (trash can icon) next to the task to remove it from the list.
7. Hiding completed tasks:
   • Use the "Ukryj ukończone" or "Pokaż ukończone" option to hide or reveal completed tasks on the list.
8. Marking all tasks as completed:
   • Utilize the "Ukończ wszystkie" option to mark all tasks as completed.

🛠 Technologies

• JavaScript ES6+ Features
• React
• JSX
• CSS Grid
• CSS Flex
• Normalize.css
• Styled Components
• Media Queries
• Controlled Components
• Redux
• Redux Toolkit
• Redux Saga
• Redux Router

⚙ Setup

To run the program from the 'to-do-list-react' repository on your local computer, you can follow these steps:

1. Downloading the source code:
   Clone the repository from the GitHub page to your local computer using the command:

     git clone https://github.com/mariuszmmm/to-do-list-react.git

2. Dependency Installation:
   Navigate to the project directory, then install all required dependencies using a package manager like npm:

    cd to-do-list-react
    npm install

3. Launching the Application:
   After installing the dependencies, you can run the application locally. Use the command:

    npm start

This command will start the application in developer mode, opening it in a browser at http://localhost:3000.

🖥 Application view

The application is fully responsive and adapts to various devices.
Screenshots showcase the app's appearance on both phones and tablets, demonstrating how it responsively adjusts to screen size changes

• 320 x 568

• 600 x 960