Pic Placeholder: categorised image placeholders

arndom

Nabil Alamin

Posted on August 28, 2022

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.

demo image

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

GitHub logo 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.

landing

demo slideshow

landscape image

specific image

json output

Overview video

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

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:

 

Additional Resources / Info

Demo Video ⏬

Try it out.


💖 💪 🙅 🚩
arndom
Nabil Alamin

Posted on August 28, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Pic Placeholder: categorised image placeholders