내 제출물 개요

⏩ TLDR: Pic 자리 표시자는 6가지 범주(동물, 고양이, 개, 집, 풍경 및 사람)가 있는 스타일리시한 이미지 자리 표시자이며 총 500개 이상의 이미지를 합산합니다.

Demo .



아이디어: 보통 저는 자리 표시자를 얻기 위해 lorem picsum을 사용하지만 카테고리별 검색이 허용되지 않아서 직접 만들었습니다.

이 솔루션은 unsplash의 이미지를 사용합니다. 여기서 이미지 세부 정보는 JSON으로 변환되고 범주별 필터링을 위해 redis 검색이 활성화된 redis(redis json)에 배치됩니다. 실제 이미지는 aws s3에 저장됩니다. 클라이언트와 API는 NextJS를 사용하여 구축되었습니다.

제출 카테고리:

Microservice Mavens(앱은 기술적으로 MEAN/MERN Mavericks에도 속함)

내 프로젝트의 비디오 설명자

사용 언어

자바스크립트(NextJS, 노드)

코드 링크

무작위 / 그림 자리 표시자

Pic 자리 표시자는 6가지 범주(동물, 고양이, 개, 집, 풍경 및 사람)가 포함된 세련된 이미지 자리 표시자이며 총 500개 이상의 이미지를 합산합니다.

🖼️ 그림 자리 표시자

Pic 자리 표시자는 6개 범주(동물, 고양이, 개, 집, 풍경 및 사람)가 포함된 세련된 이미지 자리 표시자로서 총 500개 이상의 이미지를 합산합니다.

개요 비디오

다음은 프로젝트와 프로젝트에서 redis를 사용하는 방법을 설명하는 짧은 비디오입니다.

작동 방식

Pic 플레이스홀더는 플레이스홀더 이미지를 얻기 위한 엔드포인트를 제공하는 마이크로서비스입니다. 이러한 끝점은 다음과 같습니다.

/api/categories/[type]

redis에서 필터링된 지원되는 유형이 있는 모든 이미지의 JSON을 반환합니다

.

/api/images/[id]

aws S3에 저장된 특정 이미지로 리디렉션

/api/images

은 redis에서 모든 이미지의 JSON을 반환합니다

.

/api/random/[category]

카테고리

와 일치하는 임의의 이미지로 리디렉션합니다.

/api/random

임의 이미지

로 리디렉션

데이터 저장 방법:

여기에는 두 부분이 있습니다. Redis JSON 스토리지 및 aws s3 스토리지.

Redis JSON에는 다음 스키마에 해당하는 자리 표시자가 포함되어 있습니다.

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

…

View on GitHub

추가 리소스/정보

데모 비디오 ⏬



Try it out .

Redis를 다중 모델 데이터베이스로 사용하기 위한 클라이언트 라이브러리인 Redis OM을 확인하십시오.

RedisInsight을 사용하여 Redis에서 데이터를 시각화합니다.

free Redis database에 가입하세요 .