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:
Additional Resources / Info
Demo Video ⏬
- 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.
Top comments (0)