Merge pull request #341 from wasp-lang/turboreel

Add Turboreel post

opensaas-sh/blog/astro.config.mjs

@@ -93,6 +93,12 @@ export default defineConfig({
               picture: '/matija.jpeg', // Images in the `public` directory are supported.
               url: 'https://wasp-lang.dev',
             },
+            milica: {
+              name: 'Milica',
+              title: 'Growth @ Wasp',
+              picture: '/milica.jpg', // Images in the `public` directory are supported.
+              url: 'https://wasp-lang.dev',
+            },
           },
         }),
       ],

opensaas-sh/blog/package.json

@@ -15,6 +15,7 @@
     "@astrojs/starlight-tailwind": "^2.0.3",
     "@astrojs/tailwind": "^5.1.2",
     "astro": "^4.16.15",
+    "prettier": "^3.4.2",
     "sharp": "^0.32.5",
     "starlight-blog": "^0.15.0",
     "typescript": "^5.4.5"

opensaas-sh/blog/src/components/VideoPlayer.astro

@@ -1,9 +1,11 @@
 ---
 interface Props {
   src: string;
+  lgWidth?: string;
+  smWidth?: string;
 }
 
-const { src } = Astro.props;
+const { src, lgWidth = '55%', smWidth = '100%' } = Astro.props;
 ---
 
 <video
@@ -13,15 +15,21 @@ const { src } = Astro.props;
   muted
   controls
   loop
+  class="video-player"
 >
   <track kind="captions">
 </video>
 
-<style>
+<style define:vars={{ lgWidth, smWidth }}>
   .video-player {
-    width: 100%;
-    max-width: 800px;
+    width: var(--lgWidth);
     margin: 2rem auto;
     border-radius: 8px;
   }
+
+  @media (max-width: 425px) {
+    .video-player {
+      width: var(--smWidth);
+    }
+  }
 </style>

opensaas-sh/blog/src/content/docs/blog/2023-11-21-coverlettergpt.mdx

@@ -2,6 +2,7 @@
 title: How I Built & Grew CoverLetterGPT to 5,000 Users and $200 MRR
 date: 2023-11-21
 tags: ["indiehacker", "saas", "sideproject"]
+authors: vince
 ---
 import { Image } from 'astro:assets';
 

opensaas-sh/blog/src/content/docs/blog/2024-10-10-most-annoying-cookie-banner-contest.mdx

@@ -7,6 +7,7 @@ tags:
   - sideproject
   - hackathon
 hideBannerImage: true
+authors: vince
 ---
 import { Image } from 'astro:assets';
 import wheel from '@assets/cookie-consent/wheel.gif';

opensaas-sh/blog/src/content/docs/blog/2024-11-22-best-annoying-cookie-consent-banners.mdx

@@ -7,6 +7,7 @@ tags:
   - sideproject
   - hackathon
 subtitle: and it was totally worth it
+authors: vince
 ---
 import VideoPlayer from '../../../components/VideoPlayer.astro';
 import { Image } from 'astro:assets';

opensaas-sh/blog/src/content/docs/blog/2024-12-10-turboreel-os-ai-video-generator-built-with-open-saas.mdx

@@ -0,0 +1,137 @@
+---
+title: "TurboReel: An Open Source AI Video Generator Built With Open SaaS"
+date: 2024-12-10
+tags:
+  - webdev
+  - saas
+  - sideproject
+  - indiehackers
+authors: milica
+---
+import VideoPlayer from '../../../components/VideoPlayer.astro';
+import { Image } from 'astro:assets';
+import landing from '../../../assets/turboreel/landing.webp';
+import studioInterface from '../../../assets/turboreel/studio-interface.mp4';
+import opensaas from '../../../assets/turboreel/opensaas.mp4';
+import reddit100Users from '../../../assets/turboreel/reddit-100-users.webp'
+import reddit200Upvotes from '../../../assets/turboreel/reddit-200-upvotes.webp'
+
+Peter is the creator of [**TurboReel**](https://turboreelgpt.tech/), an open-source platform with a paid SaaS layer, that transforms how creators generate short-form video content. With just a prompt, users can produce polished TikToks and YouTube Shorts in moments.
+
+But like any SaaS founder, Peter faced the challenge of turning his vision into reality without getting bogged down in repetitive technical setup. That's where [**Wasp's Open SaaS boilerplate**](https://opensaas.sh/) came in.
+
+In this post, we'll cover three main things: what inspired Peter to kickstart the project, how he chose the tech stack to build on, and finally, how he made his first $100. Let's dive in!
+
+<Image src={reddit100Users} alt="Reddit screenshot, 100 users" loading="lazy" />
+
+## The Starting Point: Open SaaS Boilerplate
+
+Peter's journey to Open SaaS began with a simple Google search for SaaS boilerplates. 
+
+*"I was looking for something that could save me time," Peter recalls. "I came across a few options—some were free but basic, and [others were paid but didn't feel worth it](https://docs.opensaas.sh/blog/2024-12-04-open-source-saas-boilerplate-vs-paid/). Then I found Wasp's Open SaaS boilerplate."*
+
+What stood out to Peter wasn't just that it was free, but that it was **open source**. *"I liked the idea of building on something maintained by a community, not locked behind a paywall"*, he says. Intrigued, Peter explored [Wasp](https://wasp-lang.dev/) further and discovered an engaging community that offered exactly what he needed to start building TurboReel.
+
+Here's a video presenting Open SaaS, generated with TurboReel 🐝
+
+<VideoPlayer src={opensaas} lgWidth="45%" />
+
+## TurboReel's Tech Stack
+
+TurboReel lets users generate short explainer videos with minimal effort. Starting with a single text prompt describing the video's purpose (e.g. “Create a video on building your SaaS with OpenSaaS”), you can produce professional grade TikTok and YT shorts without needing any video editing skills.
+
+<VideoPlayer src={studioInterface} lgWidth="100%" />
+
+The platform's **open-source foundation** unlocks development potential, while the **paid SaaS layer** helps with funding. 
+
+The tech behind TurboReel looks like this:
+
+- **Open SaaS - a free, open-source React & Node.js SaaS starter**
+    - powered by Wasp, a full stack web framework for JS.
+    - Combines **React** for the frontend and **Node.js** for backend.
+    - [Prisma](https://www.prisma.io/) handles the database.
+- **OpenAI**
+    - Used for generating scripts and scenes in the videos.
+- [**Pollinations**](https://pollinations.ai/)
+    - Open-source platform for image and text generation.
+    - Provides creative assets to enhance video quality.
+- [**Revideo**](https://re.video/)
+    - Library for programmatic video creation.
+    - Replaces the previously used **MoviePy**.
+
+### Building faster with Open SaaS boilerplate
+
+> "The first thing that impressed me with Open SaaS was how much time it saved, I could start with `wasp new saas` and immediately have a functioning boilerplate. It gave me the foundation I needed to focus on my product, not the setup."
+
+The boilerplate included everything he needed:
+
+- **Authentication via email, GitHub and Google**
+- **Running background jobs via pg-boss**
+- **Database management**
+- **Frontend-backend communication via a type-safe RPC layer**
+- **Deployment of the app with a single CLI command**
+
+One feature that particularly stood out was **Wasp's deployment commands**. 
+
+> "Usually, deployment takes time to set up properly, but with Wasp, it was as simple as running `wasp deploy fly deploy`."
+
+
+Here's what Wasp's config file looks like, through which you can define full-stack auth in a Wasp app.
+
+```bash
+app myApp {
+  wasp: {
+    version: "^0.15.0"
+  },
+  title: "My App",
+  auth: {
+    // 1. Specify the User entity
+    userEntity: User,
+    methods: {
+      // 2. Enable Github Auth
+      gitHub: {},
+      email: {
+        // 3. Specify the email from field
+        fromField: {
+          name: "My App Postman",
+          email: "[email protected]"
+        },
+        // 4. Specify the email verification and password reset options
+        emailVerification: {
+          clientRoute: EmailVerificationRoute
+        },
+        passwordReset: {
+          clientRoute: PasswordResetRoute
+        },
+      },
+    },
+    onAuthFailedRedirectTo: "/login"
+  },
+}
+```
+
+### Out-of-the-box Stripe integration
+
+Another significant advantage for Peter was how Open SaaS handled third-party integrations. Setting up services like [**Stripe for payments**](https://docs.opensaas.sh/guides/payments-integration/) often requires a lot of effort, but Wasp's OpenSaaS streamlined the process - you just need to add your API key and you're good to go.
+
+> *"Payments are usually a huge headache, but Open SaaS made it so smooth. I didn't have to spend weeks integrating Stripe—it just worked. That gave me more time to focus on TurboReel's core functionality.*"
+
+
+### The power of open source
+
+Both TurboReel and Wasp share a commitment to open source. 
+
+> *"The video generation space is complex. There aren't many established solutions for what I'm trying to do. [By making TurboReel open source](https://github.com/TurboReel), I'm inviting smart people to collaborate and help push the project forward."*
+
+
+## Getting first users
+
+<Image src={reddit200Upvotes} alt="Reddit screenshot, 200 upvotes" loading="lazy" />
+
+Peter found interesting subreddits on Reddit and shared his product with users. He enabled everyone to sign up and create a few videos, to get feedback quite early. Lots of people in the creator community loved it, and based off of their feedback, he iterated furthermore improving the UI and the workflow. 
+
+Within a few days, he was able to get first paying customers, which proved that his MVP was going in the right direction. Plans for the future? The sky is the limit!
+
+### Ready to Build Your SaaS?
+
+Get started with [Wasp](https://wasp-lang.dev/) today, or explore the [Open SaaS boilerplate](https://opensaas.sh/) to see how it can work for you.