DEV Community: spice

I used Cloudflare Workers and R2 as HTML generating service. It was so easy!

spice — Fri, 26 Apr 2024 23:40:15 +0000

This month, I added a HTML generate feature in my web app with Cloudflare Workers and R2.

I was very surprised at workflow of them, it's so easy!

I will explain why and how I implemented it.

About my web app

CoraPic is a easy meme generator web app.
You can create a meme just in 10 seconds only on your browser.

(this meme is here)

This web app is just hosted on AWS with Amplify.
It didn't have any API server, because all image processing is done with Canvas API on browser.

But...
I wanted to make it easy to share on any social media without downloading image.
Easy sharing feature will help app to be more popular.

That's why I decided to add a feature to generate a HTML file.

Why Cloudflare? Even though I'm using AWS

I choose Cloudflare because of the price.

Cloudflare Workers have free plan.
It's enough for me.

About Cloudflare R2, they also offers free capacity:

What I love the most about　R2 pricing is, "Zero egress fee"!
It means we don't have to pay for data transfer fee.

Even if we used AWS' CDN service CloudFront, we have to pay the cost of data transfer.

But using Cloudflare R2 let us release from this cost!

It's super cool for me.
I already have $4 / month cost for AWS Amplify, mainly because of the data transfer fee, even my app only has 10k PV / month.

I don't want to pay such a stupid fee anymore.

So I decided to use Cloudflare Workers and R2.

(I definitely have to quit AWS Amplify if I want to reduce the cost. I know.)

The architecture of the HTML generator

Here is the architecture:

As I mentioned, my web app creates the meme image on the browser.
So, what I had to do is:

Save the image on server
Generate a HTML file with the image URL
Enable HTML file to be accessed from the browser

By saving HTML file and enabling public access to R2 bucket, we don't have to care how to serve it.

I used Cloudflare Workers to:

receive the image data from the browser
save the image on R2
generate a HTML file with the image URL
return the HTML access URL to the browser

About Worker's code

I used hono to implement worker.

They have Cloudflare Workers tutrial in their document.
It covers how to write code and deploy it with Wrangler.

My main code is like this:

export async function genHTML({ base64, title, lang }: GenHtmlArgs, bucket: R2Bucket, bucketPreviewUrl: string): Promise<string> {
    const base64Image = base64.split(';base64,').pop();
    if (!base64Image) {
        throw new Error('Invalid base64 image');
    }
    const imageType = detectType(base64Image);
    if (!imageType) {
        throw new Error('Invalid image type');
    }
    // Convert base64 to binary
    const imageBinary = Uint8Array.from(atob(base64Image), (c) => c.charCodeAt(0));
    const uuid = randomUUID();
    const imageKey = `gen/${uuid}.${imageType.suffix}`;
    try {
        // Save image
        await bucket.put(imageKey, imageBinary, { httpMetadata: { contentType: imageType.mimeType } });
    } catch (e) {
        throw new Error('Error saving image');
    }
    const imageSrc = `${bucketPreviewUrl}/${imageKey}`;

 // generate html from template with saved image
    const html = genFromTemplate({ imageSrc, title, lang });
    const key = `gen/${uuid}.html`;
    // Save html
    await bucket.put(key, html, { httpMetadata: { contentType: 'text/html' } });
    return key;
}

You can read all of my source code in GitHub if you are interested in.

Anyway, it was very easy.

About other trivial matters

I had to setup the R2 bucket.
It was very straightforward and Cloudflare offers good getting started document.

Also, I moved my domain (cora-pic.com) from Amazon Route 53 to Cloudflare Registrar to use custom domain for Worker and R2.

Both of them have document about domain transfer.
We can follow these document to move the domain.

That's it !

CoraPic has a good feature now!

I'm so happy if you use this feature!

I decided to close my mobile app 😿

spice — Sat, 30 Mar 2024 20:07:30 +0000

Hi! I'm Yugo, a software engineer based in Vancouver.

I've decided to close one of my indie apps 😿
I'll share reasons and learning in this article.

About the app

The app was "Listen", available on App Store and Google Play.
It helps English learners listen to podcasts with many features:

Real Time Transcription
Real Time Translation
Dictation
Reminder

The tech stack is:

React Native (Expo)
GraphQL (Apollo)
GCP (Cloud build, Cloud Run, firestore, etc.)
OpenAI API (Whisper, GPT-3.5)

I created this app because I wanted to use English podcast as a learning material.

There are many English learning apps, but many of them aren't using the real English conversation.
It's very hard and boring to learn English with them.
Therefore, I wanted an app that offers authentic English conversations as learning material.

And I want to create a whole service from scratch.
Despite having more than 5 years of experience as a software engineer, most of my time was spent adding features to existing services.
There were few chances to develop a service from scratch.
I believed I could learn a lot by creating an entire service.

Also, I just like creating something new 😆

Why I decided to close my app

Reason 1: Cost

About the app and backend, the cost is around $1 per month.

The problem is the OpenAI API.
I had to pay around $50 per month for using the Whisper and ChatGPT API, even though the app didn't have many users.
It's not so expensive, I can pay from my pocket.

However, it was enough to demotivate me.

On March 2024, OpenAI changed their price system to the up-front payment.
I feel this is the change to stop using the API and close the app.

I should have made a specific plan how to get profits to cover the cost before releasing the app.
Even if you can afford it, ongoing costs can affect your motivation.

Reason 2: Busy!

I was living in Japan when I started developing the app.
But now, I live in Vancouver and am attending college.

I realized I'm too busy to grow the app!

What I'm doing now is:

Immigrating to Canada
- going to college, preparing for the job interview, etc.
Podcast
- Weekly published. I have to record and edit it.
Youtube (no relevant to the development)
- Just for fun, but I want to spend time gaining more subscribers...
Other indie app project
- I have another indie app!
And more...

Life is too short to pursue all my interests!
I want to narrow my focus to higher-priority activities.

We're not elves; our time is limited.
The best we can do is to reduce the number of things we want to do.

But... I learned many things!

Less is more for starting indie app

I should have not developed the app with so many features from the beginning.
I had to focus on improving the core feature.
I had been developed this app alone. Resources were limited.
Although I had many ideas and sufficient passion, it was challenging to develop all of them with good quality simultaneously.

Less is more!

New tech skills

I learned many new tech skills from this app 🔥

As I showed in the infrastructure image, I used Cloud Run for the backend and GitHub Actions for deploying it.

This was the first time for me to create a Cloud Run deployment pipeline with GitHub Actions.

I had to learn about the Artifact Registry, Cloud Build, IAM service, Workload Identity, etc.

Also, I used OpenAI API for the first time in product.
There were many technics to use the AI effectively, like "Prompt Engineering".

For me, creating the new things is the best way to learn new tech skills.

So, what's next for my indie hacking?

As I mentioned, I have another indie app, CoraPic.

I released it 4 years ago and redesigned it 2 years ago.
I haven't updated it since then, but it's still operational and receives 10,000 views per month, primarily from Japanese users.

I want to update this site and growth the number of users especially in English version.
I believe I can get more profits from this app.🤭

Also, I wanna make mobile app version with React Native.
It may take time, but I will enjoy the journey.

If you are interested in me, let's
connect on LinkedIn!

https://www.linkedin.com/in/yugo-spice-ogura/