🌍 polski ∙ English

To-Do List Application

Try it now and discover all the possibilities of the application!

• Presentation
• Deployment
• Technologies
• Description
• Configuration
• Application views
• User Instructions
• Voice task input
• Contact Form

🎬 Presentation

🚀 Deployment

• New version :
  Features requiring communication with the database and user management have been implemented using Netlify – a platform offering serverless functions and authentication support. With Netlify GoTrue, the application allows users to manage their accounts, including registration, login, password reset and change, as well as account deletion. Additionally, the application enables storing task lists in the MongoDB database, which allows for later retrieval, editing, and saving. The application supports translating the entire site into three languages: Polish (pl), English (en), and German (de), using react-i18next. New features have also been implemented, such as dynamic translation of error messages using Cloud Translation API, which ensures that server messages are translated in real-time based on the user’s selected language. Another novelty is the migration to TanStack Query (formerly React Query) for handling queries and mutations in the app, which significantly simplifies state management and asynchronous operations. The entire application has also been adapted to work with TypeScript, improving code stability and easing maintenance.
  https://to-do-list.myprojects.pl

• Basic version :
  Currently, the basic version of the application is located on the gh-pages branch and can be accessed at:
  https://mariuszmmm.github.io/to-do-list-react

🛠 Technologies

• TypeScript, JavaScript (ES6+)
• React & JSX, React Router
• Redux, Redux Toolkit, Redux Saga
• TanStack Query (react-query)
• react-i18next, Cloud Translation API
• Netlify GoTrue.js
• MongoDB
• EmailJS
• Cloudinary (Image Management)
• Ably (Real-time Synchronization)
• OneSignal (Omni-channel Notifications)
• Google Drive API (Cloud Backups)
• @dnd-kit (Drag and Drop)
• Normalize.css, Styled Components
• CSS Grid & Flexbox, Media Queries
• Controlled Components

📝 Description

To-Do List is an application built with React and TypeScript. This version has been significantly expanded – in addition to the classic to-do list features, a number of new improvements and capabilities have been introduced:

• Core Features:

  • Fetch sample tasks (when the list is empty),
  • Add new tasks,
  • Mark tasks as completed,
  • Search tasks with the ability to show/hide filters and clear them,
  • Display task details,
  • Delete tasks,
  • Hide completed tasks,
  • Mark all tasks as completed and now also unmark all tasks.

• New features:

  • TypeScript support: The app has been rewritten in TypeScript for better type safety and maintainability.
  • TanStack Query: Replaced manual fetching (Redux Saga) with useQuery hooks to fetch sample tasks and lists, and useMutation hooks for list mutations and user-related operations.
  • react-i18next: App translation into pl, en, de.
  • Dynamic error translation: Server error messages are translated on the fly using the Cloud Translation API.
  • Streamlined state management: Redux and Saga remain only for global app state; fetching and mutation logic moved to TanStack Query.
  • User Account Management: (Implementation based on the Netlify GoTrue library with custom UI components.)
    • Registration,
    • Login,
    • Password reset and change,
    • Account deletion.
      
  • Voice task input: Ability to enter task content using speech recognition (Web Speech API).
  • Task Attachments: Ability to attach images to tasks (powered by Cloudinary).
  • Drag & Drop: Intuitively reorder users' tasks and lists (powered by @dnd-kit).
  • Real-time Sync: Instant updates across devices using Ably.
  • Archived Lists: Archive lists to keep your workspace clean without losing data.
  • Task Notifications: Integration with OneSignal allowing users to schedule task reminders (Push and Email).
  • Admin Panel & Cloud Backups: Advanced module for the system administrator to manage automated/manual backups of both the database (MongoDB) and media files (Cloudinary) to Google Drive, as well as system diagnostics and cleanup.

• Lists Page:
  After logging in, users can access the “Lists” page, where all saved lists from the MongoDB database are displayed. On this page, you can:

  • Preview the contents of a selected list,
  • Load the selected list into current to-do list,
  • Sort the list,
  • Delete the list.

• Saving a list to the database:
  After logging in, users can save the current to-do list to the database.

• Task Editing:
  Tasks can be edited (using the pencil icon) with options to undo and redo changes.

The application offers a user-friendly interface that supports effective task management.

⚙ Configuration

To run the to-do-list-react application locally, follow these steps:

1. Clone the Repository:
   Clone the GitHub repository to your local machine:

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

2. Install Dependencies:
   Navigate to the project directory and install all required dependencies:

    cd to-do-list-react
    npm install

3. Configure Environment Variables:
   Create a .env file in the root directory and define the following variables:

    ABLY_API_KEY="your_ably_api_key_here"

    GOOGLE_DRIVE_CLIENT_ID="your_google_drive_client_id_here"
    GOOGLE_DRIVE_CLIENT_SECRET="your_google_drive_client_secret_here"
    GOOGLE_DRIVE_REDIRECT_URI="https://your-netlify-app.netlify.app/"

    MONGODB_DATABASE="your_mongodb_database_name"
    MONGODB_URI="your_mongodb_connection_string"

    REACT_APP_ABLY_API_KEY="your_ably_api_key_for_react_here"
    REACT_APP_CONFIRMATION_URL="https://your-netlify-app.netlify.app/#/user-confirmation"
    REACT_APP_EMAILJS_PUBLIC_KEY="your_emailjs_public_key_here"
    REACT_APP_EMAILJS_SERVICE_ID="your_emailjs_service_id_here"
    REACT_APP_EMAILJS_TEMPLATE_ID="your_emailjs_template_id_here"
    REACT_APP_GOOGLE_DRIVE_CLIENT_ID="your_google_drive_client_id_here"
    REACT_APP_GOOGLE_DRIVE_REDIRECT_URI="https://your-netlify-app.netlify.app/"
    REACT_APP_NETLIFY_IDENTITY_URL="https://your-netlify-app.netlify.app/.netlify/identity"
    REACT_APP_RECOVERY_URL="https://your-netlify-app.netlify.app/#/account-recovery"

    TRANSLATION_API_KEY="your_google_translation_api_key_here"
    TRANSLATION_API_URL="https://translation.googleapis.com/language/translate/v2"

    WEBHOOK_SECRET="your_webhook_secret_here"

    CLOUDINARY_API_SECRET="your_cloudinary_api_secret_here"
    CLOUDINARY_CLOUD_NAME="your_cloudinary_cloud_name_here"
    CLOUDINARY_API_KEY="your_cloudinary_api_key_here"
    CLOUDINARY_UPLOAD_PRESET="your_unsigned_upload_preset_here"

4. Start the Application:
   Run the application in development mode:

    npm start

The app will launch in your browser at http://localhost:8888.

🖥 Application Views

The application is fully responsive and adapts to various devices, including smartphones, tablets, and desktops. Example views:

• 320x568 (Mobile view)
  

• 600x960 (Tablet view)
  

📄 User Instructions

Fetching Sample Tasks

• Select the "Fetch Sample Tasks" option – tasks will be fetched only if the current to-do list is empty.

Adding a Task

• Enter the task name in the text field and click "Add Task" or press Enter.
• Click the image icon to upload an attachment to the task.

Marking a Task as Completed

• Click the checkbox next to a task to mark it as completed.

Editing a Task

• Click the pencil icon to edit a task's content.
• Use the undo/redo options to revert or restore changes.

Adding images to tasks (available for logged-in users)

• Click the image icon to add an image to the task.
• You can add one image from your computer's disk or take a photo with your camera.

Task Notifications (available for logged-in users)

• Click the notification bell icon next to a task to schedule a notification.
• Choose a future date and time to receive a Push or email reminder at the specified moment.

Searching for Tasks

• Enter a keyword or phrase in the search field.
• Use the Show/Hide filter or Clear filter options for better control of results.

Task Management

• Display details: Click a task to view its detailed information.
• Delete task: Click the trash icon next to a task to delete it.
• Done all / Undone all: Allows you to mark all tasks as completed or unmark them.
• Enable/disable sorting: Toggles sorting mode. In list view, buttons will appear to move tasks up and down, or you can drag and drop them.

Undo and redo changes

• Click the "↺" button – the last action on the to-do list will be reverted.
• Click the "↻" button – the reverted action will be restored.
  Buttons are active only when undoing or redoing is possible.

Save list (available for logged-in users)

• Select the "Save List" option – the to-do list will be saved to the database.

User Account Management

• After logging in, the user gains access to:
  • Password change, account deletion, and other account features.
  • Lists Page: View saved lists, preview contents, load a list into the current to-do-list, or delete a list.
  • Save the current to-do list to the database.
  • Ability to add images to tasks.

🎤 Voice task input

The application allows you to dictate when adding and editing tasks using speech recognition. This feature uses the Web Speech API and is available in the add/edit task form.

How does it work?

• Next to the text field, there is a button with a microphone icon.
• Click the microphone to start listening – you can dictate the task content.
• The recognized text appears automatically in the text field.
• Clicking the microphone again stops listening.
• If your browser does not support speech recognition, the microphone button will be inactive.

Additional information:

• Various languages are supported – the app automatically adjusts the recognition language to the selected interface language.
• In task edit mode, speech recognition continues the existing content.
• Interim results are supported, so the text appears live as you speak (if the browser allows it).

📬 Contact Form

The application includes a contact form that allows users to send messages directly to the author. This form is integrated using EmailJS, enabling email sending without the need for a backend server.