DEV Community: shrey vijayvargiya

Why I Keep Building CRM Templates (Even Though They’re “Boring”)

shrey vijayvargiya — Tue, 31 Mar 2026 14:59:19 +0000

Hey there,

I’ve been asked this a few times:

“Why do you keep making CRM templates?”

And honestly, the answer is pretty simple:

Because the market desperately needs them.

The Truth Nobody Talks About

Let’s be real for a second.

CRM systems are not exciting.

They don’t go viral.\
They don’t look flashy on Twitter.\
And they definitely don’t give you that “wow” feeling like a new AI tool does.

But they matter.

A lot.

Because behind every growing business, there’s usually a messy backend that needs structure.

Why Building a CRM From Scratch Is Painful

If you’ve ever tried building a CRM, you already know:

It’s not beginner-friendly
It requires deep domain understanding
You deal with business-critical data
You need complex API + database integrations

And suddenly, what looked like “just a dashboard” becomes:

a full-blown system that runs an entire company.

That’s heavy.

So I Decided to Simplify It

Instead of letting every developer or business struggle through this from scratch…

I started building CRM templates.

Not just UI kits—but real, usable systems:

Frontend templates (React + Tailwind)
Full-stack-ready structures
Pre-built forms, widgets, and flows

The goal?

Help people skip the boring, repetitive setup—and focus on building their actual business.

Why CRM (and Admin Templates) Are Always in Demand

There’s a category I like to call:

The “Admin Layer” of the Internet

This includes:

CRM (Customer Management)
CMS (Content Management)
Documentation systems

And here’s the thing:

Every business needs this.

Startups
Freelancers
SMEs & MSMEs
Enterprises

Everyone eventually reaches a point where they need to:

Manage users
Track sales
Organize data
Monitor performance

In short:

Run their business from a single source of truth

A Real Example: My Own Workflow

I run a platform called ihatereading.in, where I publish software content.

Behind the scenes, everything runs through an internal admin panel:

Writing and managing blogs
Sending emails
Tracking performance
Planning content

This system helps me:

Improve SEO
Increase domain rating
Scale content production

Today, the platform serves 15K+ monthly users worldwide.

And without a proper admin system?

That would be chaos.

That’s When It Clicked

I realized:

If I need this… every growing business probably does too.

That’s what pushed me to go deeper into building:

CRM templates
CMS systems
Documentation dashboards

What I Built

I created a dedicated collection:

👉 gettemplate.website

It includes:

100+ React + Tailwind templates
100+ forms
100+ reusable widgets

All designed to help you:

Go from idea → working system in hours, not weeks.

Some CRM Templates You Can Explore

Here are a few I’ve built:

CRM Template for Developers\ https://shreyvijayvargiya.gumroad.com/l/saas-crm-react-template?layout=profile
Freelancer CRM Template\ https://shreyvijayvargiya.gumroad.com/l/freelancer-crm-template?layout=profile
Real Estate CRM (Next.js 14)\ https://www.gettemplate.website/premium-templates/real-estate-crm-next-js-14-template
Indie Hacker SaaS CRM Template\ https://shreyvijayvargiya.gumroad.com/l/inkgest-saas-admin-template?layout=profile

Final Thought

CRM templates might seem boring.

But they solve a very real problem:

Turning chaos into structure.

And in business, that’s everything.

If you’re building something and need a head start, feel free to explore or reach out:

📩 shreyvijayvargiya26@gmail.com

Cheers,\
Shrey

Few treding github repositories

shrey vijayvargiya — Sat, 21 Mar 2026 13:02:21 +0000

One person AI organisation employee team

Few more trending github repositories

Tags: Github, Trending Repositories, Paperclip, Liteparse, LLMs

Hey there!!

Welcome to the new blog

This blog is about some cool and trending open-source projects that really grab my attention, and a few of them I would love to share below

Paperclip

The AI employee agents repository that helps to create your entire AI employee company, assign, schedule and manage tasks and let the AI agent do the job for you.

Lightpanda

Lightpanda is the AI-native web browser built using Zig for AI agents, the alternative to Puppeteer and Playwright, but it works with them as well, with 10x less memory and 10x faster than the Chrome browser.

For our new product, inkgest.com, we are using Puppeteer for web scraping to create our own scraping infrastructure using Chrome browser to scrape content from a URL, but Lightpanda seems to be 10x cheaper and faster and AI-native, so it might be a good choice for your next scraping tasks in 2026.

PageAgent

Alibaba's new open-source project is promising, enabling AI to operate your web page in plain language. PageAgent scrapes the DOM from the web page and uses AI to perform tasks or operate the webpage.

It's quite useful to fill the form, scrapes the content, for example or URLs, images, external links, hyperlinks, etc., and does all boring tasks using plain english.

I use a lot of Chrome extension tools to scrape and download content from a webpage in Chrome, but using PageAgent, one can do the tasks using plain english.

PageAgent works without the Chrome browser, headless Chrome, and works much faster with 10+ LLMs and providers.

Liteparse

Open-source liteparse module that helps parse documents.

LiteParse is a standalone OSS PDF parsing tool focused exclusively on fast and light parsing. It provides high-quality spatial text parsing with bounding boxes, without proprietary LLM features or cloud dependencies. Everything runs locally on your machine.

5 CRM templates for your next CRM projects. Last week, I launched 5 CRM templates for Businesses in the SaaS, Health, Medical, and Energy sectors/domains to help them launch their CRM systems and run their businesses. Each template is built using Nextjs, React and Tailwind CSS, helping you save 50+ hours of development time.

Check Templates 👇

SaaS CRM Template: https://shreyvijayvargiya.gumroad.com/l/saas-crm-react-template

Freelancer CRM Template: https://shreyvijayvargiya.gumroad.com/l/freelancer-crm-template

Real Estate CRM Template: https://shreyvijayvargiya.gumroad.com/l/estate-os-real-estate-crm-template

Non-Profit CRM Template: https://shreyvijayvargiya.gumroad.com/l/non-charity-crm-template

That would be enough for today

See you in the next one, originally published on iHateReading

Shrey

5 Business CRM Templates you can’t avoid

shrey vijayvargiya — Sat, 14 Mar 2026 06:49:35 +0000

I Built 5 Production-Ready CRM Templates in Days Using One Boilerplate and AI

How a single Next.js starter let me ship React CRM, SaaS CRM, Freelancer CRM, Real Estate OS, and Non-Profit CRM — all in record time

There’s a weird thing that happens when you have a solid boilerplate.

You stop thinking about whether you can build something. You start thinking about who you can build it for.

That mental shift changed how I work. And in the past few weeks, it led me to ship 5 fully production-ready CRM templates — each targeting a different niche, each with its own demo, its own design direction, its own audience.

Here’s how it happened, and what I learned.

The Boilerplate Behind Everything

All 5 templates started from BuildSaaS — a Next.js 14 starter I built and have been refining over time.

→ buildsaas.dev

BuildSaaS comes with the hard parts already wired up: authentication, Supabase integration, a component library, theming (dark/light + multiple color palettes), and a file structure that scales. Every project I build on top of it starts with a 70% head start.

The remaining 30% — the domain-specific screens, the data models, the UX flows for a specific user type — that’s where AI changed the game.

The AI-Accelerated Workflow

Here’s the actual process I followed for each template:

1. Define the user persona — Who uses this CRM? What’s their daily workflow? What data do they track obsessively? A freelancer’s CRM looks nothing like a real estate agent’s CRM, even if the underlying components are the same.

2. Design the data model — Prompted Claude to generate Supabase migration SQL tailored to the domain. Clients, projects, deals, properties, donors — each template has its own schema that makes sense for the niche.

3. Scaffold the pages — With the component library from BuildSaaS already in place, building out 9+ pages per template became a composition exercise, not a creation exercise.

4. Theme it — Applied 3–4 distinct themes per template (dark/light + accent variants) so buyers can ship something that looks like theirs, not like every other SaaS tool.

5. Document it — Readme + setup guide per template so any developer can go from download to running demo in under 10 minutes.

What would have taken months solo took days. That’s the compounding effect of a good foundation + AI as a coding pair.

The 5 Templates

1. React CRM Template

The general-purpose one. Clean, minimal, works for any business that needs to track contacts, deals, and follow-ups.

Demo → crm-template.buildsaas.dev

Get the Template → https://shreyvijayvargiya.gumroad.com/l/inkgest-saas-admin-template

2. SaaS CRM Template for Indie Hackers

Built for SaaS founders managing trials, MRR, churn, and customer health scores. The pipeline view is designed around subscription stages, not generic sales stages.

Demo → crm-saas-pi.vercel.app

Get the Template → https://shreyvijayvargiya.gumroad.com/l/saas-crm-react-template

3. Freelancer CRM Template

For independent consultants and freelancers. Tracks clients, projects, invoices, and availability — the things a freelancer actually cares about, not enterprise sales pipeline jargon.

Demo → freelance-crm-template.buildsaas.dev

Get the Template → https://shreyvijayvargiya.gumroad.com/l/freelancer-crm-template

4. Real Estate OS CRM Template

Property listings, lead tracking, deal stages, and client communication — all in one view. Designed for agents and small brokerages who are still living in spreadsheets.

Demo → realestate-crm-template.buildsaas.dev

Get the Template → https://shreyvijayvargiya.gumroad.com/l/estate-os-real-estate-crm-template

5. Non-Profit CRM Template

Donor management, campaign tracking, and cvolunteer records. Most CRM tools are overkill or too expensive for nonprofits. This one is scoped exactly to what they need.

Demo → non-charity-crm-template.buildsaas.dev

Get the Template → https://shreyvijayvargiya.gumroad.com/l/non-charity-crm-template

What Every Template Ships With

Each of the 5 templates includes:

Next.js 14 — App router, server components, the modern stack
15+ UI components — Tables, modals, sidebars, kanban, charts — all pre-built
9+ pages — Dashboard, contacts, pipeline, settings, and more
Supabase migration SQL — Run one command, your database is ready
3–4 themes — Dark/light + color variants out of the box
README setup guide — From clone to running in minutes

No boilerplate wiring to do. No “figure out the auth” tax. Just customise and ship.

The Real Insight

The strangest part of this whole experience wasn’t how fast I could build. It was realising how much of a “unique” product is actually just a configuration.

A CRM for a real estate agent and a CRM for a SaaS founder share 80% of their DNA. The contacts list, the pipeline view, the notes, the activity feed — it’s all the same component. What’s different is the terminology, the data model, and which features get prioritised in the navigation.

Once you have a strong enough foundation, the differentiation cost drops dramatically. AI takes you the rest of the way.

That’s the bet I made with BuildSaaS. Turns out it pays off.

Whole fight for AI sandbox

shrey vijayvargiya — Wed, 11 Mar 2026 20:12:10 +0000

Whole fight for AI sandbox

Why AI agent need sandbox to execute code and its not cheap

Tags: Vercel, Cloudfare, Sandbox, API, AI

Hello there!!

I was working on my own AI coding agent to develop an AI website builder. Building any AI agent is not that hard unless we need to put the application in production for large-scale users, mainly 100+ users at a time, on the website. That's the time and situation when one understands the real cost of running these B2C businesses with a FREE version that has more than 100k monthly visitors; it's not as easy or cheap as it sounds.

It's actually way harder, and I'll give you reasons why things get messy in production and how the actual server costs are increasing

I'll also share a story about why sandbox development for AI agents to execute code in an isolated environment became the most underrated concept in programming in 2026. Every major tech company, including Vercel, Cloudflare, Hostinger, and AWS, will release its own code sandbox for AI agents.

I am combining 2 problems into one because they are closely linked. Problem 1: Running code in production or on an isolated server for more than 10k concurrent users is not cheap. Problem 2 is that developing a cheap isolated code execution sandbox is quite hard. Even if one is built, the next problem is making a fast sandbox that emulates Linux or macOS perfectly.

Developing an AI Website Builder

I was working on developing my own Lovable (v0) and using my own API keys to avoid paying $20+ per month.

Some argue that even after developing one for myself, the code output won't be good enough, APIs might be slow, making the app quite slow for large codebases, the quality of code and test-cases is not production-level, solid and tangible to trust

I agree with it, but the above concerns relate to code quality and context engineering, which I believe can be addressed. API latency and concurrent handling can be improved with some pooling concepts, which is why they are bottlenecks. not the main reason why most of the companies are not building a website builder on their own, and BYOK (Bring Your Own Keys)

The main reason is running isolated containers or sandboxes that run the code. The nextjs repository renders the output in the browser. This is the main problem: building sandboxes is not that easy, and we don't have many good open-source options, unlike for UI libraries.

A few sandbox options are as follows

Codesandbox

Vercel Sandbox

Cloudflare sandboxes or Workers

But each comes with its own PROS and CONS, plus its own production cost. Some charge per minute, show send bills per usage, and trust me, developing a sandbox is not easy for a solo developer.

Vercel sandboxes shut down the instance when not in use, making them quite slow for first-time users. Cloudflare workers are not cheap and are not affordable for solo indie hackers to run the sandboxes for 10k monthly active users. It's really not that cheap. Forget about the database costs of writing on disk when using supabase or Firebase.

I don't want to demotivate, but knowing the reality gives a clearer picture.

Do not jump directly to building your own SaaS to replace another SaaS application to save 20-50 USD per month; it makes no sense, IMO.

That is why I am bullish on the idea that AI will kill all SaaS. SaaS is not dead; it is changing. Those small CRUD API operations people usually pay for will be replaced easily using Vibe coding. Still, not actually, but other SaaS that solve pain points will stick and grow even more.

One good example is the Simple Screenshot API, which generates $10k/month, and I've found many indie hackers developing the same SaaS even now, in 2026.

Example, https://screenshotone.com/ and https://screenshotscout.com/

Now we will move ahead to our actual blog. Sandboxes and isolated containers are easy to integrate or develop; they need fs module access and work fast with honojs, but running them on servers in production for 10k users is not feasible and consider the fact that you have to provide free access to the thousands of users as well.

Why is my AI Website Builder not in Production?

I've built my own AI website builder similar to v0 and lovable, but I didn't put it LIVE.

A few reasons, first, let's break down the cost

OpenRouter API key or OpenAI API key costs around $50-100/month, depending on the traffic
Server sandbox costs around $100/month, dealing with 1k users per month
Costing for the backend API is around $50-100/month, dealing with 1k users per month

In total, $300-$500/month will be your basic minimal costing for running the app live for 1k users/month and considering only 2% to 10% conversion rate of your SaaS, one can do the MATHS and make the break-even after every 20 paid users per month, which is not that hard, but neither is it that easy.

Sometimes building is not that hard, but running it live for hundreds of users is much tougher than building, and marketing is even tougher than that.

But if you are building for B2C and can't get funding from YC or other VCs, then this MATHS is easier and cheaper to afford, making break-even after every 20 customers is quite affordable for an already funded startup or company, but if doing it alone you need to invest a decent $$$

Moving ahead, this is the main reason I've found that the main companies are building Sandboxes on their own. Vercel and Cloudflare both released sandboxes and workers, respectively, after the AI coding agents took the market space.

Every AI agent needs a sandbox to run the code and return the output, and this will keep on increasing in the future, which gives the first-come advantage to these large tech companies like Vercel and Cloudflare. Even scraping companies run the scrapers on isolated sandboxes, as it is fast and safe, and hence increases the market demand

But we have a lot of other open-source sandbox options, and sandboxes are also not bottlenecks the main pain point is running sandboxes on the server, and the costs it incur for large userbase is the actual bottleneck.

We still have only few companies working on these problems and I'ven't seen any YC based startup working on it as well in the last 2 years, maybe someone in future will bring AI agent-based isolated sandboxes that are fast and cheap to run on servers for thousands of agents and users.

Till the next time, have a good day

Shrey

Prompt to Video App API

shrey vijayvargiya — Wed, 11 Mar 2026 10:39:51 +0000

Prompt to Video App

Building AI video generation app

Tags: Remotion, Honojs, Nextjs, API

Hey there!!

Welcome to the new blog

In this blog, I'll be telling the step-by-step process to generate a video using AI LLM and the remotion npm module programmatically from just plain english

This is a good SaaS feature I was building for inkgest.com

Remotion is an npm module SDK that helps to create animated videos using a code language, mainly DOM elements such as Text, Image, Objects, and Videos

Last month, Remotion opened its SDK for Claude code to let Claude build the AI-generated video by simply converting plain english into Remotion-based code that generates output in mp4 to finally create the video

I like the concept because this simple technique can literally replace Adobe Premiere Pro, not on a large scale, but for small purposes, it will work better than Premiere PRO.

I'll be using OpenAI API or OpenRouter API, you can use anyother API key and the reason you will get in the end.

Remotion || OpenRouter

npx create-video@latest

One command and your nextjs code repository with the remotion package is ready; it will generate a sample code as well.

But I'll be using a very simple Nextjs starter repository of my own, buildsaas.dev and follow the following steps to get started

Install the Buildsaas.dev starter repository
Add the remotion package, install dependencies using npm install
Add OpenRouter API key for AI LLM

Next part is again an easy one to quickly add a server-side API for AI LLM to generate the remotion-based code, which we use the remotion SDK on the client side to render the video in mp4 format.

One server-side API, code given below, I'll explain later on.

/**
 * Video generation — no LLM, no Firecrawl re-scraping.
 *
 * Pipeline:
 *  1. Receive images[] + content + title from the frontend (already stored on the draft)
 *  2. Generate narration audio via msedge-tts (reads first ~400 chars of draft content)
 *  3. Render Remotion slideshow: one image per slide, Ken Burns effect, audio track
 *  4. Upload mp4 to UploadThing
 *  5. Save metadata to Firestore + backlink draft
 */

import { bundle } from "@remotion/bundler";
import { renderMedia, selectComposition } from "@remotion/renderer";
import { db } from "../../../lib/config/firebase";
import { collection, addDoc, doc, updateDoc, serverTimestamp } from "firebase/firestore";
import { UTApi } from "uploadthing/server";
import { MsEdgeTTS, OUTPUT_FORMAT } from "msedge-tts";
import path from "path";
import os from "os";
import fs from "fs/promises";

const utapi = new UTApi({ token: process.env.UPLOADTHING_SECRET });

/* ── Upload any buffer to UploadThing ── */
async function uploadFile({ buffer, filename, contentType }) {
    const file = new File([buffer], filename, { type: contentType });
    const response = await utapi.uploadFiles(file);
    if (response.error) throw new Error(response.error.message || "UploadThing upload failed");
    return response.data.url;
}

/* ── TTS: read draft content aloud via Edge TTS (free, no key) ── */
async function generateAudio({ title, content }) {
    // Narrate title + first meaningful paragraph of content (strip markdown)
    const plainText = content
        .replace(/!\[.*?\]\(.*?\)/g, "") // strip images
        .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1") // flatten links
        .replace(/#{1,6}\s/g, "") // strip headings
        .replace(/[*_`>]/g, "") // strip formatting
        .replace(/\s+/g, " ")
        .trim();

    const narration = `${title}. ${plainText}`.slice(0, 500);

    const tts = new MsEdgeTTS();
    await tts.setMetadata("en-US-AriaNeural", OUTPUT_FORMAT.AUDIO_24KHZ_48KBITRATE_MONO_MP3);

    const tempFile = path.join(os.tmpdir(), `tts-${Date.now()}.mp3`);
    await tts.toFile(tempFile, narration);
    const buffer = await fs.readFile(tempFile);
    await fs.unlink(tempFile).catch(() => {});
    return buffer;
}

/* ── Remotion: render slideshow mp4 ── */
async function renderSlideshow({ images, title, audioUrl }) {
    const tempDir = path.join(os.tmpdir(), `video-${Date.now()}`);
    await fs.mkdir(tempDir, { recursive: true });

    try {
        // Each image gets equal screen time; minimum 3s per slide, cap at 8s
        const perSlide = Math.min(8, Math.max(3, Math.floor(40 / Math.max(images.length, 1))));
        const totalDuration = images.length * perSlide;
        const durationInFrames = Math.ceil(totalDuration * 30);

        const bundleLocation = await bundle({
            entryPoint: path.join(process.cwd(), "remotion/index.ts"),
            webpackOverride: (config) => config,
        });

        const inputProps = {
            images,
            title,
            audioUrl: audioUrl || "",
            perSlide,
        };

        const composition = await selectComposition({
            serveUrl: bundleLocation,
            id: "VideoComposition",
            inputProps,
        });

        const outputPath = path.join(tempDir, "output.mp4");

        await renderMedia({
            composition,
            serveUrl: bundleLocation,
            codec: "h264",
            outputLocation: outputPath,
            inputProps,
            concurrency: 4,
            frameRange: [0, durationInFrames - 1],
        });

        const videoBuffer = await fs.readFile(outputPath);
        return { videoBuffer, tempDir };
    } catch (err) {
        await fs.rm(tempDir, { recursive: true, force: true });
        throw err;
    }
}

/* ── Firestore: save video doc + backlink draft ── */
async function saveVideoDoc({ videoUrl, audioUrl, title, userId, draftId }) {
    const docRef = await addDoc(collection(db, "videos"), {
        videoUrl,
        audioUrl: audioUrl || "",
        title,
        userId: userId || "anonymous",
        draftId: draftId || null,
        createdAt: serverTimestamp(),
        status: "completed",
    });

    if (draftId) {
        try {
            await updateDoc(doc(db, "drafts", draftId), {
                videoUrl,
                videoDocId: docRef.id,
            });
        } catch (e) {
            console.warn("[video] Failed to backlink draft:", e?.message);
        }
    }

    return docRef.id;
}

/* ── Handler ── */
export default async function handler(req, res) {
    if (req.method !== "POST") {
        return res.status(405).json({ error: "Method not allowed" });
    }

    try {
        const { images, title, content, userId, draftId } = req.body || {};

        if (!userId || typeof userId !== "string" || !userId.trim()) {
            return res.status(401).json({ error: "Authentication required." });
        }
        if (!content || !content.trim()) {
            return res.status(400).json({ error: "Content is required" });
        }
        if (!Array.isArray(images) || images.length === 0) {
            return res.status(400).json({ error: "At least one image is required to generate a slideshow video" });
        }

        // Valid HTTPS image URLs only
        const validImages = images
            .filter((u) => typeof u === "string" && /^https?:\/\//i.test(u))
            .slice(0, 15);

        if (validImages.length === 0) {
            return res.status(400).json({ error: "No valid image URLs found" });
        }

        // Step 1 — Generate narration audio from draft content (Edge TTS, free)
        let audioUrl = null;
        console.log("[video] Step 1: generating narration from draft content");
        try {
            const audioBuffer = await generateAudio({ title: title || "Draft", content });
            const audioFilename = `${Date.now()}-audio.mp3`;
            audioUrl = await uploadFile({ buffer: audioBuffer, filename: audioFilename, contentType: "audio/mpeg" });
            console.log("[video] Audio ready:", audioUrl);
        } catch (e) {
            console.warn("[video] Audio skipped:", e?.message);
        }

        // Step 2 — Render slideshow with Remotion
        console.log(`[video] Step 2: rendering slideshow (${validImages.length} images)`);
        const { videoBuffer, tempDir } = await renderSlideshow({
            images: validImages,
            title: title || "Draft",
            audioUrl,
        });

        // Step 3 — Upload mp4
        console.log("[video] Step 3: uploading video");
        const videoFilename = `${Date.now()}-${(title || "draft").replace(/[^a-z0-9]/gi, "-").slice(0, 40)}.mp4`;
        const videoUrl = await uploadFile({ buffer: videoBuffer, filename: videoFilename, contentType: "video/mp4" });

        // Step 4 — Save metadata + backlink draft
        console.log("[video] Step 4: saving metadata");
        const docId = await saveVideoDoc({ videoUrl, audioUrl, title: title || "Draft", userId, draftId });

        await fs.rm(tempDir, { recursive: true, force: true });

        return res.status(200).json({
            success: true,
            videoUrl,
            audioUrl,
            docId,
            title: title || "Draft",
            slideCount: validImages.length,
        });
    } catch (error) {
        console.error("[video] error:", error);
        return res.status(500).json({ error: error?.message || "Failed to generate video" });
    }
}

The bundle will bundle the video, assemble them

renderMedia and selectComposition will do the same as their name explains, render the media like video and images and select how to compose the video.

Firebase is used to store the final mp4 in the storage and store the user credentials and mp4 link in the firestote

Uploadthing is an npm SDK for storing files on a server, mainly assets, similar to firestorage or AWS Storage

The rest are simple packages, such as the fs module to read files and the os module to read the operating system.

Let's break and explain

/* ── Remotion: render slideshow mp4 ── */
async function renderSlideshow({ images, title, audioUrl }) {
    const tempDir = path.join(os.tmpdir(), `video-${Date.now()}`);
    await fs.mkdir(tempDir, { recursive: true });

    try {
        // Each image gets equal screen time; minimum 3s per slide, cap at 8s
        const perSlide = Math.min(8, Math.max(3, Math.floor(40 / Math.max(images.length, 1))));
        const totalDuration = images.length * perSlide;
        const durationInFrames = Math.ceil(totalDuration * 30);

        const bundleLocation = await bundle({
            entryPoint: path.join(process.cwd(), "remotion/index.ts"),
            webpackOverride: (config) => config,
        });

        const inputProps = {
            images,
            title,
            audioUrl: audioUrl || "",
            perSlide,
        };

        const composition = await selectComposition({
            serveUrl: bundleLocation,
            id: "VideoComposition",
            inputProps,
        });

        const outputPath = path.join(tempDir, "output.mp4");

        await renderMedia({
            composition,
            serveUrl: bundleLocation,
            codec: "h264",
            outputLocation: outputPath,
            inputProps,
            concurrency: 4,
            frameRange: [0, durationInFrames - 1],
        });

        const videoBuffer = await fs.readFile(outputPath);
        return { videoBuffer, tempDir };
    } catch (err) {
        await fs.rm(tempDir, { recursive: true, force: true });
        throw err;
    }
}

First, we are creating a video and writing it into the nextjs repository as the output in mp4 format.

Above method is a Remotion video rendering function — it takes a list of images, a title, and an optional audio URL, and renders them into an .mp4 slideshow video programmatically (server-side, no browser needed).

The 5 steps it runs through

Creates a temp folder

const tempDir = path.join(os.tmpdir(), `video-${Date.now()}`);

Unique scratch space like /tmp/video-1741234567 to write files during rendering. Cleaned up on error.

Calculates slide timing

const perSlide = Math.min(8, Math.max(3, Math.floor(40 / images.length)));

Targets a ~40 second total video. Each image gets equal time, clamped between 3s minimum and 8s maximum per slide. Then converts to frames at 30fps.

Webpack-bundles your Remotion composition

await bundle({ entryPoint: "remotion/index.ts" })

Your VideoComposition is a React component. Remotion bundles it with webpack so headless Chromium can execute it frame by frame.

Renders every frame with headless Chromium

await renderMedia({ codec: "h264", concurrency: 4 })

Spins up 4 parallel Chromium instances, screenshots every frame of the React component, then ffmpeg stitches them into an h264 .mp4.

Returns the video as a Bufferjs

const videoBuffer = await fs.readFile(outputPath);
return { videoBuffer, tempDir };

Caller gets the raw bytes to upload to S3/Firebase Storage. They're also responsible for deleting tempDir afterwards — that's intentional.

The last part is given below.

/* ── Handler ── */
export default async function handler(req, res) {
    if (req.method !== "POST") {
        return res.status(405).json({ error: "Method not allowed" });
    }

    try {
        const { images, title, content, userId, draftId } = req.body || {};

        if (!userId || typeof userId !== "string" || !userId.trim()) {
            return res.status(401).json({ error: "Authentication required." });
        }
        if (!content || !content.trim()) {
            return res.status(400).json({ error: "Content is required" });
        }
        if (!Array.isArray(images) || images.length === 0) {
            return res.status(400).json({ error: "At least one image is required to generate a slideshow video" });
        }

        // Valid HTTPS image URLs only
        const validImages = images
            .filter((u) => typeof u === "string" && /^https?:\/\//i.test(u))
            .slice(0, 15);

        if (validImages.length === 0) {
            return res.status(400).json({ error: "No valid image URLs found" });
        }

        // Step 1 — Generate narration audio from draft content (Edge TTS, free)
        let audioUrl = null;
        console.log("[video] Step 1: generating narration from draft content");
        try {
            const audioBuffer = await generateAudio({ title: title || "Draft", content });
            const audioFilename = `${Date.now()}-audio.mp3`;
            audioUrl = await uploadFile({ buffer: audioBuffer, filename: audioFilename, contentType: "audio/mpeg" });
            console.log("[video] Audio ready:", audioUrl);
        } catch (e) {
            console.warn("[video] Audio skipped:", e?.message);
        }

        // Step 2 — Render slideshow with Remotion
        console.log(`[video] Step 2: rendering slideshow (${validImages.length} images)`);
        const { videoBuffer, tempDir } = await renderSlideshow({
            images: validImages,
            title: title || "Draft",
            audioUrl,
        });

        // Step 3 — Upload mp4
        console.log("[video] Step 3: uploading video");
        const videoFilename = `${Date.now()}-${(title || "draft").replace(/[^a-z0-9]/gi, "-").slice(0, 40)}.mp4`;
        const videoUrl = await uploadFile({ buffer: videoBuffer, filename: videoFilename, contentType: "video/mp4" });

        // Step 4 — Save metadata + backlink draft
        console.log("[video] Step 4: saving metadata");
        const docId = await saveVideoDoc({ videoUrl, audioUrl, title: title || "Draft", userId, draftId });

        await fs.rm(tempDir, { recursive: true, force: true });

        return res.status(200).json({
            success: true,
            videoUrl,
            audioUrl,
            docId,
            title: title || "Draft",
            slideCount: validImages.length,
        });
    } catch (error) {
        console.error("[video] error:", error);
        return res.status(500).json({ error: error?.message || "Failed to generate video" });
    }
}

This is the orchestrator; it validates the request, creates a video, stores the video in storage and firestore and returns the final response object.

The client side now just needs to make an API call to the above endpoint or function to get the video URL, which we can render inside an iframe or a video HTML element.

One question: why are we using a server-side API endpoint?

Because the client-side doesn't have fs module access, the browser can't read the code repository files; the browser needs an API to read and access the file system. NextJS server-side API runs on the server instead of the browser or client-side, hence giving us access to the fs module; the rest of the modules from the above method can be used in the client-side

If you are confused between client-side and server-side, then read more on chatgpt.

Creating a video using AI

We will follow the 6-step pipeline for creating a video

POST /api/generate-video
  { prompt, userId, draftId?, style?, voiceSpeed? }
        │
        ├─ Step 1: OpenRouter (claude-3.5-sonnet)
        │          prompt → { title, narration, slides[] }
        │
        ├─ Step 2: OpenRouter (flux-schnell)
        │          slides[].imagePrompt → image URLs (parallel, fallback to placeholder)
        │
        ├─ Step 3: Edge TTS (free, no key needed)
        │          narration → MP3 → Firebase Storage → audioUrl
        │          (non-fatal — video renders muted if this fails)
        │
        ├─ Step 4: Remotion
        │          images + audioUrl + captions → MP4 buffer
        │
        ├─ Step 5: Firebase Storage
        │          MP4 buffer → videoUrl
        │
        └─ Step 6: Firestore batch write
                   videos/{id} + drafts/{draftId} backlink

Below is the code or server-side API endpoint, generate-video

// pages/api/generate-video.js
// ─────────────────────────────────────────────────────────────────────────────
// POST /api/generate-video
//
// Body:
//   prompt      string  required  — user's natural language request
//   userId      string  required  — authenticated user ID
//   draftId     string  optional  — Firestore draft to backlink
//   style       string  optional  — "cinematic" | "minimal" | "documentary" (default: "cinematic")
//   voiceSpeed  number  optional  — TTS speed 0.5–2.0 (default: 1.0)
//
// Flow:
//   1. Validate request
//   2. OpenRouter → generate structured video plan (title + narration + image prompts)
//   3. Generate images from prompts (via OpenRouter vision-capable model or placeholder)
//   4. Edge TTS → narration audio MP3
//   5. Remotion → render MP4 slideshow
//   6. Upload audio + video to Firebase Storage
//   7. Save Firestore doc + backlink draft
//   8. Return { videoUrl, audioUrl, docId, title, slideCount, plan }
// ─────────────────────────────────────────────────────────────────────────────

import fs from "fs/promises";
import os from "os";
import path from "path";
import { initializeApp, getApps, cert } from "firebase-admin/app";
import { getFirestore } from "firebase-admin/firestore";
import { getStorage } from "firebase-admin/storage";
import { bundle } from "@remotion/bundler";
import { renderMedia, selectComposition } from "@remotion/renderer";

// ─── Firebase Admin Init ─────────────────────────────────────────────────────
if (!getApps().length) {
  initializeApp({
    credential: cert({
      projectId: process.env.FIREBASE_PROJECT_ID,
      clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
      privateKey: process.env.FIREBASE_PRIVATE_KEY?.replace(/\\n/g, "\n"),
    }),
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  });
}

const db = getFirestore();
const bucket = getStorage().bucket();

// ─── Constants ───────────────────────────────────────────────────────────────
const OPENROUTER_BASE = "https://openrouter.ai/api/v1";
const PLAN_MODEL = "anthropic/claude-3.5-sonnet";       // Best for structured JSON output
const IMAGE_MODEL = "black-forest-labs/flux-schnell";   // Fast image generation via OpenRouter
const MAX_SLIDES = 10;
const MIN_SLIDES = 3;

// ─── 1. OpenRouter: Generate Video Plan ──────────────────────────────────────
// Returns: { title, narration, slides: [{ imagePrompt, caption }] }
async function generateVideoPlan({ prompt, style = "cinematic" }) {
  const styleGuides = {
    cinematic:    "dramatic lighting, wide shots, film grain, professional photography",
    minimal:      "clean white backgrounds, simple compositions, flat design, minimalist",
    documentary:  "realistic, candid, natural lighting, photojournalism style",
  };

  const styleHint = styleGuides[style] || styleGuides.cinematic;

  const systemPrompt = `You are a video producer AI. Given a user's prompt, generate a structured video plan.
Return ONLY valid JSON — no markdown, no explanation, no backticks.

The JSON must match this exact shape:
{
  "title": "string (max 60 chars)",
  "narration": "string (150-300 words, will be converted to voiceover audio)",
  "slides": [
    {
      "imagePrompt": "string (detailed image generation prompt, ${styleHint})",
      "caption": "string (max 8 words, shown on screen)"
    }
  ]
}

Rules:
- Generate between ${MIN_SLIDES} and ${MAX_SLIDES} slides
- Each imagePrompt must be highly detailed and visual (40-80 words)
- Narration should flow naturally when read aloud
- Captions should be punchy and complement the image
- Style: ${style}`;

  const response = await fetch(`${OPENROUTER_BASE}/chat/completions`, {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${process.env.OPENROUTER_API_KEY}`,
      "Content-Type": "application/json",
      "HTTP-Referer": process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000",
      "X-Title": "BuildSaaS Video Generator",
    },
    body: JSON.stringify({
      model: PLAN_MODEL,
      messages: [
        { role: "system", content: systemPrompt },
        { role: "user", content: prompt },
      ],
      temperature: 0.7,
      max_tokens: 2000,
      response_format: { type: "json_object" }, // Force JSON mode
    }),
  });

  if (!response.ok) {
    const err = await response.text();
    throw new Error(`OpenRouter plan generation failed (${response.status}): ${err}`);
  }

  const data = await response.json();
  const raw = data.choices?.[0]?.message?.content;

  if (!raw) throw new Error("OpenRouter returned empty content for video plan");

  let plan;
  try {
    plan = JSON.parse(raw);
  } catch {
    // Attempt to extract JSON if model wrapped it
    const match = raw.match(/\{[\s\S]*\}/);
    if (!match) throw new Error("Could not parse video plan JSON from OpenRouter response");
    plan = JSON.parse(match[0]);
  }

  // Validate shape
  if (!plan.title || !plan.narration || !Array.isArray(plan.slides) || plan.slides.length === 0) {
    throw new Error("Video plan JSON is missing required fields (title, narration, slides)");
  }

  // Cap slides
  plan.slides = plan.slides.slice(0, MAX_SLIDES);

  return plan;
}

// ─── 2. OpenRouter: Generate Images from Prompts ─────────────────────────────
// Uses FLUX via OpenRouter's image generation endpoint.
// Falls back to a placeholder image URL if generation fails for any slide.
async function generateImages({ slides, style = "cinematic" }) {
  const styleGuides = {
    cinematic:   "cinematic, dramatic lighting, 8k, professional photography, film still",
    minimal:     "minimalist, clean, flat design, white background, simple composition",
    documentary: "documentary, realistic, natural lighting, photojournalism, candid",
  };
  const styleSuffix = styleGuides[style] || styleGuides.cinematic;

  const imageUrls = await Promise.allSettled(
    slides.map(async (slide, idx) => {
      try {
        const fullPrompt = `${slide.imagePrompt}, ${styleSuffix}`;

        const response = await fetch(`${OPENROUTER_BASE}/images/generations`, {
          method: "POST",
          headers: {
            "Authorization": `Bearer ${process.env.OPENROUTER_API_KEY}`,
            "Content-Type": "application/json",
            "HTTP-Referer": process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000",
            "X-Title": "BuildSaaS Video Generator",
          },
          body: JSON.stringify({
            model: IMAGE_MODEL,
            prompt: fullPrompt,
            n: 1,
            size: "1280x720", // 16:9 for video
          }),
        });

        if (!response.ok) {
          throw new Error(`Image generation failed for slide ${idx + 1}: ${response.status}`);
        }

        const data = await response.json();
        const url = data.data?.[0]?.url;
        if (!url) throw new Error(`No image URL returned for slide ${idx + 1}`);

        console.log(`[video] Image ${idx + 1}/${slides.length} generated`);
        return url;
      } catch (err) {
        // Graceful fallback: use a placeholder image so video still renders
        console.warn(`[video] Image ${idx + 1} failed, using placeholder:`, err.message);
        return `https://placehold.co/1280x720/1a1a2e/ffffff?text=${encodeURIComponent(slide.caption || `Slide ${idx + 1}`)}`;
      }
    })
  );

  // Extract values (allSettled means we always get something)
  return imageUrls.map((result, idx) =>
    result.status === "fulfilled"
      ? result.value
      : `https://placehold.co/1280x720/1a1a2e/ffffff?text=Slide+${idx + 1}`
  );
}

// ─── 3. Edge TTS: Generate Narration Audio ───────────────────────────────────
// Uses Microsoft Edge TTS (free, no API key needed) via the edge-tts npm package.
// Returns a Buffer of MP3 audio data.
async function generateAudio({ title, content, speed = 1.0 }) {
  // Dynamic import — edge-tts is ESM
  const { MsEdgeTTS, OUTPUT_FORMAT } = await import("edge-tts");

  const tts = new MsEdgeTTS();

  // en-US-AriaNeural is natural and works well for narration
  await tts.setMetadata(
    "en-US-AriaNeural",
    OUTPUT_FORMAT.AUDIO_24KHZ_48KBITRATE_MONO_MP3,
  );

  // Prepend title as a natural intro
  const fullText = title ? `${title}. ${content}` : content;

  // Adjust speed via SSML rate tag
  const ssml = `<speak version="1.0" xmlns="http://www.w3.org/2001/10/synthesis" xml:lang="en-US">
    <voice name="en-US-AriaNeural">
      <prosody rate="${speed >= 1 ? `+${Math.round((speed - 1) * 100)}%` : `-${Math.round((1 - speed) * 100)}%`}">
        ${fullText.replace(/[<>&'"]/g, (c) => ({ "<":"&lt;",">":"&gt;","&":"&amp;","'":"&apos;",'"':"&quot;" }[c]))}
      </prosody>
    </voice>
  </speak>`;

  const chunks = [];
  const readable = await tts.toStream(ssml);

  return new Promise((resolve, reject) => {
    readable.on("data", (chunk) => chunks.push(chunk));
    readable.on("end", () => resolve(Buffer.concat(chunks)));
    readable.on("error", reject);
  });
}

// ─── 4. Firebase Storage: Upload File ────────────────────────────────────────
// Uploads a Buffer and returns a public HTTPS URL.
async function uploadFile({ buffer, filename, contentType }) {
  const destination = `videos/${Date.now()}-${filename}`;
  const file = bucket.file(destination);

  await file.save(buffer, {
    metadata: { contentType },
    resumable: false,
  });

  // Make file publicly readable
  await file.makePublic();

  return `https://storage.googleapis.com/${bucket.name}/${destination}`;
}

// ─── 5. Remotion: Render Slideshow MP4 ───────────────────────────────────────
async function renderSlideshow({ images, title, audioUrl, captions = [] }) {
  const tempDir = path.join(os.tmpdir(), `video-${Date.now()}`);
  await fs.mkdir(tempDir, { recursive: true });

  try {
    const perSlide = Math.min(8, Math.max(3, Math.floor(40 / Math.max(images.length, 1))));
    const totalDuration = images.length * perSlide;
    const durationInFrames = Math.ceil(totalDuration * 30);

    const bundleLocation = await bundle({
      entryPoint: path.join(process.cwd(), "remotion/index.ts"),
      webpackOverride: (config) => config,
    });

    const inputProps = {
      images,
      title,
      audioUrl: audioUrl || "",
      captions,  // Pass captions through to composition
      perSlide,
    };

    const composition = await selectComposition({
      serveUrl: bundleLocation,
      id: "VideoComposition",
      inputProps,
    });

    const outputPath = path.join(tempDir, "output.mp4");

    await renderMedia({
      composition,
      serveUrl: bundleLocation,
      codec: "h264",
      outputLocation: outputPath,
      inputProps,
      concurrency: 4,
      frameRange: [0, durationInFrames - 1],
    });

    const videoBuffer = await fs.readFile(outputPath);
    return { videoBuffer, tempDir };
  } catch (err) {
    await fs.rm(tempDir, { recursive: true, force: true });
    throw err;
  }
}

// ─── 6. Firestore: Save Video Doc + Backlink Draft ───────────────────────────
async function saveVideoDoc({ videoUrl, audioUrl, title, userId, draftId, plan, slideCount, style }) {
  const now = new Date().toISOString();
  const batch = db.batch();

  // Video document
  const videoRef = db.collection("videos").doc();
  batch.set(videoRef, {
    id: videoRef.id,
    title,
    videoUrl,
    audioUrl: audioUrl || null,
    userId,
    draftId: draftId || null,
    slideCount,
    style,
    plan,          // Store the full plan for reference/regeneration
    status: "ready",
    createdAt: now,
    updatedAt: now,
  });

  // Backlink draft if provided
  if (draftId) {
    const draftRef = db.collection("drafts").doc(draftId);
    batch.update(draftRef, {
      videoId: videoRef.id,
      videoUrl,
      videoStatus: "rendered",
      updatedAt: now,
    });
  }

  await batch.commit();
  return videoRef.id;
}

// ─── Main Handler ─────────────────────────────────────────────────────────────
export default async function handler(req, res) {
  if (req.method !== "POST") {
    return res.status(405).json({ error: "Method not allowed" });
  }

  // ── Validate environment ──────────────────────────────────────────────────
  if (!process.env.OPENROUTER_API_KEY) {
    console.error("[video] OPENROUTER_API_KEY is not set");
    return res.status(500).json({ error: "Server configuration error: missing OpenRouter API key" });
  }

  let tempDir = null;

  try {
    const {
      prompt,
      userId,
      draftId,
      style = "cinematic",
      voiceSpeed = 1.0,
    } = req.body || {};

    // ── Input validation ────────────────────────────────────────────────────
    if (!userId || typeof userId !== "string" || !userId.trim()) {
      return res.status(401).json({ error: "Authentication required." });
    }

    if (!prompt || typeof prompt !== "string" || !prompt.trim()) {
      return res.status(400).json({ error: "A prompt is required to generate a video." });
    }

    if (prompt.trim().length < 10) {
      return res.status(400).json({ error: "Prompt is too short. Provide at least 10 characters." });
    }

    if (prompt.trim().length > 2000) {
      return res.status(400).json({ error: "Prompt is too long. Maximum 2000 characters." });
    }

    const validStyles = ["cinematic", "minimal", "documentary"];
    const safeStyle = validStyles.includes(style) ? style : "cinematic";

    const safeSpeed = Math.min(2.0, Math.max(0.5, Number(voiceSpeed) || 1.0));

    console.log(`[video] Starting pipeline for user ${userId}`);
    console.log(`[video] Prompt: "${prompt.slice(0, 80)}…"`);
    console.log(`[video] Style: ${safeStyle} | Speed: ${safeSpeed}`);

    // ── Step 1: Generate video plan via OpenRouter ──────────────────────────
    console.log("[video] Step 1: generating video plan via OpenRouter");
    const plan = await generateVideoPlan({ prompt: prompt.trim(), style: safeStyle });
    console.log(`[video] Plan ready: "${plan.title}" — ${plan.slides.length} slides`);

    // ── Step 2: Generate images for each slide ──────────────────────────────
    console.log(`[video] Step 2: generating ${plan.slides.length} images`);
    const imageUrls = await generateImages({ slides: plan.slides, style: safeStyle });
    console.log(`[video] ${imageUrls.length} images ready`);

    // ── Step 3: Generate narration audio (non-fatal) ────────────────────────
    let audioUrl = null;
    console.log("[video] Step 3: generating narration audio via Edge TTS");
    try {
      const audioBuffer = await generateAudio({
        title: plan.title,
        content: plan.narration,
        speed: safeSpeed,
      });
      const audioFilename = `${Date.now()}-audio.mp3`;
      audioUrl = await uploadFile({
        buffer: audioBuffer,
        filename: audioFilename,
        contentType: "audio/mpeg",
      });
      console.log("[video] Audio uploaded:", audioUrl);
    } catch (e) {
      console.warn("[video] Audio generation skipped (non-fatal):", e?.message);
    }

    // ── Step 4: Render slideshow with Remotion ──────────────────────────────
    console.log(`[video] Step 4: rendering MP4 (${imageUrls.length} slides)`);
    const captions = plan.slides.map((s) => s.caption || "");
    const result = await renderSlideshow({
      images: imageUrls,
      title: plan.title,
      audioUrl,
      captions,
    });
    tempDir = result.tempDir;
    const { videoBuffer } = result;
    console.log("[video] Render complete");

    // ── Step 5: Upload MP4 to Firebase Storage ──────────────────────────────
    console.log("[video] Step 5: uploading MP4");
    const safeTitle = plan.title.replace(/[^a-z0-9]/gi, "-").slice(0, 40).toLowerCase();
    const videoFilename = `${Date.now()}-${safeTitle}.mp4`;
    const videoUrl = await uploadFile({
      buffer: videoBuffer,
      filename: videoFilename,
      contentType: "video/mp4",
    });
    console.log("[video] Video uploaded:", videoUrl);

    // ── Step 6: Save Firestore doc + backlink draft ─────────────────────────
    console.log("[video] Step 6: saving Firestore metadata");
    const docId = await saveVideoDoc({
      videoUrl,
      audioUrl,
      title: plan.title,
      userId,
      draftId,
      plan,
      slideCount: imageUrls.length,
      style: safeStyle,
    });

    // ── Cleanup temp dir ────────────────────────────────────────────────────
    if (tempDir) {
      await fs.rm(tempDir, { recursive: true, force: true });
      tempDir = null;
    }

    console.log(`[video] Pipeline complete. docId: ${docId}`);

    return res.status(200).json({
      success: true,
      videoUrl,
      audioUrl,
      docId,
      title: plan.title,
      narration: plan.narration,
      slideCount: imageUrls.length,
      style: safeStyle,
      plan, // Full plan — useful for frontend to show captions/structure
    });

  } catch (error) {
    // Cleanup temp dir on any unhandled error
    if (tempDir) {
      await fs.rm(tempDir, { recursive: true, force: true }).catch(() => {});
    }

    console.error("[video] Pipeline error:", error);

    // Surface specific error types
    if (error.message?.includes("OpenRouter")) {
      return res.status(502).json({ error: "AI service error: " + error.message });
    }
    if (error.message?.includes("Remotion") || error.message?.includes("render")) {
      return res.status(500).json({ error: "Video rendering failed: " + error.message });
    }

    return res.status(500).json({ error: error?.message || "Failed to generate video" });
  }
}

// ─── Route Config ─────────────────────────────────────────────────────────────
// Required: disable Next.js body size limit for large payloads
export const config = {
  api: {
    bodyParser: {
      sizeLimit: "10mb",
    },
    responseLimit: false,       // Video responses can be large
    externalResolver: true,     // Suppress missing response warnings
  },
};

Rendering Video in Browser

The last part is to render the video once it is generated and stored in the browser.

import { useState, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";

const STEPS = [
    {
        id: "plan",
        icon: "✦",
        label: "Writing video script",
        sub: "Claude generating title, narration & slide prompts",
    },
    {
        id: "images",
        icon: "◈",
        label: "Generating slide images",
        sub: "FLUX creating visuals for each scene",
    },
    {
        id: "audio",
        icon: "◉",
        label: "Synthesising narration",
        sub: "Edge TTS converting script to voiceover",
    },
    {
        id: "render",
        icon: "▶",
        label: "Rendering MP4",
        sub: "Remotion stitching frames into video",
    },
    {
        id: "save",
        icon: "◎",
        label: "Saving to library",
        sub: "Uploading to storage and saving metadata",
    },
];

const STYLES = [
    {
        id: "cinematic",
        label: "Cinematic",
        desc: "Dramatic · Film-grade",
        icon: "🎬",
    },
    { id: "minimal", label: "Minimal", desc: "Clean · Flat design", icon: "◻" },
    {
        id: "documentary",
        label: "Documentary",
        desc: "Realistic · Candid",
        icon: "📷",
    },
];

function usePipelineSteps() {
    const [activeStep, setActiveStep] = useState(-1);
    const [doneSteps, setDoneSteps] = useState([]);
    const timers = useRef([]);

    const start = () => {
        setActiveStep(0);
        setDoneSteps([]);
        const timings = [0, 4000, 14000, 19000, 38000];
        timings.forEach((delay, idx) => {
            const t = setTimeout(() => {
                setActiveStep(idx);
                if (idx > 0) setDoneSteps((d) => [...d, STEPS[idx - 1].id]);
            }, delay);
            timers.current.push(t);
        });
    };

    const finish = () => {
        timers.current.forEach(clearTimeout);
        setDoneSteps(STEPS.map((s) => s.id));
        setActiveStep(-1);
    };

    const reset = () => {
        timers.current.forEach(clearTimeout);
        setActiveStep(-1);
        setDoneSteps([]);
    };

    return { activeStep, doneSteps, start, finish, reset };
}

function Spinner() {
    return (
        <svg
            style={{ animation: "spin 1s linear infinite", width: 16, height: 16 }}
            viewBox="0 0 24 24"
            fill="none"
        >
            <style>{`@keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.2} }`}</style>
            <circle
                cx="12"
                cy="12"
                r="10"
                stroke="currentColor"
                strokeWidth="3"
                strokeOpacity="0.25"
            />
            <path fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
        </svg>
    );
}

function PulsingDot() {
    return (
        <span
            style={{
                display: "block",
                width: 8,
                height: 8,
                borderRadius: "50%",
                background: "#10b981",
                animation: "pulse-dot 1.1s ease-in-out infinite",
            }}
        />
    );
}

export default function VideoGenerator({ userId = "demo-user" }) {
    const [prompt, setPrompt] = useState("");
    const [style, setStyle] = useState("cinematic");
    const [speed, setSpeed] = useState(1.0);
    const [loading, setLoading] = useState(false);
    const [result, setResult] = useState(null);
    const [error, setError] = useState(null);
    const pipeline = usePipelineSteps();

    const canSubmit = prompt.trim().length >= 10 && !loading;

    const handleGenerate = async () => {
        if (!canSubmit) return;
        setLoading(true);
        setResult(null);
        setError(null);
        pipeline.start();

        try {
            const res = await fetch("/api/generate-video", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    prompt: prompt.trim(),
                    userId,
                    style,
                    voiceSpeed: speed,
                }),
            });
            const data = await res.json();
            if (!res.ok) throw new Error(data.error || "Generation failed");
            pipeline.finish();
            setResult(data);
        } catch (err) {
            pipeline.reset();
            setError(err.message || "Something went wrong");
        } finally {
            setLoading(false);
        }
    };

    return (
        <div
            style={{
                minHeight: "100vh",
                background: "#080a0d",
                color: "#e8eaed",
                position: "relative",
                overflowX: "hidden",
            }}
        >
            {/* Grid background */}
            <div
                style={{
                    position: "fixed",
                    inset: 0,
                    pointerEvents: "none",
                    zIndex: 0,
                    backgroundImage:
                        "linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px)",
                    backgroundSize: "48px 48px",
                }}
            />

            {/* Glow */}
            <div
                style={{
                    position: "fixed",
                    top: "-18%",
                    left: "50%",
                    transform: "translateX(-50%)",
                    width: 640,
                    height: 380,
                    borderRadius: "50%",
                    pointerEvents: "none",
                    zIndex: 0,
                    background:
                        "radial-gradient(ellipse,rgba(16,185,129,.16) 0%,transparent 70%)",
                }}
            />

            {/* Content */}
            <div
                style={{
                    position: "relative",
                    zIndex: 1,
                    maxWidth: 620,
                    margin: "0 auto",
                    padding: "60px 20px 80px",
                }}
            >
                {/* ── Header ── */}
                <motion.div
                    initial={{ opacity: 0, y: -14 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.45 }}
                    style={{ textAlign: "center", marginBottom: 40 }}
                >
                    <div
                        style={{
                            display: "inline-flex",
                            alignItems: "center",
                            gap: 8,
                            fontSize: 10,
                            letterSpacing: "0.18em",
                            textTransform: "uppercase",
                            color: "rgba(16,185,129,0.8)",
                            border: "1px solid rgba(16,185,129,0.25)",
                            borderRadius: 999,
                            padding: "5px 16px",
                            background: "rgba(16,185,129,0.06)",
                            marginBottom: 20,
                        }}
                    >
                        <span
                            style={{
                                width: 6,
                                height: 6,
                                borderRadius: "50%",
                                background: "#10b981",
                                display: "inline-block",
                            }}
                        />
                        AI · Remotion · Edge TTS
                    </div>
                    <h1
                        style={{
                            fontSize: 38,
                            fontWeight: 800,
                            letterSpacing: "-0.04em",
                            color: "#ffffff",
                            lineHeight: 1,
                            marginBottom: 12,
                            fontFamily: "'Syne','DM Sans',system-ui,sans-serif",
                        }}
                    >
                        Prompt → Video
                    </h1>
                    <p
                        style={{
                            fontSize: 13,
                            color: "rgba(255,255,255,0.38)",
                            lineHeight: 1.6,
                        }}
                    >
                        Describe anything. Get a narrated MP4 slideshow in ~60 seconds.
                    </p>
                </motion.div>

                {/* ── Input Card ── */}
                <motion.div
                    initial={{ opacity: 0, y: 18 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.45, delay: 0.08 }}
                    style={{
                        borderRadius: 16,
                        border: "1px solid rgba(255,255,255,0.08)",
                        background: "rgba(255,255,255,0.03)",
                        backdropFilter: "blur(12px)",
                        overflow: "hidden",
                        marginBottom: 12,
                    }}
                >
                    {/* Prompt */}
                    <div style={{ padding: "20px 20px 14px" }}>
                        <label
                            style={{
                                display: "block",
                                fontSize: 10,
                                letterSpacing: "0.14em",
                                textTransform: "uppercase",
                                color: "rgba(255,255,255,0.38)",
                                marginBottom: 10,
                            }}
                        >
                            Your Prompt
                        </label>
                        <textarea
                            value={prompt}
                            onChange={(e) => setPrompt(e.target.value)}
                            disabled={loading}
                            rows={4}
                            placeholder="e.g. A documentary about solo founders who quit their jobs to build software products alone and became successful..."
                            style={{
                                width: "100%",
                                background: "transparent",
                                border: "none",
                                outline: "none",
                                resize: "none",
                                fontSize: 13,
                                color: "rgba(255,255,255,0.82)",
                                lineHeight: 1.65,
                                fontFamily: "inherit",
                                opacity: loading ? 0.4 : 1,
                            }}
                        />
                        <div
                            style={{
                                display: "flex",
                                justifyContent: "space-between",
                                marginTop: 6,
                            }}
                        >
                            <span
                                style={{
                                    fontSize: 10,
                                    color:
                                        prompt.length > 1800 ? "#f87171" : "rgba(255,255,255,0.2)",
                                }}
                            >
                                {prompt.length} / 2000
                            </span>
                            {prompt.length > 0 && prompt.length < 10 && (
                                <span style={{ fontSize: 10, color: "rgba(251,191,36,0.7)" }}>
                                    Need {10 - prompt.length} more chars
                                </span>
                            )}
                        </div>
                    </div>

                    <div
                        style={{
                            height: 1,
                            background: "rgba(255,255,255,0.06)",
                            margin: "0 20px",
                        }}
                    />

                    {/* Style selector */}
                    <div style={{ padding: "16px 20px" }}>
                        <label
                            style={{
                                display: "block",
                                fontSize: 10,
                                letterSpacing: "0.14em",
                                textTransform: "uppercase",
                                color: "rgba(255,255,255,0.38)",
                                marginBottom: 12,
                            }}
                        >
                            Visual Style
                        </label>
                        <div
                            style={{
                                display: "grid",
                                gridTemplateColumns: "repeat(3,1fr)",
                                gap: 8,
                            }}
                        >
                            {STYLES.map((st) => (
                                <button
                                    key={st.id}
                                    onClick={() => !loading && setStyle(st.id)}
                                    disabled={loading}
                                    style={{
                                        borderRadius: 12,
                                        padding: "12px 10px",
                                        textAlign: "left",
                                        cursor: loading ? "not-allowed" : "pointer",
                                        border:
                                            style === st.id
                                                ? "1px solid rgba(16,185,129,0.5)"
                                                : "1px solid rgba(255,255,255,0.08)",
                                        background:
                                            style === st.id
                                                ? "rgba(16,185,129,0.1)"
                                                : "rgba(255,255,255,0.02)",
                                        color:
                                            style === st.id ? "#ffffff" : "rgba(255,255,255,0.4)",
                                        transition: "all 0.18s",
                                        opacity: loading ? 0.5 : 1,
                                    }}
                                >
                                    <div style={{ fontSize: 18, marginBottom: 6 }}>{st.icon}</div>
                                    <div
                                        style={{
                                            fontSize: 12,
                                            fontWeight: 600,
                                            display: "block",
                                            color:
                                                style === st.id ? "#fff" : "rgba(255,255,255,0.55)",
                                        }}
                                    >
                                        {st.label}
                                    </div>
                                    <div
                                        style={{
                                            fontSize: 10,
                                            marginTop: 2,
                                            color: "rgba(255,255,255,0.28)",
                                        }}
                                    >
                                        {st.desc}
                                    </div>
                                </button>
                            ))}
                        </div>
                    </div>

                    <div
                        style={{
                            height: 1,
                            background: "rgba(255,255,255,0.06)",
                            margin: "0 20px",
                        }}
                    />

                    {/* Voice speed */}
                    <div style={{ padding: "16px 20px" }}>
                        <div
                            style={{
                                display: "flex",
                                justifyContent: "space-between",
                                alignItems: "center",
                                marginBottom: 10,
                            }}
                        >
                            <label
                                style={{
                                    fontSize: 10,
                                    letterSpacing: "0.14em",
                                    textTransform: "uppercase",
                                    color: "rgba(255,255,255,0.38)",
                                }}
                            >
                                Voice Speed
                            </label>
                            <span style={{ fontSize: 12, fontWeight: 700, color: "#10b981" }}>
                                {speed.toFixed(1)}×
                            </span>
                        </div>
                        <input
                            type="range"
                            min={0.5}
                            max={2.0}
                            step={0.1}
                            value={speed}
                            onChange={(e) => setSpeed(parseFloat(e.target.value))}
                            disabled={loading}
                            style={{
                                width: "100%",
                                accentColor: "#10b981",
                                opacity: loading ? 0.4 : 1,
                            }}
                        />
                        <div
                            style={{
                                display: "flex",
                                justifyContent: "space-between",
                                fontSize: 9,
                                color: "rgba(255,255,255,0.2)",
                                marginTop: 5,
                            }}
                        >
                            <span>0.5× slow</span>
                            <span>1.0× normal</span>
                            <span>2.0× fast</span>
                        </div>
                    </div>

                    {/* Generate button */}
                    <div style={{ padding: "0 20px 20px" }}>
                        <motion.button
                            onClick={handleGenerate}
                            disabled={!canSubmit}
                            whileTap={canSubmit ? { scale: 0.97 } : {}}
                            style={{
                                width: "100%",
                                padding: "14px",
                                borderRadius: 12,
                                border: "none",
                                background: canSubmit ? "#10b981" : "rgba(255,255,255,0.05)",
                                color: canSubmit ? "#000000" : "rgba(255,255,255,0.2)",
                                fontSize: 13,
                                fontWeight: 700,
                                fontFamily: "inherit",
                                cursor: canSubmit ? "pointer" : "not-allowed",
                                letterSpacing: "0.03em",
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center",
                                gap: 8,
                                transition: "all 0.18s",
                            }}
                        >
                            {loading ? (
                                <>
                                    <Spinner />
                                    Generating video…
                                </>
                            ) : (
                                "Generate Video →"
                            )}
                        </motion.button>
                    </div>
                </motion.div>

                {/* ── Pipeline Progress ── */}
                <AnimatePresence>
                    {loading && (
                        <motion.div
                            key="pipeline"
                            initial={{ opacity: 0, height: 0 }}
                            animate={{ opacity: 1, height: "auto" }}
                            exit={{ opacity: 0, height: 0 }}
                            transition={{ duration: 0.28 }}
                            style={{ overflow: "hidden", marginBottom: 12 }}
                        >
                            <div
                                style={{
                                    borderRadius: 16,
                                    border: "1px solid rgba(255,255,255,0.07)",
                                    background: "rgba(255,255,255,0.02)",
                                    padding: 20,
                                }}
                            >
                                <div
                                    style={{
                                        fontSize: 10,
                                        letterSpacing: "0.14em",
                                        textTransform: "uppercase",
                                        color: "rgba(255,255,255,0.28)",
                                        marginBottom: 18,
                                    }}
                                >
                                    Pipeline Progress
                                </div>
                                {STEPS.map((step, idx) => {
                                    const isDone = pipeline.doneSteps.includes(step.id);
                                    const isActive = pipeline.activeStep === idx;
                                    return (
                                        <motion.div
                                            key={step.id}
                                            initial={{ opacity: 0, x: -8 }}
                                            animate={{ opacity: 1, x: 0 }}
                                            transition={{ delay: idx * 0.06 }}
                                            style={{
                                                display: "flex",
                                                alignItems: "flex-start",
                                                gap: 12,
                                                marginBottom: idx < STEPS.length - 1 ? 14 : 0,
                                            }}
                                        >
                                            <div
                                                style={{
                                                    width: 28,
                                                    height: 28,
                                                    borderRadius: 8,
                                                    flexShrink: 0,
                                                    marginTop: 2,
                                                    display: "flex",
                                                    alignItems: "center",
                                                    justifyContent: "center",
                                                    fontSize: 11,
                                                    border: isDone
                                                        ? "1px solid rgba(16,185,129,0.5)"
                                                        : isActive
                                                            ? "1px solid rgba(16,185,129,0.3)"
                                                            : "1px solid rgba(255,255,255,0.08)",
                                                    background: isDone
                                                        ? "rgba(16,185,129,0.12)"
                                                        : isActive
                                                            ? "rgba(16,185,129,0.06)"
                                                            : "transparent",
                                                    color: isDone
                                                        ? "#10b981"
                                                        : isActive
                                                            ? "#6ee7b7"
                                                            : "rgba(255,255,255,0.2)",
                                                    transition: "all 0.3s",
                                                }}
                                            >
                                                {isDone ? "✓" : isActive ? <PulsingDot /> : step.icon}
                                            </div>
                                            <div>
                                                <div
                                                    style={{
                                                        fontSize: 12,
                                                        fontWeight: 500,
                                                        marginBottom: 2,
                                                        color: isDone
                                                            ? "#10b981"
                                                            : isActive
                                                                ? "#ffffff"
                                                                : "rgba(255,255,255,0.25)",
                                                        transition: "color 0.3s",
                                                    }}
                                                >
                                                    {step.label}
                                                </div>
                                                {isActive && (
                                                    <motion.div
                                                        initial={{ opacity: 0 }}
                                                        animate={{ opacity: 1 }}
                                                        style={{
                                                            fontSize: 10,
                                                            color: "rgba(255,255,255,0.3)",
                                                            lineHeight: 1.5,
                                                        }}
                                                    >
                                                        {step.sub}
                                                    </motion.div>
                                                )}
                                            </div>
                                        </motion.div>
                                    );
                                })}
                            </div>
                        </motion.div>
                    )}
                </AnimatePresence>

                {/* ── Error ── */}
                <AnimatePresence>
                    {error && (
                        <motion.div
                            key="error"
                            initial={{ opacity: 0, y: 8 }}
                            animate={{ opacity: 1, y: 0 }}
                            exit={{ opacity: 0 }}
                            style={{
                                borderRadius: 14,
                                border: "1px solid rgba(239,68,68,0.3)",
                                background: "rgba(239,68,68,0.06)",
                                padding: 16,
                                marginBottom: 12,
                                display: "flex",
                                gap: 12,
                            }}
                        >
                            <span
                                style={{
                                    color: "#f87171",
                                    fontSize: 14,
                                    marginTop: 1,
                                    flexShrink: 0,
                                }}
                            >
                                ⚠
                            </span>
                            <div>
                                <div
                                    style={{
                                        fontSize: 12,
                                        fontWeight: 600,
                                        color: "#f87171",
                                        marginBottom: 4,
                                    }}
                                >
                                    Generation failed
                                </div>
                                <div
                                    style={{
                                        fontSize: 11,
                                        color: "rgba(252,165,165,0.65)",
                                        lineHeight: 1.5,
                                    }}
                                >
                                    {error}
                                </div>
                                <button
                                    onClick={() => setError(null)}
                                    style={{
                                        background: "none",
                                        border: "none",
                                        cursor: "pointer",
                                        fontFamily: "inherit",
                                        fontSize: 10,
                                        color: "rgba(248,113,113,0.6)",
                                        marginTop: 8,
                                        textDecoration: "underline",
                                        padding: 0,
                                    }}
                                >
                                    Dismiss
                                </button>
                            </div>
                        </motion.div>
                    )}
                </AnimatePresence>

                {/* ── Result ── */}
                <AnimatePresence>
                    {result && (
                        <motion.div
                            key="result"
                            initial={{ opacity: 0, y: 24, scale: 0.97 }}
                            animate={{ opacity: 1, y: 0, scale: 1 }}
                            transition={{ duration: 0.38, ease: [0.16, 1, 0.3, 1] }}
                            style={{
                                borderRadius: 16,
                                border: "1px solid rgba(16,185,129,0.28)",
                                background: "rgba(16,185,129,0.03)",
                                overflow: "hidden",
                            }}
                        >
                            {/* Header */}
                            <div
                                style={{
                                    padding: "18px 20px 14px",
                                    borderBottom: "1px solid rgba(255,255,255,0.06)",
                                }}
                            >
                                <div
                                    style={{
                                        display: "inline-flex",
                                        alignItems: "center",
                                        gap: 6,
                                        fontSize: 9,
                                        letterSpacing: "0.18em",
                                        textTransform: "uppercase",
                                        color: "rgba(16,185,129,0.75)",
                                        border: "1px solid rgba(16,185,129,0.22)",
                                        borderRadius: 999,
                                        padding: "3px 10px",
                                        marginBottom: 10,
                                    }}
                                >
                                    <span
                                        style={{
                                            width: 5,
                                            height: 5,
                                            borderRadius: "50%",
                                            background: "#10b981",
                                            display: "inline-block",
                                        }}
                                    />
                                    Ready · {result.slideCount} slides · {result.style}
                                </div>
                                <div
                                    style={{
                                        fontSize: 17,
                                        fontWeight: 700,
                                        color: "#ffffff",
                                        letterSpacing: "-0.02em",
                                        fontFamily: "'Syne',system-ui,sans-serif",
                                    }}
                                >
                                    {result.title}
                                </div>
                            </div>

                            {/* Video player */}
                            <div style={{ background: "#000" }}>
                                <video
                                    src={result.videoUrl}
                                    controls
                                    autoPlay
                                    style={{ width: "100%", display: "block", maxHeight: 340 }}
                                />
                            </div>

                            {/* Narration */}
                            {result.narration && (
                                <div
                                    style={{
                                        padding: "14px 20px",
                                        borderTop: "1px solid rgba(255,255,255,0.06)",
                                    }}
                                >
                                    <div
                                        style={{
                                            fontSize: 10,
                                            letterSpacing: "0.14em",
                                            textTransform: "uppercase",
                                            color: "rgba(255,255,255,0.28)",
                                            marginBottom: 8,
                                        }}
                                    >
                                        Script / Narration
                                    </div>
                                    <p
                                        style={{
                                            fontSize: 11,
                                            color: "rgba(255,255,255,0.4)",
                                            lineHeight: 1.65,
                                            display: "-webkit-box",
                                            WebkitLineClamp: 4,
                                            WebkitBoxOrient: "vertical",
                                            overflow: "hidden",
                                        }}
                                    >
                                        {result.narration}
                                    </p>
                                </div>
                            )}

                            {/* Actions */}
                            <div
                                style={{
                                    padding: "0 20px 20px",
                                    display: "flex",
                                    gap: 8,
                                    flexWrap: "wrap",
                                    alignItems: "center",
                                }}
                            >
                                <a
                                    href={result.videoUrl}
                                    download
                                    style={{
                                        display: "inline-flex",
                                        alignItems: "center",
                                        gap: 6,
                                        fontSize: 12,
                                        fontWeight: 600,
                                        background: "#10b981",
                                        color: "#000",
                                        borderRadius: 10,
                                        padding: "8px 16px",
                                        textDecoration: "none",
                                        fontFamily: "inherit",
                                    }}
                                >
                                    ↓ Download MP4
                                </a>
                                {result.audioUrl && (
                                    <a
                                        href={result.audioUrl}
                                        download
                                        style={{
                                            display: "inline-flex",
                                            alignItems: "center",
                                            gap: 6,
                                            fontSize: 12,
                                            fontWeight: 500,
                                            border: "1px solid rgba(255,255,255,0.12)",
                                            color: "rgba(255,255,255,0.55)",
                                            borderRadius: 10,
                                            padding: "8px 16px",
                                            textDecoration: "none",
                                            fontFamily: "inherit",
                                        }}
                                    >
                                        ↓ Audio MP3
                                    </a>
                                )}
                                <button
                                    onClick={() => {
                                        setResult(null);
                                        setPrompt("");
                                    }}
                                    style={{
                                        marginLeft: "auto",
                                        background: "none",
                                        border: "none",
                                        fontSize: 11,
                                        color: "rgba(255,255,255,0.25)",
                                        cursor: "pointer",
                                        fontFamily: "inherit",
                                        padding: "8px 4px",
                                    }}
                                >
                                    Generate another →
                                </button>
                            </div>

                            {/* Slide plan */}
                            {result.plan?.slides?.length > 0 && (
                                <div
                                    style={{
                                        borderTop: "1px solid rgba(255,255,255,0.06)",
                                        padding: "14px 20px 20px",
                                    }}
                                >
                                    <div
                                        style={{
                                            fontSize: 10,
                                            letterSpacing: "0.14em",
                                            textTransform: "uppercase",
                                            color: "rgba(255,255,255,0.28)",
                                            marginBottom: 14,
                                        }}
                                    >
                                        Slide Plan
                                    </div>
                                    {result.plan.slides.map((slide, i) => (
                                        <div
                                            key={i}
                                            style={{
                                                display: "flex",
                                                gap: 12,
                                                alignItems: "flex-start",
                                                marginBottom: 10,
                                            }}
                                        >
                                            <span
                                                style={{
                                                    fontSize: 10,
                                                    color: "rgba(255,255,255,0.2)",
                                                    width: 20,
                                                    flexShrink: 0,
                                                    marginTop: 2,
                                                    fontVariantNumeric: "tabular-nums",
                                                }}
                                            >
                                                {String(i + 1).padStart(2, "0")}
                                            </span>
                                            <div>
                                                <div
                                                    style={{
                                                        fontSize: 12,
                                                        fontWeight: 500,
                                                        color: "rgba(255,255,255,0.68)",
                                                    }}
                                                >
                                                    {slide.caption}
                                                </div>
                                                {slide.scriptLine && (
                                                    <div
                                                        style={{
                                                            fontSize: 10,
                                                            color: "rgba(255,255,255,0.28)",
                                                            marginTop: 2,
                                                            lineHeight: 1.5,
                                                        }}
                                                    >
                                                        {slide.scriptLine}
                                                    </div>
                                                )}
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </motion.div>
                    )}
                </AnimatePresence>

                {/* Footer */}
                {!loading && !result && (
                    <motion.p
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ delay: 0.55 }}
                        style={{
                            textAlign: "center",
                            fontSize: 10,
                            color: "rgba(255,255,255,0.14)",
                            marginTop: 28,
                            lineHeight: 1.8,
                        }}
                    >
                        Powered by OpenRouter · Remotion · Edge TTS · Firebase Storage
                    </motion.p>
                )}
            </div>
        </div>
    );
}

The above code is how to render the video once created. It contains the input to enter the prompt and a button that invokes the generate-video endpoint, and finally renders the video.

A few updates one can do is to load this generate-video API endpoint in the proper backend node or a Python-based backend module using honojs, expressjs or flask.

I would prefer doing this in Honojs, and given the same code below

// routes/generate-video.ts
// ─────────────────────────────────────────────────────────────────────────────
// POST /api/generate-video
//
// Hono.js route — drop into your existing Hono app:
//   import { generateVideoRoute } from "./routes/generate-video";
//   app.route("/api", generateVideoRoute);
//
// Body (JSON):
//   prompt      string   required  — user's natural language request
//   userId      string   required  — authenticated user ID
//   draftId     string   optional  — Firestore draft doc to backlink
//   style       string   optional  — "cinematic" | "minimal" | "documentary"
//   voiceSpeed  number   optional  — TTS speed 0.5–2.0 (default 1.0)
//
// Pipeline:
//   1. Validate input
//   2. OpenRouter (claude-3.5-sonnet) → video plan JSON
//   3. OpenRouter (flux-schnell)       → images per slide (parallel)
//   4. Edge TTS                        → narration MP3 (non-fatal)
//   5. Remotion                        → render MP4
//   6. Firebase Storage                → upload audio + video
//   7. Firestore batch                 → save video doc + backlink draft
//   8. Return result JSON
// ─────────────────────────────────────────────────────────────────────────────

import { Hono }            from "hono";
import { env }             from "hono/adapter";
import { HTTPException }   from "hono/http-exception";
import { logger }          from "hono/logger";
import { timing }          from "hono/timing";
import fs                  from "fs/promises";
import os                  from "os";
import path                from "path";
import { bundle }          from "@remotion/bundler";
import { renderMedia, selectComposition } from "@remotion/renderer";

// Firebase Admin — import from your shared firebase-admin init file
// e.g. lib/firebase-admin.ts  (see bottom of this file for setup snippet)
import { db, bucket }      from "../lib/firebase-admin";

// ─── Types ───────────────────────────────────────────────────────────────────
interface RequestBody {
  prompt:     string;
  userId:     string;
  draftId?:   string;
  style?:     "cinematic" | "minimal" | "documentary";
  voiceSpeed?: number;
}

interface SlideItem {
  imagePrompt: string;
  caption:     string;
  scriptLine?: string;
}

interface VideoPlan {
  title:     string;
  narration: string;
  slides:    SlideItem[];
}

// ─── Constants ───────────────────────────────────────────────────────────────
const OPENROUTER_BASE = "https://openrouter.ai/api/v1";
const PLAN_MODEL      = "anthropic/claude-3.5-sonnet";
const IMAGE_MODEL     = "black-forest-labs/flux-schnell";
const MAX_SLIDES      = 10;
const MIN_SLIDES      = 3;

const VALID_STYLES    = ["cinematic", "minimal", "documentary"] as const;

const STYLE_GUIDES: Record<string, string> = {
  cinematic:   "dramatic lighting, wide shots, film grain, 8k, professional photography, cinematic",
  minimal:     "clean white backgrounds, simple compositions, flat design, minimalist, high contrast",
  documentary: "realistic, candid, natural lighting, photojournalism, editorial photography",
};

// ─── Helper: log with prefix ─────────────────────────────────────────────────
const log = (tag: string, msg: string) =>
  console.log(`[video:${tag}] ${msg}`);

const warn = (tag: string, msg: string) =>
  console.warn(`[video:${tag}] ⚠ ${msg}`);

// ─── Step 1: OpenRouter → Video Plan ─────────────────────────────────────────
async function generateVideoPlan(
  prompt: string,
  style: string,
  openrouterKey: string,
  appUrl: string,
): Promise<VideoPlan> {
  const styleHint = STYLE_GUIDES[style] || STYLE_GUIDES.cinematic;

  const systemPrompt = `You are a video producer AI. Given a user prompt, output a structured video plan.
Return ONLY valid JSON — no markdown, no backticks, no explanation.

Shape:
{
  "title": "string (max 60 chars)",
  "narration": "string — all scriptLines joined with a space (assembled automatically)",
  "slides": [
    {
      "imagePrompt": "string (detailed image generation prompt, 40-80 words, style: ${styleHint})",
      "caption": "string (max 8 words shown on screen)",
      "scriptLine": "string (1-3 sentences of narration spoken during this slide)"
    }
  ]
}

Rules:
- Generate between ${MIN_SLIDES} and ${MAX_SLIDES} slides
- Each imagePrompt must be visually rich and detailed
- scriptLines should flow naturally as spoken narration
- Set narration = all scriptLines joined with " "
- Style tone: ${style}`;

  const response = await fetch(`${OPENROUTER_BASE}/chat/completions`, {
    method: "POST",
    headers: {
      "Authorization":  `Bearer ${openrouterKey}`,
      "Content-Type":   "application/json",
      "HTTP-Referer":   appUrl,
      "X-Title":        "Video Generator",
    },
    body: JSON.stringify({
      model:           PLAN_MODEL,
      messages: [
        { role: "system", content: systemPrompt },
        { role: "user",   content: prompt },
      ],
      temperature:     0.7,
      max_tokens:      2500,
      response_format: { type: "json_object" },
    }),
  });

  if (!response.ok) {
    const text = await response.text();
    throw new HTTPException(502, {
      message: `OpenRouter plan generation failed (${response.status}): ${text.slice(0, 200)}`,
    });
  }

  const data = await response.json();
  const raw  = data.choices?.[0]?.message?.content as string | undefined;

  if (!raw) {
    throw new HTTPException(502, { message: "OpenRouter returned empty content for video plan" });
  }

  let plan: VideoPlan;

  try {
    plan = JSON.parse(raw);
  } catch {
    // Fallback: try to extract JSON block if model wrapped it
    const match = raw.match(/\{[\s\S]*\}/);
    if (!match) {
      throw new HTTPException(502, { message: "Could not parse video plan JSON from OpenRouter" });
    }
    plan = JSON.parse(match[0]);
  }

  // Validate required fields
  if (!plan.title || !plan.narration || !Array.isArray(plan.slides) || plan.slides.length === 0) {
    throw new HTTPException(502, {
      message: "Video plan JSON missing required fields (title, narration, slides)",
    });
  }

  // Rebuild narration from scriptLines if available (more accurate)
  const scriptLines = plan.slides.map(s => s.scriptLine).filter(Boolean);
  if (scriptLines.length > 0) {
    plan.narration = scriptLines.join(" ");
  }

  // Cap slides
  plan.slides = plan.slides.slice(0, MAX_SLIDES);

  return plan;
}

// ─── Step 2: OpenRouter → Generate Images ────────────────────────────────────
async function generateImages(
  slides: SlideItem[],
  style: string,
  openrouterKey: string,
  appUrl: string,
): Promise<string[]> {
  const styleSuffix = STYLE_GUIDES[style] || STYLE_GUIDES.cinematic;

  const results = await Promise.allSettled(
    slides.map(async (slide, idx) => {
      try {
        const fullPrompt = `${slide.imagePrompt}, ${styleSuffix}`;

        const response = await fetch(`${OPENROUTER_BASE}/images/generations`, {
          method: "POST",
          headers: {
            "Authorization": `Bearer ${openrouterKey}`,
            "Content-Type":  "application/json",
            "HTTP-Referer":  appUrl,
            "X-Title":       "Video Generator",
          },
          body: JSON.stringify({
            model:  IMAGE_MODEL,
            prompt: fullPrompt,
            n:      1,
            size:   "1280x720",
          }),
        });

        if (!response.ok) {
          throw new Error(`HTTP ${response.status}`);
        }

        const data = await response.json();
        const url  = data.data?.[0]?.url as string | undefined;

        if (!url) throw new Error("No URL in response");

        log("images", `Slide ${idx + 1}/${slides.length} ✓`);
        return url;
      } catch (err: any) {
        // Graceful fallback — video still renders with placeholder
        warn("images", `Slide ${idx + 1} failed (${err?.message}), using placeholder`);
        return `https://placehold.co/1280x720/0d1117/ffffff?text=${encodeURIComponent(slide.caption || `Slide ${idx + 1}`)}`;
      }
    }),
  );

  return results.map((r, idx) =>
    r.status === "fulfilled"
      ? r.value
      : `https://placehold.co/1280x720/0d1117/ffffff?text=Slide+${idx + 1}`,
  );
}

// ─── Step 3: Edge TTS → Narration MP3 ────────────────────────────────────────
async function generateAudio(
  title: string,
  content: string,
  speed: number,
): Promise<Buffer> {
  // Dynamic ESM import
  const { MsEdgeTTS, OUTPUT_FORMAT } = await import("edge-tts");

  const tts = new MsEdgeTTS();
  await tts.setMetadata("en-US-AriaNeural", OUTPUT_FORMAT.AUDIO_24KHZ_48KBITRATE_MONO_MP3);

  const fullText = title ? `${title}. ${content}` : content;

  // Escape XML special chars for SSML
  const escaped = fullText.replace(/[<>&'"]/g, (c: string) =>
    ({ "<": "&lt;", ">": "&gt;", "&": "&amp;", "'": "&apos;", '"': "&quot;" }[c] ?? c),
  );

  const rateStr = speed >= 1
    ? `+${Math.round((speed - 1) * 100)}%`
    : `-${Math.round((1 - speed) * 100)}%`;

  const ssml = `<speak version="1.0" xmlns="http://www.w3.org/2001/10/synthesis" xml:lang="en-US">
    <voice name="en-US-AriaNeural">
      <prosody rate="${rateStr}">${escaped}</prosody>
    </voice>
  </speak>`;

  const chunks: Buffer[] = [];
  const readable = await tts.toStream(ssml);

  return new Promise<Buffer>((resolve, reject) => {
    readable.on("data",  (chunk: Buffer) => chunks.push(chunk));
    readable.on("end",   () => resolve(Buffer.concat(chunks)));
    readable.on("error", reject);
  });
}

// ─── Step 4: Remotion → Render MP4 ───────────────────────────────────────────
async function renderSlideshow(params: {
  images:   string[];
  title:    string;
  audioUrl: string | null;
  captions: string[];
  scriptLines: string[];
}): Promise<{ videoBuffer: Buffer; tempDir: string }> {
  const { images, title, audioUrl, captions, scriptLines } = params;

  const tempDir = path.join(os.tmpdir(), `video-${Date.now()}`);
  await fs.mkdir(tempDir, { recursive: true });

  try {
    const perSlide        = Math.min(8, Math.max(3, Math.floor(40 / Math.max(images.length, 1))));
    const totalDuration   = images.length * perSlide;
    const durationInFrames = Math.ceil(totalDuration * 30);

    const bundleLocation = await bundle({
      entryPoint:     path.join(process.cwd(), "remotion/index.ts"),
      webpackOverride: (config) => config,
    });

    const inputProps = {
      images,
      title,
      audioUrl:    audioUrl ?? "",
      captions,
      scriptLines,
      perSlide,
    };

    const composition = await selectComposition({
      serveUrl:   bundleLocation,
      id:         "VideoComposition",
      inputProps,
    });

    const outputPath = path.join(tempDir, "output.mp4");

    await renderMedia({
      composition,
      serveUrl:        bundleLocation,
      codec:           "h264",
      outputLocation:  outputPath,
      inputProps,
      concurrency:     4,
      frameRange:      [0, durationInFrames - 1],
    });

    const videoBuffer = await fs.readFile(outputPath);
    return { videoBuffer, tempDir };
  } catch (err) {
    // Always clean up temp dir on render failure
    await fs.rm(tempDir, { recursive: true, force: true });
    throw err;
  }
}

// ─── Step 5: Firebase Storage → Upload File ───────────────────────────────────
async function uploadToStorage(
  buffer:      Buffer,
  filename:    string,
  contentType: string,
): Promise<string> {
  const destination = `videos/${Date.now()}-${filename}`;
  const file        = bucket.file(destination);

  await file.save(buffer, {
    metadata:  { contentType },
    resumable: false,           // fine for files <10MB; use resumable for larger
  });

  await file.makePublic();

  return `https://storage.googleapis.com/${bucket.name}/${destination}`;
}

// ─── Step 6: Firestore → Save Video Doc + Backlink Draft ─────────────────────
async function saveVideoDoc(params: {
  videoUrl:   string;
  audioUrl:   string | null;
  title:      string;
  userId:     string;
  draftId?:   string;
  plan:       VideoPlan;
  slideCount: number;
  style:      string;
}): Promise<string> {
  const { videoUrl, audioUrl, title, userId, draftId, plan, slideCount, style } = params;
  const now   = new Date().toISOString();
  const batch = db.batch();

  // ── Video document ──────────────────────────────────────────────────────────
  const videoRef = db.collection("videos").doc();   // auto-generated ID

  batch.set(videoRef, {
    id:         videoRef.id,
    title,
    videoUrl,
    audioUrl:   audioUrl ?? null,
    userId,
    draftId:    draftId ?? null,
    slideCount,
    style,
    plan,                       // full plan stored for regeneration / display
    status:     "ready",
    createdAt:  now,
    updatedAt:  now,
  });

  // ── Backlink draft (if provided) ────────────────────────────────────────────
  if (draftId) {
    const draftRef = db.collection("drafts").doc(draftId);
    batch.update(draftRef, {
      videoId:     videoRef.id,
      videoUrl,
      videoStatus: "rendered",
      updatedAt:   now,
    });
  }

  await batch.commit();

  return videoRef.id;
}

// ─── Hono Router ──────────────────────────────────────────────────────────────
export const generateVideoRoute = new Hono();

generateVideoRoute.use("*", logger());
generateVideoRoute.use("*", timing());

generateVideoRoute.post("/generate-video", async (c) => {
  // Pull env vars via Hono adapter (works with Node, Bun, Cloudflare, etc.)
  const {
    OPENROUTER_API_KEY,
    NEXT_PUBLIC_APP_URL,
    APP_URL,
  } = env<{
    OPENROUTER_API_KEY:   string;
    NEXT_PUBLIC_APP_URL?: string;
    APP_URL?:             string;
  }>(c);

  const appUrl = NEXT_PUBLIC_APP_URL ?? APP_URL ?? "http://localhost:3000";

  // ── Guard: API key must exist ────────────────────────────────────────────────
  if (!OPENROUTER_API_KEY) {
    throw new HTTPException(500, { message: "Server misconfiguration: OPENROUTER_API_KEY not set" });
  }

  // ── Parse + validate body ────────────────────────────────────────────────────
  let body: RequestBody;

  try {
    body = await c.req.json<RequestBody>();
  } catch {
    throw new HTTPException(400, { message: "Request body must be valid JSON" });
  }

  const {
    prompt,
    userId,
    draftId,
    style      = "cinematic",
    voiceSpeed = 1.0,
  } = body;

  if (!userId || typeof userId !== "string" || !userId.trim()) {
    throw new HTTPException(401, { message: "Authentication required." });
  }

  if (!prompt || typeof prompt !== "string" || !prompt.trim()) {
    throw new HTTPException(400, { message: "A prompt is required to generate a video." });
  }

  if (prompt.trim().length < 10) {
    throw new HTTPException(400, { message: "Prompt too short — minimum 10 characters." });
  }

  if (prompt.trim().length > 2000) {
    throw new HTTPException(400, { message: "Prompt too long — maximum 2000 characters." });
  }

  const safeStyle = VALID_STYLES.includes(style as any) ? style : "cinematic";
  const safeSpeed = Math.min(2.0, Math.max(0.5, Number(voiceSpeed) || 1.0));

  log("handler", `User: ${userId} | Style: ${safeStyle} | Speed: ${safeSpeed}x`);
  log("handler", `Prompt: "${prompt.trim().slice(0, 80)}…"`);

  let tempDir: string | null = null;

  try {
    // ── Step 1: Generate video plan ────────────────────────────────────────────
    log("step1", "Generating video plan via OpenRouter…");
    const plan = await generateVideoPlan(prompt.trim(), safeStyle, OPENROUTER_API_KEY, appUrl);
    log("step1", `Plan ready: "${plan.title}" — ${plan.slides.length} slides`);

    // ── Step 2: Generate images ────────────────────────────────────────────────
    log("step2", `Generating ${plan.slides.length} images…`);
    const imageUrls = await generateImages(plan.slides, safeStyle, OPENROUTER_API_KEY, appUrl);
    log("step2", `${imageUrls.length} images ready`);

    // ── Step 3: Generate narration audio (non-fatal) ───────────────────────────
    let audioUrl: string | null = null;
    log("step3", "Generating narration audio via Edge TTS…");

    try {
      const audioBuffer   = await generateAudio(plan.title, plan.narration, safeSpeed);
      const audioFilename = `${Date.now()}-audio.mp3`;
      audioUrl = await uploadToStorage(audioBuffer, audioFilename, "audio/mpeg");
      log("step3", `Audio uploaded: ${audioUrl}`);
    } catch (e: any) {
      warn("step3", `Audio skipped (non-fatal): ${e?.message}`);
    }

    // ── Step 4: Render MP4 ─────────────────────────────────────────────────────
    log("step4", `Rendering MP4 (${imageUrls.length} slides)…`);
    const captions    = plan.slides.map(s => s.caption    ?? "");
    const scriptLines = plan.slides.map(s => s.scriptLine ?? "");

    const rendered = await renderSlideshow({
      images: imageUrls,
      title:  plan.title,
      audioUrl,
      captions,
      scriptLines,
    });

    tempDir = rendered.tempDir;
    log("step4", "Render complete ✓");

    // ── Step 5: Upload MP4 ─────────────────────────────────────────────────────
    log("step5", "Uploading MP4 to Firebase Storage…");
    const safeTitle     = plan.title.replace(/[^a-z0-9]/gi, "-").toLowerCase().slice(0, 40);
    const videoFilename = `${Date.now()}-${safeTitle}.mp4`;
    const videoUrl      = await uploadToStorage(rendered.videoBuffer, videoFilename, "video/mp4");
    log("step5", `Video uploaded: ${videoUrl}`);

    // ── Step 6: Save to Firestore ──────────────────────────────────────────────
    log("step6", "Saving Firestore document…");
    const docId = await saveVideoDoc({
      videoUrl,
      audioUrl,
      title:      plan.title,
      userId,
      draftId,
      plan,
      slideCount: imageUrls.length,
      style:      safeStyle,
    });
    log("step6", `Saved → docId: ${docId}`);

    // ── Cleanup temp dir ───────────────────────────────────────────────────────
    if (tempDir) {
      await fs.rm(tempDir, { recursive: true, force: true });
      tempDir = null;
    }

    log("handler", `Pipeline complete ✓ docId: ${docId}`);

    // ── Success response ───────────────────────────────────────────────────────
    return c.json({
      success:    true,
      videoUrl,
      audioUrl,
      docId,
      title:      plan.title,
      narration:  plan.narration,
      slideCount: imageUrls.length,
      style:      safeStyle,
      plan,
    }, 200);

  } catch (err: any) {
    // ── Always clean up on any failure ────────────────────────────────────────
    if (tempDir) {
      await fs.rm(tempDir, { recursive: true, force: true }).catch(() => {});
    }

    // Re-throw HTTPExceptions (already formatted)
    if (err instanceof HTTPException) throw err;

    // Classify other errors
    console.error("[video:handler] Unhandled error:", err);

    if (err?.message?.includes("OpenRouter")) {
      throw new HTTPException(502, { message: `AI service error: ${err.message}` });
    }

    if (err?.message?.includes("render") || err?.message?.includes("Remotion")) {
      throw new HTTPException(500, { message: `Video render failed: ${err.message}` });
    }

    throw new HTTPException(500, { message: err?.message ?? "Failed to generate video" });
  }
});

// ─── Global error handler (attach to your main Hono app) ─────────────────────
// In your main app file:
//
//   app.onError((err, c) => {
//     if (err instanceof HTTPException) {
//       return c.json({ error: err.message }, err.status);
//     }
//     console.error(err);
//     return c.json({ error: "Internal server error" }, 500);
//   });

For backend nodejs, firestore-admin is the npm you should use instead of simple Firebase

One can recreate the same endpoint using Prisma, Supabase, or Drizzle ORM as the database choice or MongoDB or PostgreSQL. Choice is yours, so choose accordingly.

That would be enough for today

One more thing, I've been working on Buildsaas.dev and Inkgest.com, my 2 other SaaS ideas. Do check the website and the idea, if you feel them useful, try them out, thanks in advance

Cheers

Shrey

Built CRM websites with CRM template

shrey vijayvargiya — Tue, 10 Mar 2026 09:53:04 +0000

Hey folks!!

Last year in December, I was randomly sitting on the computer and got this idea of creating SaaS template but CRM businesses

Couple of reasons why I switch to that because of online internet demand and secondly because of very less clutter market, I mean developers found it boring to do and make CRM templates

I got the idea and start creating the first verion and launched it on gumroad to my small niche community to check the idea

In 4 months, we have made first 10 sales and few $$$ which I wasn't expecting at all.

I got one more direct client meeting based on CRM SaaS and few other meetings booked because of the template demo, check demo

Why CRM SaaS got views?

CRMs are generally more needed in the business domains and among business companies

What's included?

Dashboard page - Contains the varieties of chart analysis, database tables with sorting, filtering and searching
Leads page - Leads stats, contacts list, charts and database tables
Sales page - Detailed analytics section, database table of products sold, sales chart, progress report
Contacts page - Database table for contacts with searching, filtering and sorting features
Task manager page - Kanban board to easily manage the task
Companies page - Database table to manage companies
Integrations/APIs pages - contains the third-party API and agents database table
Navbar - Responsive navbar sith search input, user notifications dropdown and profile component
Sidebar - Modern slick animated and responsive sidebar with navigation items along with icons
Pixel-Perfect Design: Professionally designed sections with modern animations.
Clean JavaScript Codebase: No complex TypeScript – simple to edit and extend.
No Backend Lock-In: Works with Firebase, Supabase, Flask, Node.js, or any API.

Tech stack

This template is made using a modern tech stack while reducing too much dependency to make it versatile and can work anytime in the future so even if you want the template 1 year down the line, it will work as it is.

Next.js
React
Lucide react and react icons for icons
Tailwind CSS for styling

Demo
Get CRM SaaS template

Feel free to connect if you need more advance or further CRM templates for your business

Cheers
Shrey
gettemplate.website

Built 5 apps in 20 Days

shrey vijayvargiya — Mon, 09 Mar 2026 08:48:46 +0000

Hey there

Welcome to the new email. The last 30 days have been crazy because I've been working on multiple ideas at the same time using one boilerplate.

I ended up making 5 apps in the last 20 days, and all using one boilerplate or SDK, buildsaas.dev

It's not a marketing gimmick or tactic; check all products on buildsaas.dev/examples

HOW?

It's not really that hard; all you need is a system. Each application have few components as defined below

Frontend for client/users
Backend for APIs, Databases
Admin panel for Founders and Teams

Each component has its own atoms/molecules, as explained

Frontend - Landing page, Blog, Newsletter, Contact, Features, App, Privacy and, and Pricing and Legal pages
Backend - Authentication, Invoicing, Payments, Customers and other CRUD APIs
Admin Panel - Analytics, Invoicing, Payments, Customers, all in one advanced admin panel

Once that is completed in a boilerplate, we can easily build any application on top of it and manage, run and easily scale the application.

Read a more detailed article on buildsaas.dev

Apps built using buildsaas
Blog website
Waitinglist website
Inkgest
Gettemplate.website
iHateReading

How to use Get Buildsaas?
You can directly get the buildsaas on Gumroad
Get the buildsaas on the website

Buildsaas.dev
Get Buildsaas Boilerplate

A few perks to have buildsaas on the website,

Connect Github account to push the repository to Github
Connect the Vercel account using the API key to deploy the app on Vercel

One can quickly log in, get the code repository, push to github and deploy to the vercel in less than a minute.

Buildsaas vs AI Code Editor

In the world of the AI era, people ask me why can't they make buildsaas on their own using AI code editors?

Yes, you can, but that again takes more than 100k tokens in total, and the time it would take is 130+ hours to integrate the following features

Authentication (Google, Username/Password)
Payment Integration (Polar/Stripe)
Analytics (Posthog/Google Analytics/Vercel Analytics)
Notion-like Blog Editor
Asset management Admin panel
Drag/Drop Kanban board

and many more features that, in total, save 100+ hours of your time, try demo

Any AI code editor can easily build it, but it will take time, hallucinate and even cost more than the price point for buildsaas 😁🔥

Conclusion

Buildsaas.dev is a all in one advance 2026 boilerplate to build any software application in the world. I am building more apps using buildsaas, my next one is probably an email templates collection website, which I will certainly share with you once its done.

Till that time, have a good day and do check buildsaas to give your valuable feedback/review to me.

Cheers
Shrey

100+ FREE React website templates

shrey vijayvargiya — Thu, 05 Mar 2026 16:43:52 +0000

Hello folks,

Welcome to the new blog. Last year, while working with our client, gor this idea of building a collection of website templates.

I mean, its helpfull for so many cases, saves time, avoids doing repetitive work again and again, makes things easy even for myself.

One good example is why gettemplate.website is a good working example for me is when I was using my own created template, the Gather AI marketing template and sold the template to a random client on Reddit.

What is Gettemplate?

Gettemplate is a collection of Reactjs Tailwind website templates, including full-stack and frontend website templates.

Each template is built using the following packages

Reactjs
Nextjs
Taiwlind CSS
Framer motion
GSAP (optional)
Lucide React Icons

Each template is a fine-tuned production-ready template, and it's not just a UI library its a production ready websites

Each template is built using the latest tech-stack
Responsive template using Tailwind
Compatible with React, Nextjs, Vite and other reactjs frameworks
Easy onboarding, copy-paste website to build your next project and more

A lot more reasons why gettemplate.website is helping teams to quickly launch their project.

Categories of Templates

Gettemplate touches a variety of domains and provides website templates for categories

Developer websites
Educational website
CRM website template
Admin panel websites
Blog website
Marketing template
Finance dashboards
Blog, Newsletter, and website content

I am consistently bringing more and more categories of websites and will try to cover almost every domain.

How to use gettemplate.website?

Go to the website
Create an account, simply log in
Open gettemplate.website/templates for FREE templates
Open each template, Click to view source button
Copy paste source code
Push to Github using one button
Download the Nextjs repository

Resources

Gettemplate Docs: Read more on docs

Gettemplate Premium Templates: Premium Templates

Gettemplate FREE templates: Free Templates

Widgets

100+ React, Tailwind widgets to simply copy-paste on your website
I made this to create stunning landing pages using the widgets section. Most of the latest websites need widgets, animated widgets

Check 100+ React Animated Widgets

Gradient Generator Tool

Most of the time, I need a simple tool to create gradients and background gradients, and that is why I made Gradient Generator.

Create stunning gradients
Animate gradients
Copy-paste code
Export gradient

Gradient Generator

Forms

Another use-case we have is creating forms for every website in the world, and copy-pasting would save time, so I made 100+ forms and launched.

Each form is built using React and Tailwind for various categories across the globe.

Check 100+ React Forms

One can understand how usefull gettemplate.website is becoming for me and for others. Its a combination of all kinds of tools one needs to build beautifull website.

That's it for the today, do check the website and let me know what else I can provide.

Cheers
Shrey
Gettemplate.website

SwipeEmails: Emails that convert

shrey vijayvargiya — Thu, 05 Mar 2026 07:56:19 +0000

Steal top companies emails from a large collection of 400+ emails

Hello and welcome, folks,

https://swipe-emails.vercel.app/

Last week, I was researching email templates and the problems with them on the internet.

One common keyword search related to email templates is FREE and good email templates, mainly inspired by top companies and emails that convert.

Google Keyword search trend
Conversion is the biggest ROI, emailing is still the fastest and most solid way to convert your visitors into a customer

Idea Validation

I’ve found so many email templates on Pinterest and X.com, and I've tried the email builder and an AI chatbot to create them.

Emails are an integral part of business; most top companies handle millions of emails sent per day to millions of users.

For iHateReading, we send 10k emails to our users when we need to share news/information/updates.

Google Keyword search website is not heavily used by me to track the market demand, understand what exactly is needed and searched over the internet, which brings the solution closer to what is demanded in the market.

Free, good, top companies' email templates, this is what people need and searched on the internet a lot.

This process seems to validate the idea, but not exactly. I called this process checking an idea's demand.

Idea validation comes when the MVP is launched within one week or 2/3 weeks max, and collects some real users/visitors data points, but for a small micro business, one can simply find the search keyword trend to know if we have a enough market size to cater to and deliver.

Introducing SwipeEmails

swipe-emails.vercel.app

The collection of top companies' emails that convert. That is the tagline and the product.

How I built SwipeEmails

I collected all the emails using a scraping technique, then took a screenshot of each of them. Followed by uploading screenshots into my DB and assembling all inside the nextjs repository to build the frontend website within hours.

For scraping, I was using inkgest.com, the Ink to Gest tool, which helps to write, read and publish content from a single prompt or URL.

Inkgest is built on top of my own scraping APIs and an AI LLM layer. Inkgest helps to convert simple prompts + URL to create blogs, newsletters, tables like content or do more like research, compare, deep search, etc.

Process: Scrape Emails (via Inkgest) -> Data labelling for images using custom API and AI LLM -> Frontend website using buildsaas.dev

Buildsaas.dev is the main reason I can put the entire app into production in just a couple of hours.

Buildsaas is s starterkit boilerplate, but more than that, it comes with the latest tech-stack with all required pages, modules, APIs and SDKs integrated, which one needs to build any application quickly.

Future Updates

I don’t have other ideas around it currently, but if you have, so do let me know in the comments section.

A few things, I might add is as follows

Embeddings vector search
Image into HTML and React code
MCP server (enable Claudecode and Desktop search)

Do check the product, https://swipe-emails.vercel.app/

Do let me know your opinion in the comments section

Shrey

Quickly build a full-stack blog content website

shrey vijayvargiya — Sat, 24 Jan 2026 17:27:22 +0000

Hey there!!

Welcome to the new letter. For the last 2 months, I've been working on buildsaas.dev

It's a starterkit framework for building applications, a single boilerplate that contains almost everything in an application. For example, every website has a few common things that should be present, as mentioned below

Frontend pages (landing page, pricing, subscription, blog, newsletter, legal pages)
Backend APIs (Authentication, Payment, Pricing, other required APIs, exportconvert, etc)
Admin panel to manage my application (Write blog, craft emails, send emails, check subscribers, visitor analysis, payments records etc)

Buildsaas.dev starterkit includes all of the above features.

Build a Blog Website Instantly!!\

Let's not bore you and show some demo,

Demo Github Repository

How to use and launch your app!!

Download zip
Add Firebase database keys in .env.local file
Push to Github
Deploy to Vercel

Tech stack used is Nextjs, React, Tailwind and Firebase

If you need an email service for all, add Resend API keys as well

How to write a blog

Go to localhost:3000/admin
Open the blogs tab from the sidebar, as shownin the image below
Start writing a blog and push to the database (it will automatically be shown in the frontend localhost:3000/blog)
Similarly, add emails, check email subscribers and check analytics within the admin

Why only Firebase?

The first version uses Firebae as a database, and if you need another database, such as Supabase, let me know.

But if you need Supabase, you can use buildsaas.dev starterkit which is more advance version and built using Supabase and Firebase both including Stripe and Polar as payments.

Happy to know your first blog website!!

Download the source code and build your first blog website, deploy it, put it live and share it with me.

I would add your website on buildsaas.dev as the testimonial and show your blog website to help you get your first customer 😁.

Go on, get your spot on buildsaas

It's FREE and Quick

Cheers

Shrey

Buildsaas.dev

shrey vijayvargiya — Sat, 10 Jan 2026 13:47:52 +0000

Welcome to the art of building applications

Under the Hood

The story begins when I started my freelancer or solopreneur journey, a few years back, 5 years ago to be precise.

Problem

Every time I was working on a new project/product/client work, I faced the same repetitive process

Frontend code repository
Almost the same UI pages with all UI components
API integration mainly follows the same pattern of API (just a few changes in key-values or table column keys)
Database integration along with Authentication Even after having AI code editors to almost write plain english for building, the process to be followed for every new project/product/website remains the same, and a more important point to be noted is why AI code editors do the same work again and again for every new project?

AI can reuse the code and depend more on a framework instead of rewriting the same code

I hate doing the same pattern work; it must be automated, but the big question then was how?

Automation should not cost the customisation and freedom for developers. I don’t want to work with shadcn in every project, not because I hate it, but because not everywebsite should look the same.

Same UI components lead to similar-looking websites; we need to change that by providing customisation freedom.

Few glitches to solve, fewer tokens to cost and more scripts to automate should be written, and in the end, a system/framework should be built.

Buildsaas.dev at the rescue

That leads me to build a basic framework. I want to build it for my websites and projects and test in a real-world application, for example, check ihatereading.in and gettemplate.website, both of which are built using one framework, and that is buildsaas.dev

Buildsaas is not just a boilerplate but a framework that provides full-featured features, APIs, Authentication, Payments, and CRUD operations in one code repository.

One repository that works well with almost every online business. Buildsaas provide freedom, give fundamental base to start, provide modular approach in development to scale and is highly customisable in nature.

Buildsaas starter boilerplate works with Cursor, V0, Antigravity, Bolt & Lovable, making it redundant, low downtime (works every time), needs fewer changes, and is highly scalable because of the latest technology stack.

Buildsaas provides a way to quickly build full-stack applications, manage, analyse, scale the product, analyse the audience with engaging content, subscription management, bugs/errors tracking, new releases management and more advanced features, that I’ll be taking about below

Advance Admin Panel

Most of the boilerplate I’ve seen on the internet puts attention mainly in frontend development by integrating UI components, adding themes with all other detailed required pages, such as blogs landing page, waiting list, error reporting, newsletter subscription form and lots of animations.

Whereas with Buildsaas, I’ve moved one step ahead.

Building projects/website is not a hard task, but managing, running and scaling to increase revenue is the hardest ladder to climb.

Most of the boilerplate provide easy shortcut to a big, cool, animated frontend website to attract users, but what else afterthat is unknown, a mystery and unsolvable. Most of the clients have personally brought this problem to me, and I’ve faced the same problem with existing boilerplates is they don’t help much after some time.

That is what brought me build the Advanced Admin Panel, which I was personally using in gettemplate and ihatereading.

10k of ihatereading users were emailed yesterday using Buildsaas and Resend as emailing sending npm module, one cool Tiptap editor to write and one API method to send emails in batches to all users/subscribers and this all is done inside one Admin panel.

Admin panel is the magic behind every successful startups/, websites/projects. Admin panel contains the new ideas, existing customers, future contacts, engaging content and even more.

The buildsaas admin https://buildsaas-s18e.vercel.app/admin provides the following, as shown in the image

Dashboard: View reports, analyse charts for the entire application
Blogs, Emails: Blogs and Emails list, along withthe Tiptap editor to write blogs and craft emails. Please note that one can send emails to all subscribers within it
Kanban board: Manage tasks using drag-drop kanban board (works with teams as well, assign tasks to a team member)
Assets: Asset management to get a public sharing URL 5.** User subscribers**: Collection of newsletter subscribers
Users: List of all authenticated users of your application
Customers: List of paying customers on your application
Waitlist: Waiting list before launching your application
Analysis: Provide charts anda visitors list with unique fingerprinting for each visitor
Payments: Track records of all payments that occur on the application
Product: List of online products to be shown on the application
Invoices: Create, store invoices for customers, users or for each payment record
Messages: All messages received from the users on the application
Issues: Record all issues or bugs in the application for quick solving
Forms: Forms submission list along with form-builder with public URL to create forms for feedback, reviews, rating and more
Teams: Team management for the admin panel using Role-Based Access Control (RBAC)

There are numerous features within a single admin panel, but every website or online business needs them in one form or another, which makes it imperative to integrate all of them in Buildsaas.

Frontend Application

Buildsaas is not just an admin panel.

Buildsaas comes with a frontend application that includes authentication and other integrated services.

Landing page with Navbar, Hero section, Features, Pricing and Footer
Google and Email/Password Authentication using Firebase/Supabase (Depending on the database)
Features page to list down SAAS application features
Pricing page with pricing API and payment API integrated to add subscription -> collect payments -> Track payments and more
Newsletter subscription form
404 Error page
Legal pages, privacy, cookie content, policy with terms and conditions pages
Responsive source code Making Buildsaas a long-term framework.

Tech Stack

What makes Buildsaas customisable is the Tech stack. I personally don’t want to add every npm package or third-party API in the existing framework because it reduces the tendency to customise.

Current Tech Stack

Nextjs and React
Tailwind CSS
Tanstack React Query for data fetching
Resend for Emailing
Firebase/Supabase for Authentication with Google and Email/Password
Firebase/Supabase as database
Stripe/Polar for payments
dndkit for Drag drop
Tiptap Editor for creating content
AI integration is done by the Vercel AI SDK or the OpenAI router
Server-side API in Nextjs for webhooks and other APIs

Tech stack left/avoided

Shadcn
Typescript (Choice is given to the developer to change to TS from JS)
Mailgun and other emailing services
Lemon Squeezy, Paypal, Paddle and other payment providers (But can be easily added, similar process we have for Stripe/Polar)
Drizzle ORM, Convex, Appwrite, and Prisma as a database alternative to Firebase/Supabase (But integrating them using Cursor won’t take much time, hardly one day or 4–6 hours) I hope you understand the reason behind our current tech stack and the why and what we have left untouched. But I sincerly believe the other npm packages or SDK can be easily integrated within the existing Buildsaas.

Pricing

We offer 2 plans, one for FREE and another one is Paid version

FREE version didn’t have all Admin panel features, but has all Frontend application features/pages as mentioned above

Paid version included everything mentioned above in the Admin panel and in the frontend application, along with that, we provide Email support as well.

Detailed pricing comparison page for Buildsaas
Try the free version on the website: https://buildsaas.dev/

Get Buildsaas

Future Updates

In future updates, we might move to making it more versatile and flexible by integrating other database alternatives, other emailing services and more landing pages frontend options for users

All updates are available for FREE to Paid version users (onl one-time payment), Buy Buildsaas

PS — If you want to pay in INR, DM me or email me.

Stay tuned

More updates are coming
Shrey
SaaS

Building AI applications without AI Slop

shrey vijayvargiya — Thu, 08 Jan 2026 13:40:10 +0000

Building AI applications? then you might need to read this?

Vibe coding is occupying the developer seats day by day

Now and then, we have one vibe-coded tweet, viral posts, and trending projects on social media

The big question still lies under the curtain, shadowed and not answered

Has any vibe-coded project gained traction?
Has any vibe-coded project reached the first 10k users?
Has any vibe-coded project had the potential to grab the first million $$ funding?

As a software developer with 5 years of experience, I used to refer stackoverflow then open VS Code, read some documentation, boring ones for Material UI, ExpressJS, and MongoDB, to finally write some code

Those efforts are now vanished because of AI LLM

Reading docs
Updating code
Installing packages
Writing test cases &
Writing code

All of the above can be done by an AI, but we are still far away from trusting AI to build our applications, and more importantly, only software developers are good at building full-fledged apps using vibe coding.

Product managers have started using Google AI Studio or bolt or other website builders

> *Designers have tonnes of tools to quickly create mockups, wireframes, logos and content

> *Developers are using Cursor, Antigravity to make apps within hours

AI agents are slowly penetrating niche domains, and AI is building more tools for almost every online domain that exists in the market.

SAAS applications are more than trending in 2025. In 2025, YC had 420 companies, among them 300+ were from the AI domain, building AI agents.

We are about to view the big change, another big change, because we have just started putting AI or integrating AI into every domain in the world, with a large section of domains left untouched.

The reason why a large section of domains will remain untouched even when we have AI and building is like a cake-walk in 2026 is because of vibe coding and AI slop.

AI can write code, but needs human intervention in the loop to be sure about AI to be on the right track. AI can quickly bring content from the internet, solutions from web/docs/github repositories, but the human at the end will have to make an informed decision to finally pushthe TAB button for confirmation and in a more niche market, we pick more human intervention is needed to be sure AI won’t create another slop.

AI Optimism

I am optimistic about AI as a developer, and I truly believe AI agents are the future.

Agents will slowly help to touch the niche market, which was quite tough for developers, for example, game development, SAAS applications, hardware problems, multiple repetitive work to save time, etc

When execution is not a bottleneck and ideas are everywhere, meaning more products will be launched and come into the market, a simple yet effective formula. Eventually, because of AI, everyone will create an online product, and everyone will create online content to sell that product.

Most of the people in future will create products and content for distribution, and the main bottlenecks will be managing those multiple products.

This brings the next million $$$ idea for agents — Create multiple agents and each doing its work on the internet, with human intervention to observe and manage. One dashboard that helps users to create agents for almost everything, web search, online website builder, social media content creator, meeting scheduler, idea research etc all these task have one or multiple agents running from one dashboard managed by an human intervention.

A person can quickly create new agent, edit the exiting agent work like an employee and cancel the agent contract or work anytime within the dashboard.

I want to bring an example to make you understand how this is possible within SAAS domain. The image below is the admin panel for our

buildsaas.dev: The simple SAAS starter kit or boilerplate, I don’t really call it a boilerplate because it’s more than that.

Press enter or click to view image in full size

https://buildsaas.dev

The admin panel can do lot of things for a small application or product, for example

Write email, blogs, manage tasks, generate content
Manage users, customers, make payments/checkout links, track orders etc
Assign tasks to teams, view analytics
Other static work like asset management, changelogs, roling new feaures etc

One admin dashboard can bring entire SAAS application to live, distribute the content, find new ideas, manage assets, legal papers, contacts, leads and opportunities

The next part is to let AI create the admin panel for every application followed by AI agents within admin panel managing and running the application at scale with human intervention.

One will create more SAAS application and run thorough a dashboard and each application have it’s own admin panel to manage/run/scale/analyse and do more.

Doing more is not a problem but not doing structurely is definately a problem

AI slop can be avoided if we have human intervention but mainly by software developers and how non-developers can came into picture is by simply having a interface for approval/suggestions from a developers team or consultant.

For example, If I am a non-technical person running online business and need some help to role out technical features then I can let AI agent build the feature and mark it with need approval from a technical person within the team or I can hire one as consultant to finally approve my feature with some human intervention making it easy for everyone to role features without any AI slop.

Approval team (Technical person/consultant)+ AI features !== AI slop

Currently I see lot of AI testing agents, one can integrate them within admin panel to let AI create the feature and agent test it before approving then we can finally use human intervention in the end to role the ƒeature for masses.

I’ve read it online that China have started selling AI agents as a employee on the contract basis meaning one canhire a specific niche AI agent as an employee per hour giving freedom to quickly cancel the contract or update the contract.

More to be said in future about this

Till then have a good day

Shrey