DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Redis Hackathon - Placify
Emanuele Bartolesi
Emanuele Bartolesi

Posted on

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.

Image description

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

Image description

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>
Enter fullscreen mode Exit fullscreen mode

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

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

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>
Enter fullscreen mode Exit fullscreen mode

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.

Performance Benchmarks

I did some tests with the solution and the results are…


Top comments (0)

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.