Создать приложение "Typing Speed Trainer" на React, которое оценит скорость печати пользователя. Приложение должно предоставлять пользователю текст для ввода, показывать правильные и неправильные символы разными цветами, а также отображать статистику по скорости печати и числу ошибок.

Пример сайта: https://monkeytype.com/

1. React:

• Использовать React для построения интерфейса приложения.

• Использовать любой стейт-менеджер на выбор (Redux, MobX, Context API и т.д.).

2. Функциональность:

• Отображение текста для ввода. Текст можно брать из любого источника (например, заранее определенный массив строк).

• Подсветка правильных и неправильных символов разными цветами в реальном времени, пока пользователь вводит текст.

• Подсчет скорости печати (слов в минуту, WPM).

• Отображение количества ошибок (неправильно введенных символов).

3. Интерфейс:

• Должен быть простой и интуитивно понятный интерфейс.

• Разметка и стилизация должны быть выполнены с помощью CSS-in-JS или CSS-фреймворка (например, styled-components, CSS модули, или любая другая технология на ваше усмотрение).

• Адаптивный дизайн, чтобы приложение хорошо отображалось на мобильных устройствах.

4. Производительность:

• Обеспечить быструю работу приложения, чтобы оно не задерживалось при вводе текста.

• Минимизировать количество перерисовок компонентов React.

5. Дополнительно:

• Должно быть сообщение или экран с результатами после завершения ввода текста, показывающий WPM и количество ошибок.

• Добавить возможность перезапустить упражнение.

1. Создание проекта:

• Создать новый проект на Create React App или с использованием другого подходящего инструмента.

• Установить и настроить выбранный стейт-менеджер.

2. Создание интерфейса:

• Разработать компонент для отображения текста.

• Разработать компонент для ввода текста пользователем.

3. Подсветка введенного текста:

• Реализовать логику сравнения ввода пользователя с предоставленным текстом.

• Добавить стилизацию для правильно и неправильно введенных символов.

4. Подсчет статистики:

• Реализовать подсчет скорости печати (WPM).

• Реализовать подсчет ошибочных символов.

5. Финализация и улучшения:

• Добавить экран с результатами.

• Добавить кнопку для перезапуска тренировочного упражнения.

• Оптимизировать приложение для повышения скорости работы.

• Рабочее приложение, соответствующее всем вышеописанным требованиям.
• Чистый и понятный код, разделенный на компоненты.
• Приложение должно быть оптимизировано для быстрой работы.
• Правильно структурированные и документированные файлы с комментариями, объясняющими ключевые части кода.

• Правильность и полнота выполнения задания.
• Чистота и структурированность кода.
• Уровень владения React и выбранным стейт-менеджером.
• Оптимизация производительности и скорость работы приложения.
• Внимание к деталям и стилю интерфейса.

Tools needed to run this app: node and npm

• npm install to install dependencies
• npm start to run the app
• Go to https://localhost:3000