illustration image

Supabase: The Key to developing SaaS Faster

August 11, 2024
Share this article

⛈️ @supabase invited me to participate in its AI Content Storm, so I'm writing an article about the project I worked on during their 8th Launch Week Hackathon.

Summary:

  1. What is Tweeets?
  2. How do we use Supabase?
    • Authentication
    • Database
    • Realtime
      • What's the purpose?
      • Why not simple queries?
  3. Our stack
  4. Creation process
    • The Idea
    • Technology Choices
    • Development
    • Testing
    • Challenges and Balance
    • A one-person team
    • Lessons for everyone
  5. What's next?
    • Features
    • And for tomorrow?

Note: You can also find this article on

1. What is Tweeets.

Tweeets is a SaaS tool that allows users to generate tweets using artificial intelligence based on their chosen preferences.

2. How do we use Supabase on Tweeets?

Authentication

Click here to see the documentation and integrate Twitter authentication into your applications.

We use Supabase to manage user accounts linked to Twitter login.

illustration image

Once the user is logged in, we retrieve certain information such as the profile picture, username, and @ handle, and link the generated tweets with relationships between the User table and the Tweets table.

illustration image

Database

Click here to see the documentation and integrate Supabase into your own applications!

Therefore, as mentioned above, we also use the database to store various data. We use Prisma to simplify table creation and data storage in the database.

illustration image

Realtime

Click here to see the documentation and integrate real-time listing into your applications.

If you are curious and have carefully looked at the image above, you may have noticed that Realtime is enabled on the Tweets table.

What's the purpose?

We use Realtime on Supabase to display the tweets generated by the user in a menu by clicking the button that allows them to view all their generations.

Why not simple queries?

Otherwise, when generating a tweet, it wouldn't appear instantly in their menu, which is inconvenient.

3. Stack

4. Creation process

1. The Idea

It all started during a late-night discussion with a developer friend who was looking for an application capable of generating personalized tweets using artificial intelligence. The idea was born, but it still needed the right moment to bring it to life.

That's where the Supabase 8th Launch Week Hackathon came into play. The opportunity to participate in this event was the perfect trigger to turn the idea into reality.

2. Technology Choices

Choosing the right technologies was a crucial aspect of the project. NextJS was selected as the main framework due to a desire to explore this technology. Prisma was chosen for database management, while Supabase played a pivotal role in user authentication and data storage.

3. Development

Development began with setting up the application's framework, including creating frontend components, which were essentially assembly work on the pages since I used ui.shadcn.com and the basic architecture.

Then, the focus shifted to setting up the tweet generation process using the OpenAI API. Once this core functionality was in place, other systems such as user authentication and data storage were developed.

4. Testing

Due to the time constraint of the Hackathon, it was not possible to conduct comprehensive automated testing. However, manual tests were performed. Over a hundred tweets were generated and examined to ensure their quality. User feedback was valuable in adjusting and improving the ongoing development of the application.

5. Challenges and Balance

One of the major challenges was to obtain high-quality tweets generated by AI. This required careful adjustment of the prompt and constant iteration to improve the results.

6. A one-person team

Given the time constraint and the opportunity of the Hackathon, the project was carried out by a single person, allowing for quick decision-making and agile execution.

7. Lessons for everyone

Create a quality application quickly when motivation and opportunity are present. The Supabase Hackathon showed that it was possible to turn an idea into reality in record time.

illustration image

What's funny about this box is that I received it twice because I also won the contest on Twitter 😅

5. What's next?

Tweeets now has a landing page that I redesigned after the Hackathon verdict because there wasn't one before. Users were directly on the app and didn't have a "clean" presentation.

Key Features

  • Sharing: You can share your generation templates with a simple link, so another user can then
  • History: Keep a real-time history of all your generated tweets, you can save manually or automatically.

And for tomorrow?

AI Generation

There will be some rewrites, especially for the AI, to make it even better at writing tweets.

I also plan to train the AI on hundreds or even thousands of tweets of all types to get the most relevant result, but this requires a certain budget, according to some articles I've read on the subject. This can be managed in particular by Supabase with their AI & Vectors.

Edit on Text

I plan to create a system so that once the tweet is generated, the user can select a part of the text and regenerate it.

You.

Click on the Feedback button at the top right on Tweeets, suggest your ideas or report any bugs you find, I read all the feedback sent to me!

Thank you for taking the time to read this article!

You can find me on X/Twitter: @steellgold, or try the application at https://tweeets.app/

You can find and try Supabase on X/Twitter.

Supabase: The Key to developing SaaS Faster