Skip to content

Latest commit

 

History

History
72 lines (53 loc) · 2.34 KB

README.md

File metadata and controls

72 lines (53 loc) · 2.34 KB
Raw

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