RSLang

Deploy: https://rslang-team31.netlify.app/
Backend: https://rslang-2020q3.herokuapp.com/

Main stack

• React

  • hooks Упрощает работу над приложением, ускоряет разработку.

• Redux

• Thunk Библиотека, которая позволяет вызвать экшн креатор, возвращая функцию. В т.ч. использовалась для тестирования асинхронных экшенов.

• TypeScript Одной из основных задач языка является добавление типизации. Использование типов позволяет быстрее рефакторить существующий код, делать проверку данных на этапе компиляции программы. Другое преимущество TypeScript – «самодокументирование» кода.

• Webpack Сборщик, основная цель которого состоит в том, чтобы собрать все файлы в бандлы.

• Eslint Для единообразия кода.

• SCSS

• Bulma Достаточно шустрый css фреймворк, никаких минусов.

• Jest Для тестирования.

Additional stack

• React-countdown-circle-timer Красивая и легкая библиотечка с круглым таймером, позволила сэкономить время, из минусов - лишняя зависимость.

• Uuid Использовалась для ключей, ключи с помощью uuid делать не надо.

• React-animate-on-scrol The best of the best библиотека для реакта для анимацией при скролле, так и напишите. минусы - если ваша вёрстка не совсем идеальна, а вы хотите поставить анимацию на блок без размеров, компонент анимашки сделает это за вас, но не думаю, что будете рады результату.

• Redux-mock-store Используется для тестирования асинхронных экшенов и middlware. mock store создаёт массив отправленных действий, который является журналом действий для тестов.

• Fetch-mock Библиотека для проверки того, какие данные мы мокаем, была ли функция вызвана и выполнен ли запрос. из плюсов - ускорение процесса тестирования, изоляция побочных эффектов и определённость получаемых данных.

• Recharts Библиотека для визуализации данных, в нашем случае - для построения графиков и круговых диаграмм на странице статистики. Recharts построена на компонентах React, легковесная, имеет подробную документацию с примерами.

• React-tabs React-библиотека для удобного и быстрого создания вкладок (табов) (применяется в компоненте, завершающем все игры).

• React-beautiful-dnd Для драгндропа