Приложение: 'Анекдоты'

Вашему вниманию представляется приложение с развлекательными анекдотами. Интересующие вас анекдоты можно сразу найти по взаимосвязанному фильтру и поиску.

Технологии в проекте

Для написания проекта использовалась библиотека React, в основе проекта лежит сборка Create React App с флагом -template ts для возможности компиляции файлов компонентов с разметкой и простых файлов с JS в TypeScript.

• Для написания структуры стилей использовалась БЭМ методология, стили написаны на SCSS, который предлагает более удобный и интуитивно понятный синтаксис для понимания и реализации адаптивности на разных расширениях. Решено не использовать modules для уменьшения импортов в компоненты и невозможностью написания полноценных селекторов по БЭМ.
• Поиск анекдотов по фильтрам и поиску строится на основе запуска функции useEffect каждый раз когда один из параметров поиска меняется. Для сокращения количества запросов к серверу при изменении исходных данных внутри хука реализован паттерн Props Bounce. Он позволяет записывать в состояние данные с задержкой, что сокращает количество запросов к серверу.
• В качестве API JSON сервера для хранения базы данных на данном этапе выбран RTMP server. Для полноценной работы приложения небходимо скачать содежимое папки server и непосредственно запустить на локальном компьютере с помощью команды npm run start.
• Для запросов к серверу использовалась библиотека axios с удобным синтаксисом конфигурирования запросов.
• Приложение имеет каскадную структуру компонентов с разметкой, где головной компонент App рендерится в корневой блок div .
• Для удобного отображения блоков с анекдотами реализована пагинация через хук usePagination.
• Для управления состоянием приложения использовался React Redux Toolkit с использованием функции createSlice для автоматического создания экшенов и их последующей удобной типизации.

Реализация

Приложение разделено на 2 части:

• Блок с исходными данными в виде формы.
• Блок с результатами и пагинацией.

Технологии

           

Установка, настройка

Проект, развернутый на Github: GitHub Pages

• Установка зависимостей: npm install
• Режим разработки: npm run dev
• Запуск сервера: npm run start в директории server
• Сформировать проект для последующего размещения на ресурсах: npm run build
• Сформировать заново проект для отображения на GitHub pages: npm run deploy

Написать мне

---