Catalog Lichi. Virtual scroll (Next js)

demo.

Требования:

Необходимо создать простое веб-приложение с использованием Next.js, которое отображает список элементов с помощью виртуальной прокрутки. Список элементов должен быть получен из предоставленной конечной точки API. Каждый элемент в списке должен отображать заголовок и описание.

• Использовать Next.js для создания веб-приложения.
• Получать список элементов из следующей конечной точки API: https://api.lichi.com/category/get_category_product_list

Реализуйте виртуальную прокрутку для эффективного отображения элементов в списке. Список должен отображать только видимые элементы на экране и загружать дополнительные элементы по мере прокрутки пользователем. Отображение названия и описания каждого элемента в списке.Скролл должен быть подвязан к глобальному. Разрешается использование любых библиотек или самописных решених (не использовать react-virtualized, аналоги допустимы). Стилизуйте приложение с помощью SASS или SCSS.

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

• Next js
• react-intersection-observer
• module.scss

Запуск локально

Экспорт проекта локально на компьютер:

git clone https://github.com/GragertVD/virtual-scroll-lichi.git

Для установки зависимостей:

npm install

Для запуска на localhost:3000:

npm start

Demo

Посмотреть приложение в действии можно на Versel