Forem

Cover image for Pic Placeholder: categorised image placeholders
Nabil Alamin
Nabil Alamin

Posted on

4 3

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.


Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay