diff --git a/opensaas-sh/blog/astro.config.mjs b/opensaas-sh/blog/astro.config.mjs index 64047c93..3b69663c 100644 --- a/opensaas-sh/blog/astro.config.mjs +++ b/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', + }, }, }), ], diff --git a/opensaas-sh/blog/package-lock.json b/opensaas-sh/blog/package-lock.json index 20c4eb90..f4f9ab8a 100644 --- a/opensaas-sh/blog/package-lock.json +++ b/opensaas-sh/blog/package-lock.json @@ -13,6 +13,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" @@ -6826,12 +6827,10 @@ } }, "node_modules/prettier": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.1.tgz", - "integrity": "sha512-G+YdqtITVZmOJje6QkXQWzl3fSfMxFwm1tjTyo9exhkmWSqC4Yhd1+lug++IlR2mvRVAxEDDWYkQdeSztajqgg==", + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz", + "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==", "license": "MIT", - "optional": true, - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -13595,11 +13594,9 @@ } }, "prettier": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.1.tgz", - "integrity": "sha512-G+YdqtITVZmOJje6QkXQWzl3fSfMxFwm1tjTyo9exhkmWSqC4Yhd1+lug++IlR2mvRVAxEDDWYkQdeSztajqgg==", - "optional": true, - "peer": true + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz", + "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==" }, "prismjs": { "version": "1.29.0", diff --git a/opensaas-sh/blog/package.json b/opensaas-sh/blog/package.json index 0528f213..2bb7e0ef 100644 --- a/opensaas-sh/blog/package.json +++ b/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" diff --git a/opensaas-sh/blog/public/banner-images/2024-12-10-turboreel-os-ai-video-generator-built-with-open-saas.webp b/opensaas-sh/blog/public/banner-images/2024-12-10-turboreel-os-ai-video-generator-built-with-open-saas.webp new file mode 100644 index 00000000..7e277107 Binary files /dev/null and b/opensaas-sh/blog/public/banner-images/2024-12-10-turboreel-os-ai-video-generator-built-with-open-saas.webp differ diff --git a/opensaas-sh/blog/public/milica.jpg b/opensaas-sh/blog/public/milica.jpg new file mode 100644 index 00000000..50c5f8b1 Binary files /dev/null and b/opensaas-sh/blog/public/milica.jpg differ diff --git a/opensaas-sh/blog/src/assets/turboreel/landing.webp b/opensaas-sh/blog/src/assets/turboreel/landing.webp new file mode 100644 index 00000000..872362ca Binary files /dev/null and b/opensaas-sh/blog/src/assets/turboreel/landing.webp differ diff --git a/opensaas-sh/blog/src/assets/turboreel/opensaas.mp4 b/opensaas-sh/blog/src/assets/turboreel/opensaas.mp4 new file mode 100644 index 00000000..e11b0ee5 Binary files /dev/null and b/opensaas-sh/blog/src/assets/turboreel/opensaas.mp4 differ diff --git a/opensaas-sh/blog/src/assets/turboreel/reddit-100-users.webp b/opensaas-sh/blog/src/assets/turboreel/reddit-100-users.webp new file mode 100644 index 00000000..70700806 Binary files /dev/null and b/opensaas-sh/blog/src/assets/turboreel/reddit-100-users.webp differ diff --git a/opensaas-sh/blog/src/assets/turboreel/reddit-200-upvotes.webp b/opensaas-sh/blog/src/assets/turboreel/reddit-200-upvotes.webp new file mode 100644 index 00000000..e51987d4 Binary files /dev/null and b/opensaas-sh/blog/src/assets/turboreel/reddit-200-upvotes.webp differ diff --git a/opensaas-sh/blog/src/assets/turboreel/studio-interface.mp4 b/opensaas-sh/blog/src/assets/turboreel/studio-interface.mp4 new file mode 100644 index 00000000..36a873b9 Binary files /dev/null and b/opensaas-sh/blog/src/assets/turboreel/studio-interface.mp4 differ diff --git a/opensaas-sh/blog/src/components/VideoPlayer.astro b/opensaas-sh/blog/src/components/VideoPlayer.astro index 2742c8df..a75fdbee 100644 --- a/opensaas-sh/blog/src/components/VideoPlayer.astro +++ b/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; --- - \ No newline at end of file diff --git a/opensaas-sh/blog/src/content/docs/blog/2023-11-21-coverlettergpt.mdx b/opensaas-sh/blog/src/content/docs/blog/2023-11-21-coverlettergpt.mdx index ad094917..d1bfca8e 100644 --- a/opensaas-sh/blog/src/content/docs/blog/2023-11-21-coverlettergpt.mdx +++ b/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'; diff --git a/opensaas-sh/blog/src/content/docs/blog/2024-10-10-most-annoying-cookie-banner-contest.mdx b/opensaas-sh/blog/src/content/docs/blog/2024-10-10-most-annoying-cookie-banner-contest.mdx index 7a1f38d0..a620d4ab 100644 --- a/opensaas-sh/blog/src/content/docs/blog/2024-10-10-most-annoying-cookie-banner-contest.mdx +++ b/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'; diff --git a/opensaas-sh/blog/src/content/docs/blog/2024-11-22-best-annoying-cookie-consent-banners.mdx b/opensaas-sh/blog/src/content/docs/blog/2024-11-22-best-annoying-cookie-consent-banners.mdx index 54cf089c..0cf4476e 100644 --- a/opensaas-sh/blog/src/content/docs/blog/2024-11-22-best-annoying-cookie-consent-banners.mdx +++ b/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'; diff --git a/opensaas-sh/blog/src/content/docs/blog/2024-12-10-turboreel-os-ai-video-generator-built-with-open-saas.mdx b/opensaas-sh/blog/src/content/docs/blog/2024-12-10-turboreel-os-ai-video-generator-built-with-open-saas.mdx new file mode 100644 index 00000000..6a270cc5 --- /dev/null +++ b/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! + +Reddit screenshot, 100 users + +## 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 🐝 + + + +## 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. + + + +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: "hello@itsme.com" + }, + // 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 + +Reddit screenshot, 200 upvotes + +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. \ No newline at end of file