vk-giphy

Тестовое задание для направления Фронтенд Веб-мессенджер в ВК

Используемые технологии

• React + все, что идет с CRA
• Redux + immer
• TypeScript
• Emotion
• Axios
• react-intersection-observer-hook

Реализованные фичи

• Все, что требовалось в задании (поиск, отправка сообщений)
• Обновленный дизайн по вкусу 😳
• Темная тема
• Экраны в GifPopup для ошибки ввода, ошибки сети, начального состояния.
• Анимация показа/скрытия у Popup
• Бесконечный скролл в GifPopup
• Поддержка выбора гифки через клавиатуру (WAI-ARIA practicies)
• Адаптивная стилизация для Popup на мобильных устройствах и десктопах
• Кеширование запросов к API через Service Worker
• Компонент TextArea, поддерживающий выделение команд. Ведет себя как простой ввод текста.

Локальный запуск

1. Склонируйте репозиторий

   git clone https://github.com/jarvis394/vk-giphy.git

2. Установите зависимости

   npm install

3. Вставьте токен GIPHY API в файл .env, как указано в .env.template

   touch .env
   echo REACT_APP_GIPHY_API_TOKEN=xxx > .env

4. Запустите проект

   npm run start

Сценарии

npm start

Запускает приложение

npm run build

Билдит приложение. Для того, чтобы запустить собранное приложение, можно, например, установить утилиту serve:

npm i serve -g
serve -s build

npm run lint

Производит линтинг и форматирование кода

Дизайн

Figma: тык

Результат

Выложен на хостинг Vercel: vk-giphy.vercel.app