Pic Placeholder: размещение изображений по категориям


Обзор моей работы

⏩ TLDR: Pic placeholder — это стильный держатель изображений с 6 категориями (животные, кошки, собаки, дома, пейзажи и люди), которые в сумме дают 500+ изображений.

Демо.

Идея: Обычно я использую lorem picsum для получения плейсхолдеров, но они не позволяют искать по категориям, поэтому я сделал свой.

Это решение использует изображения из unsplash, где детали изображения были преобразованы в JSON и помещены в redis(redis json) с включенным поиском redis для фильтрации по категориям. Сами изображения хранятся на aws s3. Клиент и api были построены с использованием NextJS.

 

Категория заявки:

  • Microservice Mavens (приложение также технически попадает в MEAN/MERN Mavericks).

 

Видео-объяснение моего проекта

Используемый язык

  • Javascript (NextJS, Node)

Ссылка на код

arndom / pic-placeholder

Pic placeholder — это стильный плейсхолдер изображений с 6 категориями (животные, кошки, собаки, дома, пейзажи и люди), которые в сумме дают 500+ изображений.

Pic placeholder — это стильный плейсхолдер изображения с 6 категориями (животные, кошки, собаки, дома, пейзажи & люди), которые в сумме составляют 500+ изображений.

Обзорное видео

Вот короткое видео, которое объясняет проект и то, как он использует redis

Как это работает

Pic placeholder — это микросервис, который предоставляет конечные точки для получения изображений-плейсхолдеров. Этими конечными точками являются:

    • возвращает JSON всех изображений с поддерживаемыми типами, отфильтрованных из redis
    • перенаправляет на конкретное изображение, хранящееся на aws S3
    • возвращает JSON всех изображений из redis
    • перенаправляет на случайное изображение, соответствующее категории
    • перенаправляет на случайное изображение

Как хранятся данные:

Здесь есть две части: хранилище Redis JSON и хранилище aws S3.

  • В Redis JSON содержатся заполнители, которые соответствуют данной схеме:

    {
        file: { type: "number" }
        width: { type: "number" },
        height: { type:

Посмотреть на GitHub

 

Дополнительные ресурсы / информация

Демонстрационное видео ⏬

Попробуйте.


  • Ознакомьтесь с Redis OM, клиентскими библиотеками для работы с Redis как многомодельной базой данных.
  • Используйте RedisInsight для визуализации данных в Redis.
  • Подпишитесь на бесплатную базу данных Redis.

Оцените статью
devanswers.ru
Добавить комментарий