Wasp x Supabase: Smokin’ Hot Full-Stack Combo 🌶️ 🔥
Tags: webdev, javascript, supabase, wasp
Published: 2024-05-08 10:38:26

**TL;DR:** In this post I will tell you about the hyper-productive stack for painlessly building full-stack apps with React & Node.js - Supabase and Wasp! We combined these two technologies to get auth, async jobs, full-stack type safety, managed DB, and managed storage out of the box.

### Hey, I’m Miho! 👋

I’m a senior full-stack dev and I’ve been in the business of dreaming up and creating projects for almost 10 years. Almost on a daily basis I stumble upon a problem and want to build an app to fix it! That’s why I had to get good at doing it quickly, with as little hassle as possible.

After having used both Wasp and Supabase for a while, combining them together seemed like a no brainer to me. Turns out I was right!

## No theory, we’ll build an app!

We've cooked up something interesting: a greeting cards generator that doesn’t just work, but it’s also infinitely *creative!* Leveraging open-source AI models — yes, the shiny new Llama 3 and super speedy SDXL-Lighting — we've brought this idea to life.

Need a visual? Here's a quick sketch I made (good thing I got that tablet!):

![Sketch of the different app components, some of which are the Wasp full stack app and Supabase DB and Storage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88b9d1bdqr3ijfesn7j2.jpg)

And this is how our app looks once it's all polished and ready to go: 

{% embed https://twitter.com/infomiho/status/1782416172111024600 %}

Check out [the deployed version of our app](https://lazy-greeting-cards-client.fly.dev/) — sign in with Google and get some sweet cards!

### Llama has the last word

In our app, multiple models collaborate to produce a nice looking result.


![Funny image of a llama telling a painter what to paint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/calgh9rgnpegrc4e5yjm.jpg)

It works like this:

1. User gives us a topic
2. Llama 3 generates the greeting card text (”text”)
3. … it also describes some artwork that fits the text (”image prompt”)
4. Stable Diffusion draws the artwork
5. ???
6. Profit!

Imagine requesting a greeting card for your three-year-old, bossy, red-dress-loving llama (because who wouldn't?!).

You'd get something adorable like this! 🦙:


![Prompt: “a greeting card for my llamas 3rd birthday, it’s quite bossy and loves wearing red clothes”](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tt9bouh1tb1t1gvt8izb.jpeg)

> Prompt: “a greeting card for my llamas 3rd birthday, it’s quite bossy and loves wearing red clothes”

## Support us! 🙏⭐️

![GH star click](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/id9s6t8rcvfxty40bv2m.gif)

If you find this post helpful, [consider giving us a star on Github](https://github.com/wasp-lang/wasp)! Everything we do at Wasp is open source, and your support helps us make web development easier and motivates us to write more articles like this one.

![support us](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgbmn45pia04bxt6zf83.gif)

{% cta [https://github.com/wasp-lang/wasp](https://www.github.com/wasp-lang/wasp) %} ⭐️ Thanks For Your Support 🙏  {% endcta %}

## How we pulled it off

That’s quite a cool greeting card IMHO, but we need a bit more to make this a proper app that works for our users.

### We want to login with Google

We used [Wasp](https://wasp-lang.dev/)’s built-in [auth](https://wasp-lang.dev/docs/auth/overview) which makes your auth totally yours and independent of any 3rd party service. Under the hood, it uses [Lucia](https://lucia-auth.com/) and [Arctic](https://arctic.js.org/) to give you email, username and multiple OAuth providers out of the box. 

We didn’t need to work too hard beyond this code to set it up:

![Wasp config file code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5y0hm80oipqcuozhdjc.png)

> Wasp config file code

### We want to split up the card making process

Using Wasp's async jobs, we've split the card creation process into manageable steps, so users aren't left in the dark. They get playful updates like "Warming up the AI" and "Drawing the image" — making the wait a bit more bearable 🐻

These tasks are managed by [pg-boss](https://github.com/timgit/pg-boss/) behind the scenes (which is based on PostgreSQL) and, oh look, that seamlessly connects to...

### Managed PostgreSQL

It was a great experience using [Supabase](https://supabase.com/)’s rock-solid PostgreSQL database for this app. The DX around that product is phenomenal: viewing and managing the DB data was a lifesaver when you don’t want to craft your own admin panel from scratch.

![Screenshot of the Supabase table editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lyk8ns3yii8ozs3u2kbv.png)

> Table Editor is great for quick admin work on the DB

### Modern apps need modern storage

And for storage, we opted for Supabase’s [S3-compatible storage](https://supabase.com/blog/s3-compatible-storage?utm_source=postmark&utm_medium=email&utm_campaign=launch-week-11) option. This means our app doesn’t rely on having dedicated disk storage — making it more portable and more easily scalable.


![Overview of the greeting card images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swf5v97w3u3om8jhoqd8.png)

> Overview of the greeting card images

### [Llama 3-70B](https://replicate.com/meta/meta-llama-3-70b-instruct) model

Meta’s newest Llama3 is an open-source contender to GPT-4 (the 405B model that’s still training).

{% embed https://twitter.com/lmsysorg/status/1782483699449332144 %}

The text it produced was always usable and funny most of the time. I felt like it didn’t need that much prompt tweaking to get good results.

**Prompts we used**

Writing the greeting card:

```tsx
Write a greeting card text for the following topic: "<topic>". Make it clever.

Return it as plain text, no quotes, no extra syntax.
Return only the greeting card text. Max chars: 80!
```

For example, if we used the topic **Laughing about a thing** we’d get the following result: “Laughter is the best medicine, unless you have health insurance, then that's probably better.”

Getting a usable image prompt:

```tsx
Based on the text I'll provide, give me a nice artwork to go alongside it.
Describe it in a way of a short list of features of the artwork.
Use descriptive language so someone can paint it.
Only respond with the description, no extra syntax. Max words: 30

Context: <original_topic>

Text:
<text>
```

For the example above, we’d get the following image prompt: “Whimsical illustration of a smiling pill bottle surrounded by swirling laughter bubbles, with a subtle medical cross in the background, set against a warm, sunny yellow sky.”

Now, why did we do the second step? Just compare the images generated directly from the “text” and the “image prompt”:


![Image generated with the text as prompt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/562chgclebakt1vyiq6m.png)

> Using the “text” directly


![Image generated with the special image prompt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/smb20h6us30g6siumohl.png)

> Using the “image prompt” generated by Llama 3

As you can see, the version based on the image prompt aligns much better aesthetically with greeting card vibes—colorful and friendly.

### [SDXL-Lighting](https://replicate.com/bytedance/sdxl-lightning-4step) (4 step variant) model

Bytedance produced this model based on Stable Diffusion XL and made it *super fast*. The greeting card images are created in 1-2 seconds. The images remind me of Midjourney’s quality which means the model is doing a good job.


![Example SDXL-Lighting image 1: abstract art](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9rla0gdcojylfzgtxt4.png)


![Example SDXL-Lighting image 2: image of a cat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24gutoemdtr4oso82myy.png)


![Example SDXL-Lighting image 3: image of an astronaut](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u51c3m48qrwsewk3usq9.png)

### Cost and Time to Generate

We used [Replicate](https://replicate.com/) to run the models and the cost so far is 26 cents for 90 cards — which means it’s less than a third of a cent per card!

The combination of open-source models, minimal token use, and quick image generation keeps costs impressively low.

Producing a single card takes under 5 seconds which helps if you are in a hurry 🙂

## Give It a Try!

Check out the beautiful UI crafted by [ShadCN](https://ui.shadcn.com/) over at [the deployed version of our app](https://lazy-greeting-cards-client.fly.dev/) — sign in with Google and get some sweet cards! Plus, the entire project is open source. Grab the code from [GitHub](https://github.com/wasp-lang/lazy-card-generator).