Redis Hackathon - Placify

Overview of My Submission

I built another placeholder images SaaS.

First of all, I have created the application starting from the Blazor WASM with the Azure Function as API that you can find here: https://github.com/staticwebdev/blazor-starter

Then I made some test for the backend part because I wanted to know if it was possible to do with this architecture.
This is why I created a simple API endpoint in the Azure Function that add a fixed text on an image and give it back the bytes array as result.
Then I added two route parameters (width and height) to the endpoint, and I use them as key for Redis.
The application store in Redis all the image created by the application to speed up the response.

I deployed the application using a GitHub Action to an Azure Static Web App. The free tier is enough.

I have also created an Azure Redis Cache instance for caching the files.

Production Environment

You can find the application at this link: https://www.placify.xyz

Development Time

I take notes on everything during the day, and I can say that it took me a total of 2 hours to develop the solution (not in a row).

How it works

It's very simple, you can add an img tag in your HTML page and it will be replaced with a placeholder image.

<img src="https://www.placify.xyz/api/draw/1920/768>

Submission Category:

The category is: MEAN/MERN Mavericks

Language Used

Frontend Tech Stack: ASP.NET Core Blazor 6, Stone.css
Backend Tech Stack: C#, Azure Function
Cloud: Azure Static Web Apps
Redis: Azure Redis Cache Service

Link to Code

The project is open source and is hosted on GitHub

kasuken / Placify

A picture placeholder engine written in Blazor & C#

Placify - yet another image placeholder saas

Placify is a SaaS image placeholder service. It allows you to create and manage image placeholders for your SaaS products. You can use it to create placeholder images for your products, and then use them in your application. You can also use it to create placeholder images for your marketing materials.

Production Environment

You can find the application at this link: https://www.placify.xyz

How it works

It's very simple, you can add an img tag in your HTML page and it will be replaced with a placeholder image.

<img src="https://www.placify.xyz/api/draw/1920/768">

How the data is stored:

Placify saves the binary stream of the image directly in Redis. As a Key, the application creates a key formatted as width*height.

How the data is accessed:

By the key the application retrieves the binary information and send it back as the API result.

…

View on GitHub

---

• 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.