Redis Hackathon - Placify


Published on

August 24, 2022

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>

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 {% embed https://github.com/kasuken/Placify %}

React, comment and follow on