Supabase: The Key to developing SaaS Faster
Published: 2023-10-09 23:05:32

⛈️ [@supabase](https://supabase.com) 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
- [dev.to](https://dev.to/steellgold/supabase-the-key-to-developing-saas-faster-3l85)
- [Tweeets](https://tweeets.app/blog/supabase-ai-content-storm)

## 1. What is Tweeets.
[Tweeets](https://tweeets.app) 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](https://supabase.com/docs/guides/auth/social-login/auth-twitter) and integrate Twitter authentication into your applications.

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

![enter image description here](https://cdn.discordapp.com/attachments/927843710669062204/1158190243015557141/image.png?ex=651b5838&is=651a06b8&hm=ca3fafb9453a4bded35f51fec2822c144c0484169bc69631ec67855c30a25ff3&)

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.

![enter image description here](https://cdn.discordapp.com/attachments/927843710669062204/1158189825732640778/Group_1_1.png?ex=651b57d4&is=651a0654&hm=c71f86a49eb485480ed5458b19adb3d4eb0ae05490fb03026cc68cb869ecf384&)

### Database
> [Click here to see the documentation](https://supabase.com/docs/guides/database) 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.

![enter image description here](https://cdn.discordapp.com/attachments/927843710669062204/1158191036267499610/image.png?ex=651b58f5&is=651a0775&hm=131d5f44605cca887521b3642a8013ea314087c85afdd464ea52f032770f9b51&)

### Realtime

> [Click here to see the documentation](https://supabase.com/docs/guides/realtime) 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
- [NextJS](https://nextjs.org): The Framework
- [Prisma](https://www.prisma.io/): ORM
- [Supabase](https://supabase.com): Database & Authentication
- [Vercel](https://vercel.com): Hosting
- [OpenAI](https://openai.com): AI (Combined with [Vercel/AI](https://vercel.com/ai)
- [Stripe](https://stripe.com): Earn money 🤑
- [ESLint](https://npmjs.com/eslint): For clean code
   - [@bluzzi/eslint-config](https://github.com/Bluzzi/eslint-config): Configuration
- [TailwindCSS](https://tailwindcss.com): Better CSS 🤓
   - [shadcn/ui](https://ui.shadcn.com): component library
   - [Lucide](https://lucide.dev): Icons

## 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](https://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.

![enter image description here](https://media.discordapp.net/attachments/927843710669062204/1159135294323429386/Group_1_3.png?ex=651ec85d&is=651d76dd&hm=8bae3efc62e57e9b8b6dffc50129a2f56d34867a17cf7019a7d16b56b81f99ee&=&width=1139&height=380)

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](https://tweeets.app) 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](https://supabase.com/docs/guides/ai).

#### 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](https://x.com/steellgold), or try the application at [https://tweeets.app/](https://tweeets.app/)

You can find and try [Supabase](https://supabase.com) on [X/Twitter](https://x.com/supabase).