Minimal starter with hot module replacement (HMR) for rapid development.
- React (18.x)
- Webpack (5.x)
- Typescript (4.x)
- Hot Module Replacement (HMR) + Fast Refresh
- Production build script
- Code linting (ESLint) and formatting (Prettier)
- Clone/download repo
npm install
Development
npm start
- Build app continuously (HMR enabled)
- App served @
https://localhost:3000
Production
npm run build
- Build app once (HMR disabled) to
/dist/
All commands
| Command | Description |
|---|---|
npm run dev |
Build app continuously (HMR enabled) and serve @ https://localhost:3000 |
npm start |
Build app once (HMR disabled) to /dist/ and serve @ https://localhost:3000 |
npm run build |
Build app to /dist/ |
npm run typecheck |
Run typescript check |
В рамках тестового задания необходимо реализовать SPA Web-приложение, которое позволит пользователю добавлять, удалять и просматривать таймеры обратного отсчёта.
Приложение должно быть реализовано с использованием функциональных компонентов React 18, Webpack 5 и TypeScript 5. При необходимости допустимо использование дополнительных библиотек. Проект нужно создать с нуля, а конфигурацию выполнить самостоятельно.
Задание разделено на секции, каждая секция содержит требования к реализации одной из возможностей приложения.
Основное окно приложения должно содержать ранее добавленные пользователем таймеры. Каждый таймер должен отображать актуальное значение и обновляться в режиме реального времени.
Таймер - это графический элемент, который отображает информацию о том, сколько осталось времени до
момента наступления момента M. Если момент M уже прошёл, то таймер может остановиться или
продолжить считать в обратном направлении (сколько прошло времени с момента M)
Таймеры должны располагаться в виде сетки, которая заполняется горизонтально и занимает всё доступное пространство. Сетка должна корректно отображаться на экранах как с большим, так и с маленьким разрешением.
Если пользователь закроет вкладку браузера с приложением, то при повторном открытии приложение должно отображать все ранее добавленные пользователем таймеры.
Пользователь должен иметь возможность добавить новый таймер в сетку. При добавлении таймера пользователь должен:
- Указать название таймера
- Выбрать стиль таймера из списка доступных (три радикально отличающихся стиля будет достаточно, требования к дизайну отсутствуют). С возможностью предпросмотра выбранного стиля
- Задать время работы таймера одним из двух способов:
- Указать конкретное количество времени, например 1 час и 20 секунд
- Указать конечную дату и время, например: 20.08.2025 10:30
Пользователь должен иметь возможность удалить таймер из сетки. Приложение должно спросить пользователя, действительно ли он хочет выполнить это действие.
В корне проекта должен быть README.md файл, который содержит инструкцию для запуска проекта и инструкцию для пользователя.
Проект должен быть представлен в виде git репозитория (можно отправить архивом, или опубликовать на github/gitlab). Коммиты должны быть разделены по features, а заголовок должен отражать их суть.