Pic Placeholder: categorised image placeholders

Overview of My Submission

⏩ TLDR: Pic placeholder is a stylish image placeholder with 6 categories (animals, cats, dogs, houses, landscapes & people) which collectively sums up to 500+ images.

Demo.

The Idea: Usually I use lorem picsum to get placeholders, but they didn't allow searches by categories, so I made mine.

This solution uses images from unsplash, where the image details were converted to JSON and placed in redis(redis json) enabled with redis search for filtering by categories. The actual images are stored on aws s3. The client and api were built using NextJS.

 

Submission Category:

• Microservice Mavens (app also falls technically in the MEAN/MERN Mavericks)

 

Video Explainer of My Project

Language Used

• Javascript (NextJS, Node)

Link to Code

arndom / pic-placeholder

Pic placeholder is a stylish image placeholder with 6 categories (animals, cats, dogs, houses, landscapes & people) which collectively sums up to 500+ images.

🖼️ Pic Placeholder

Pic placeholder is a stylish image placeholder with 6 categories (animals, cats, dogs, houses, landscapes & people) which collectively sums up to 500+ images.

Overview video

Here's a short video that explains the project and how it uses redis

How it works

Pic placeholder is a microservice that provides endpoints to get placeholder images. These endpoints are:

• /api/categories/[type]
  • returns JSON of all images with the supported types filtered from redis
• /api/images/[id]
  • redirects to specific image stored on aws S3
• /api/images
  • returns JSON of all images from redis
• /api/random/[category]
  • redirects to a random image matching the category
• /api/random
  • redirects to a random image

How the data is stored:

There are two parts to this; the Redis JSON storage and the aws s3 storage.

• The Redis JSON contains the placeholders which are of this schema:

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

  …

View on GitHub

 

Additional Resources / Info

Demo Video ⏬

Try it out.

---

• Check out Redis OM, client libraries for working with Redis as a multi-model database.
• Use RedisInsight to visualize your data in Redis.
• Sign up for a free Redis database.