DEV Community: shrey vijayvargiya

6 CRM templates you can demo today (and the full kit when you’re ready)

shrey vijayvargiya — Wed, 29 Jul 2026 08:14:23 +0000

Hello folks

We just shipped a cleaner way to explore SaaSCRM: six focused CRM templates, each tuned for a real business shape — not a generic “admin dump.”

Browse them all on saascrm.site/templates. Live demos open in one click. When you outgrow a slim starter, the full kit is waiting on pricing.

Why templates?

Building a CRM from a blank Next.js app is slow in the boring ways:

Sidebar + routing + empty states for every module
Tables, filters, detail pages, and seed data that actually look real
Theme tokens so dark mode and rebrands don’t break mid-ship

Templates skip that setup. You pick a vertical that already matches your workflow, demo it, then customize instead of inventing the admin layer from scratch.

That’s the whole idea behind SaaSCRM:

Small verticals → prove the UI for your niche fast
Full kit → 60+ screens when you need sales, ops, finance, CMS, and system in one product

The 6 templates (one line each)

Template	One-line detail
Indie Stripe Billing	Stripe-shaped revenue OS — customers, charges, subscriptions, failed payments.
Agency CRM	Leads → pipeline → invoices → projects for client delivery shops.
Freelancer CRM	Clients, invoices, payments, and tasks in one slim hub.
Creator CMS	Blogs, newsletters, subscribers, and content analytics.
Digital Store CRM	Sell ebooks, PDFs, icons & assets — catalog, orders, payouts.
Ecommerce CMS	Products, inventory, shipping, raw materials, plus blogs & scheduler.

How to use each one

Same playbook for every template:

Open the templates gallery and click a card
Hit View live demo — it loads that vertical inside the SaaSCRM shell
Click around the sidebar (that is the product shape)
When you’re ready to own the code, grab the starter / pack from the template page or upgrade to the full kit

Indie Stripe Billing

Best if you live in Stripe Dashboard tabs. Demo → swap seed customers / plans → wire real Stripe later. Home lands on revenue; dig into failed charges and subscriptions.

Agency CRM

Best for studios and boutique agencies. Walk Leads → Pipeline → Invoices → Projects, then rename stages to match how you actually close and deliver.

Freelancer CRM

Best for solo operators. Keep Clients / Invoices / Payments / Tasks as the daily loop. Replace seed clients with your roster and ship.

Creator CMS

Best for writers and content teams. Use CMS + Analytics + Users, then point blog / newsletter rows at your real calendar or email tool.

Digital Store CRM

Best for digital product sellers. Start on Products, then Orders → Invoices → Payments. Badge SKUs as ebook / PDF / icon pack as you grow.

Ecommerce CMS

Best for DTC / ops-heavy stores. Run Products → Inventory → Orders → Shipping, track raw materials, and keep marketing in CMS + Scheduler without leaving the admin.

When to buy the full kit

The six templates are focused starters. The Full CRM kit is the whole house:

60+ production screens (sales, ops, finance, CMS, system)
Agentic AI chatbot, theme customizer, marketing site patterns
Lifetime updates — one-time purchase from $49 (Template + Figma from $79)

If you’re building a real product admin — not just a niche slice — start here:

Boom — grab the full kit

Buy SaaSCRM on Pricing →

Or preview everything in the app first: Open the full demo · Browse all 6 templates

Ship the admin layer. Build the business on top.

Cursor, Codex, Claude Code prompts collection

shrey vijayvargiya — Tue, 28 Jul 2026 14:42:32 +0000

(https://ihatereading.in/cursor-rules)

Hello and welcome to the new blog

This blog is originally published on and for ihatereading.in

Last month, I wrote a new stunning aggregator or collection-based blog, 300+ SAAS Directories to submit your website, project and tool, making it easy for solo-developers and indie-hackers to promote their product.

The post/blog/article works well on the internet, which gives me another idea of providing more such content on iHateReading, the exact reason I built iHateReading.

Imagine we are all using AI agents in 2027 and in future; one thing that is sure in that case is prompt engineering, or prompts or rules for your AI tool. Chatgpt, Claude and Codex or Cursor all work as AI agents similarly, but the only thing that matters to differentiate the results is the prompts/rules/skills.

200+ AI Cursor Agent Rules, Why and

I have been using Cursor for the past year, and I work very well for our team, but one thing was missing: the same prompts every time, the same theme and design system for every prompt to make better websites, write better test cases, make a responsive website or integrate dark/light themes using Tailwind variables.

All those tasks need the same prompt, and rewriting them is time consuming tasks, instead, we can have a list or collection to solve this problem.

Extensive list of Cursor rules for each of the tech stack, SDK, APIs, such as

Nextjs, React, Vite and Tanstack Cursor rules
Firebase, Supabase, Appwrite, NeonDB, CockroachDB, Prisma, Drizzle ORM database rules
Stripe, Polar, Lemon Squeezy, Dodo and Paystack, PayPal-based payments rules for AI agents
Best practices for React, Tailwind and Javascript/Typescript, Rust/Python/Go rules for AI agents

All the above tasks are repeated ones by nature, and we need a collection to simply copy-paste them.

We ended up building one and took a few inspirations from online Github repositories, https://github.com/PatrickJS/awesome-cursorrules

200+ Cursor AI Rules Agent

> It's FREE to use

How to use them?

Go to the cursor rules page
Check the rules you are working on, Firebase or React or Tailwind
Click the rule and copy-paste the prompt
Add that prompt inside Claude Code, Codex, Lovable, Bolt or Cursor and make your code better

Simple 4 step process to make better product

That would be enough for today, do give it a check, I am adding more rules and if you find anything missing or more to add, feel free to DM me or email, I reply to all emails

See you in the next one\
Shrey\
iHateReading

AI CRM Blueprint: Building a CRM in 2 minutes

shrey vijayvargiya — Sun, 26 Jul 2026 09:11:40 +0000

Hello folks

Today’s post is about something we’ve been shipping quietly on SAASCRM.site: the AI Builder — a free planner that helps you design your CRM in about two minutes.

No signup. No sales call. Just describe what you’re building, and get a clear plan matched to the SaaSCRM template.

What is the AI Builder?

The AI Builder lives at /blueprint. Think of it as a CRM architect in your browser.

You tell it:

Business type (SaaS, agency, recruiting, real estate, and more)
Team size
Backend plan (prototype, Supabase, Firebase, existing API…)
Launch target (prototype, MVP, or production)
Features you need — Leads, Pipeline, Invoices, CMS, Analytics, and so on
A short note on what you’re building

It returns a blueprint you can actually use — not a vague “AI summary.”

What does it provide?

After you generate a plan, you get:

Overview — what’s already covered by the template vs what needs custom work
Page map — the CRM screens you should ship first
Recommended stack — frontend and backend direction that fits your answers
Timeline — realistic estimates for prototype, frontend, backend, and production
Cursor prompts — copy-paste prompts tailored to the SaaSCRM project rules
Build CRM — a path to start from the template (or generate a small free starter)

In short: less guessing, more shipping.

How to use it (simple)

Open Plan your CRM
Pick your business type, team size, backend, and target
Tap the modules you need
Write one sentence about what you’re building
Hit Generate free CRM blueprint
Review the tabs — especially Pages, Timeline, and Cursor prompts

That’s it. You can run a few plans per hour for free and refine as you go.

Build CRM with our template

The blueprint is the map. The template is the foundation.

Once you like your plan:

Buy the source template and open it in Cursor
Paste the generated prompts to customize modules, branding, and workflows
Explore matching screens in the live demo

👉 Build CRM with our template — one-time purchase, lifetime updates.

Or start free first: Open the AI Builder.

Plan first. Customize next. Ship faster.

Cheers,

Shrey

Cool shadcn libraries

shrey vijayvargiya — Thu, 23 Jul 2026 08:50:44 +0000

You can't miss

Hello and welcome to the new blog

It's 2026, and AI can certainly make our website, and the only problem the AI agents have is building creative websites.

Creative websites need storytelling, state management, and almost perfect eye-pleasing theme and colour coordination.

I almost found myself itchy when building a creative website with full of animations, highly performant, less use of useEffect hooks, more of CSS than JavaScript, better colour themes and palletes with proper depth and hierarchy to manage among the DOM elements in design theory.

Shadcn is the most used UI library with 100k+ Github stars, if you haven't tried shadcn them, you are missing something on the table.

I love how shadcn easily handles customisation. We provide a context provider for theme customisation to toggle and switch the themes, extending to deeply nested children.

The demo video has been added below, showing the CSS customisation example using shadcn as the UI library.

Go to this link and click on the top right colour palette icon, it will open a drawer to edit the CSS of the entire website UI elements.

Shadcn UI Library

Shadcn is a headless UI library that brings one CLI command to add the source code instead of adding the entire UI library inside node_modules.

This concept makes it interesting; one CLI can update my UI element within the entire repository and can add more UI elements using one CLI command.

This also brings an opportunity for everyone to create shadow-based repositories and submit to directories to let other developers install your code or UI element with just one CLI command.

Most of the time, I don't even use the CLI; I prefer adding the shadcn UI code directory by copy-pasting inside the lib/ui folder in my repository.

Why Shadcn?

Every time we developers build UI elements, we add the same animation source code, add the same pattern of colour palletes and CSS. Shadcn eased the pain of redoing it; it's like a bootstrap of early 2010.

We have a bunch of React UI elements ready as fundamental elements and can build more complex states and animated UI components on top of it.

Cool and Top Shadcn Libraries

Sharing some cool latest top-shadcn libraries or UI components, I've witnessed.

Rare UI

Shadcn paper shaders for backgrounds

TweakCN: I love the idea of customisation that comes from it

Smoothui: Smooth animated UI elements

Threecn: 3D-based WebGL elements using Shadcn

componentry.dev: Components from Shadcn

Shoogle.dev: Explore and search all Shadcn-based libraries

Morphin.dev: Premium UI elements

ShadcnStudio: Studio for shadcn builders

Shadcnuikit: UI kits for solo developers

Ruixen: UI components and premium templates

Shadcnspace: Shadcn-based UI components

Bklit UI: Shadcn charts and data components

ReUI: Shadcn blocks with the MCP server

Cuelume: Interaction sound for web components

I think that would be enough for today

See you at the next one

Cheers

Shrey

RepCN Repository builder open-source tool

shrey vijayvargiya — Tue, 14 Jul 2026 16:17:26 +0000

Convert React code into a deployed project with a shareable URL

Hello and welcome to the new blog

Our last blog was about building iHateReading and earning from a content platform. While running iHateReading, I've personally needed so many tools, and luckily, in the age of AI, I can quickly build tools for internal work.

First, let me explain with an example: running any platform needs tools for different types of work, tools for writing, tools for content management, tools for user management, tools for assets creation, tools for research, etc.

Each tool has a purpose to serve and mainly reduce the execution time if done manually; one good example is creating banner images for each blog. I write almost every day, and I need to put a cool, catchy title on almost every blog. Each blog banner image creation is a process with tasks; if you are an engineer, you can understand the pain!!

But I found that I've had to stumble upon Canvas or other tools mainly for creating banners. I've figured out that making assets is not important; having examples of assets, just like canvas templates, is a more accurate solution to my problem. The first month was building the basic tool, and then later on, adding the templates for various categories was my decided plan, and I ended up making a simple canva alternative tool, kixi.app

Building an internal tool will take time, but if that tool is reducing your development debt and saving time to give better output, then it always works. Another example is our FREE open-source internal writing app, which works offline, is simple, easy to use, has a dark/light theme, is open-source and shows a graph network connection between all the created notes,

Check Github: https://github.com/shreyvijayvargiya/opennote

Why do we need these tools in times of Notion and Apple Notes? The concept is simple for internal use, no payment issues, no authentication issues, no data transfer issues.

The choice is yours if needed and can reduce costs and save time by building that internal tool for yourself and maybe that tool helps others, for example, React CRM SAAS template I made for my small SAAS businesses and ended up adding more pages 60 pages in total with classic theme editor and luckily it has helped 10+ businesses worldwide and my current client need CRM based on our React CRM template.

I often rely on the concept of easing my own work, making it a more fun job to do and then figuring out how to monetise it.

Problem Statement

In today's blog, we will be discussing another open-source tool, the idea of sharing a single React code by deploying it on a custom domain or a demo pseudo domain.

But first, I want to explain the problem statement: Every time I went to Claude and asked for a code, it gave me either HTML or React code. Claude can render HTML easily inside a browser, and React too, but not NextJS or Vite, and TanStack apps; those framework codebases cannot be rendered and previewed inside Claude, and Claude needs React rendering and a building engine under the hood to make it possible.

Another problem I've faced is that all the React code written by Claude can only be shared via Artefacts, not as a URL or domain, or even a subdomain.

For example, paste the below prompt in Claude code

Give me a classic animated hero section with an animated background using Tailwind CSS, React
lucide-react for icons and use Framer Motion for animation, give me a single-file React
code component

The Claude will return the single-file React code component. Why only a single file? I'll explain it later on.

Once we got the code, I couldn't share this code with others to view inside the browser, nor could I share the code output preview to view; all they needed was a Claude for the same.

RepCN to the Rescue

Here comes RepCN to the rescue, which sits nicely between Claude and shareable React code for designers and developers.

Imagine you can create Nextjs or Vite, or Tanstack repository using that single React code. Push the repository to Github creating a new repository on Github and finally deploy that repository onto Vercel to get your own URL of {project-name}.vercel.app

How RepCN can help

Create Nextjs or your choice of code repository from a single React code component
Install already existing defaults such as Shadcn, and choose a language TS/JS
Push to Github and deploy to Vercel for better URL sharing with a preview of your source code
Automating the process of generating a new repository, installing all packages and building the architecture

One of the most important reasons I need RepCN is to create a new repository based on a single React code with all packages installed. The default packages it includes are as follows

Nextjs as a framework
React as a language
Tailwind CSS for styling
Lucide React for icons
Framer motion for animation
Sonner as toast

But the above packages can be changed, and you can choose Vite or Tanstack as a framework, shadcn as a UI library with JS or TS supporting both.

RepCN is Open-Source

RepCN is open-source and built using Nextjs and React

No authentication needed

No server-side API is required

No databases are used in making it

Completely FREE and Open-Source

Give it a try on a website: https://repcn.buildsaas.dev/

Fetch Github repository: https://github.com/shreyvijayvargiya/repcn

That would be enough for today, see you in the next one

Cheers

Shrey

One last thing, my last release template was Tooldir: Directory creating starterkit with complete payment and authentication integrated, check tooldir.buildsaas.dev

Building and Running the Content Platform

shrey vijayvargiya — Mon, 13 Jul 2026 16:21:18 +0000

Welcome to the new blog

If you are new here, I am shrey, a software developer and creator of multiple products online.
I have been running iHateReading for the past 4 years, and we have crossed 10k users signed up and are operating at 1k monthly active users.

I am glad that readers are revisiting the website; the churn rate has been low for the past few months, and people are subscribing to our newsletter more than ever.

This year, in 2026, in the first 6 months, I've improved the landing page and added other ƒeatures on the website as explained below

Explore github trending repositories directly on the web home page
New 300+ SaaS directories page (our 2026 most visited page)

Nothing new has been done apart from consistent writing on the platform.

iHateReading is FREE to read, not forced to log in, and no compulsory subscription to read.

Each blog is handcrafted with zero AI involvement. I've been doing this for the past 5 years, which makes it easy for me to craft a 500-word article in 10-20 minutes.

Building iHateReading

I've never covered details about how I am running this platform, how I am earning, etc

iHateReading is built entirely using Nextjs and Firebase, and the detailed tech-stack is:

Nextjs
React
Tailwind
Lucide
Firebase
Redux
Tiptap editor
Vercel
Server functions
Resend

The deployment is on Vercel, and the database is Firebase. We do use the paid version of Firebase with the Pay-as-you-go feature, and the reason is that I've made iHateReading 5 years ago and migrating to a new database is not easy when you have 10k total users.

Promoting the website

Most of the time, I've got the same question to address: How to market my website, how to get visitors and users or traffic?

First and foremost, it's not easy, and it won't happen on day-1
You need 3-6 months in total to grab a good user base.

Marketing on multiple other platforms, such as X, LinkedIn, TikTok, IG, Youtube, Medium, Devto, Hashnode, Dailydev, Cold Emailing, Reddit, all these platforms are needed to promote the website.

One can say pay attention to one. Yes, if YouTube, then prefer YouTube, if good on LinkedIn, then prefer LinkedIn and so on. Choice is yours, but choose one platform and become very good at it to gain an audience.

My mistake 4 years ago was choosing multiple platforms at the same time and promoting my content on multiple platforms. The strategy was good, but too much promotion was creating chaos in my work schedule and making it difficult to manage. I prefer choosing one platform and becoming good at it.

But you might have to prompt or distribute the backlinks, hyperlink of your blog to the other trusted high-ranking domains, such as X, YouTube, LinkedIn, Hackerrank, or Devto, this increase the trust, and an AI agent like Chatgpt can recommend your website very well.

I was contacted by one of the people whose SAAS business is to bring your blog content platform or website on chatgpt recommendations, his SAAS idea was to help people promote their website on chatgpt and AI agent suggestions/recommendations, increasing the trust, domain rating and traffic.

Another good solution is to submit the website to Google Search Console with sitemaps and have the page indexed, preferably by buying the .com domain or other trusted domains; do not go beyond fancy, untrusted domains, otherwise your emails will be spammed in the inbox.

Make a list of distribution channels for your website content, for me it's Medium, Hackernoon, Hashnode, Devto and LinkedIn. Do not spam similar content across platforms; leverage each platform's audience, understand what they want, and only promote that type of content.

Admin Panel

I've been writing for years and have used multiple writing tools and CMS, but it was never easy to write content and push to the database and then render on the website with all SEO tags and an updated sitemap.

I've learned this admin panel and its benefits in my previous company, and using a similar technique, I have an admin panel for our iHateReading to write blogs, edit blogs, manage users, create email newsletters on a Tiptap notion-like editor, send emails to our subscribers directly from the admin panel, store blogs directly into the database, etc

All these features are handled within the admin panel; it's more like iHateReading CMS.

I am a big fan of the Admin panel, and we have built the most advanced Admin Panel, which we reuse across all of our existing products and future SAAS products.

Check Admin Panel, just to provide an overview of the admin panel

Earning sources

Initially, iHateReading's target was to reach to the exact audiences and then increase the subscriber base. As a platform, iHateReading wasn't a pain killer its a vitamin so we can't depend on users to come and subscribe.

The first target was to bring more subscribers, and for that, in 2023, I started crafting bi-weekly email updates on programming, tech and AI.

Within the first 8 months, we have crossed 1k subscribers because of the traffic, but nobody told you how to reach to that point.

It took me almost 1 to 2 years, with consistent writing of almost 500 blogs, to promote the website to 1k active monthly visitors.

Promoting the website has a compounding effect, and it works slowly, but certainly it does work.

Once the subscriber base was increasing, I was confident enough to show something to our early sponsor. Cold emailing for sponsors is easy-peasy money, but it's not easy to get those sponsors.

We got our first sponsor for iHateReading in January 2025, Anima AI. The company reached out to me to create blog content and promote the content on iHateReading via newsletter, cold emailing and through the blog on the website.

iHateReading has provided 300+ monthly visitors with 0.6% of conversion ratio for Anima, and these were their words, not mine. 300 users were not bad for any small startup, and so many solo indie developers needed that many visitors.

Other ways to provide sponsorship are the website banner position, navbar sponsors, footer and other placements on the website, job posting, email marketing via cold emailing to all subscribers, all these are the ways to earn.

One easy way is to contact the companies or SAAS founders, asking them to provide a banner, blog and one/2/3 cold email package promoting their website/tool/product.

The package works every time.
Instead of selling one sponsored blog, I prefer providing one blog for one month, 2/3 cold emailing marketing to our subscribers, and one banner or footer placement for advertisement and promoting a number at the end of the month, such as 1k visitors in total for the next 30-40 days.

Check our Advertisement page for a better understanding

If you can't find the client for sponsorship, here as few ways to do so

Find manually on LinkedIn and contact each of them, DM
Find each on X or Reddit and DM them promoting your website
Use third-party client finding solutions, such as Apollo for lead generation and other AI LinkedIn or X lead generation tools
Social media tweets, posts asking for sponsors and replying to all comments sections
Posting a small YouTube short for the same

Manually reaching out to them works well, since you only need 2-3 sponsors each month, and manually doing it will save time and increase the conversion or success rate.

That would be enough for today, see you in the next one
Cheers
Shrey
iHateReading

Build a directory listing website that earns online

shrey vijayvargiya — Fri, 10 Jul 2026 05:44:29 +0000

A starter kit to quickly make your own directory listing website using Nextjs, Supabase and Stripe

This blog tells the story about ToolDir, the directory listing website template built using Nextjs, Supabase and Stripe, a full-stack template to quickly build your directory listing website platform that can earn online.

Directory listing websites are boring, but in 2026, we got tonnes of SaaS submission websites, AI tool listing websites, prompt directories, Design md directories, and even React frontend UI directories.

Each directory has almost the same pattern of building, and every time we do the same process as defined

Create a frontend landing page
Each product page and all product listings pages with filters and search
Login page for authentication
Submit page for submitting tools/prompts/designs based on the directory website

Below is our ToolDir LLM.txt for the directory template. Copy the text and paste it into Claude to get more details about our listing directory template, its features, and how to create one on your own.

# ToolDir — LLM context file
# Purpose: help coding agents understand this repo quickly without exploratory scanning.
# Last cleaned for launch template readiness.

## Product

ToolDir is a Next.js 15 (Pages Router) AI tool directory boilerplate.
Buyers launch a public directory site, accept tool submissions, sell launch slots,
publish a blog, and manage everything from `/admin`.

This is NOT a generic multi-tenant SaaS CMS. Older SaaS modules (email campaigns,
waitlist, kanban, products catalog, forms builder, cron, codegen) were removed.

## Tech stack

- Next.js 15 Pages Router (`pages/`), React 18, Tailwind, shadcn/ui
- Supabase (Auth + Postgres + Storage)
- TanStack React Query for server state
- Redux Toolkit only for subscription/customer client state
- TipTap for blog CMS
- Stripe **one-time** Checkout for launch slots (server builds `price_data`; no Price ID catalog required)
- Set `STRIPE_TEST_ZERO=true` (+ `NEXT_PUBLIC_STRIPE_TEST_ZERO`) to force $0 checkout while wiring webhooks/admin
- Resend for optional slot-payment receipt (`sendSlotPaymentEmail`)
- Framer Motion for marketing motion

## Critical architecture note

`app/` is NOT the App Router.
- `pages/` = real Next.js routes and API handlers
- `app/admin/` = admin UI components
- `app/frontend/` = marketing site components (Navbar, Footer, directory UI)
- `components/ui/` = shadcn primitives
- `lib/` = APIs, hooks, config, data seeds, store, utils

## Public routes (keep)

| Route | File | Role |
|-------|------|------|
| `/` | `pages/index.js` | Directory home |
| `/tool/[slug]` | `pages/tool/[slug].js` | Tool detail |
| `/categories/[slug]` | `pages/categories/[slug].js` | Category filter |
| `/submit` | `pages/submit.js` | Multi-step submission |
| `/pricing` | `pages/pricing.js` | Launch slot calendar |
| `/dashboard` | `pages/dashboard.js` | User submissions |
| `/blog`, `/blog/[slug]` | `pages/blog*.js` | Public blog |
| `/contact`, `/privacy`, `/terms-and-conditions` | legal |
| `/auth/callback` | Supabase OAuth |
| `/robots.txt`, `/sitemap.xml` | SEO |

## Admin routes (keep)

| Route | Role |
|-------|------|
| `/admin` | Shell + tabs |
| `/admin/blogs/new`, `/admin/blogs/[id]` | Nested blog editor |
| `/admin/editor/blog` | Legacy redirect into nested editor |

Admin tabs (sidebar): analytics, users, submissions, payments, invoices, pricing-slots, blogs.
Tab id `forms` was renamed to `submissions` (legacy `forms` still opens SubmissionsTab).

## API routes (keep)

- `/api/directory-tools/publish` — approve submission → listing
- `/api/directory-tools/seed` — seed from `lib/data/tools.js`
- `/api/tool-submissions/create` — public submit
- `/api/pricing-slots/upsert` — admin slot CRUD
- `/api/storage/upload-image` — Supabase Storage uploads
- `/api/messages/create` — contact form
- `/api/stripe/checkout` — one-time Checkout for launch slot (`price_data`, optional `$0` via `STRIPE_TEST_ZERO`)
- `/api/stripe/webhook` — marks submission paid, upserts `payments` / `customers` / `users`, sends Resend receipt

Removed: `/api/stripe/cancel-subscription` (no SaaS subscriptions).

## Core modules (do not delete)

lib/api/directoryTools.js
lib/api/toolSubmissions.js
lib/api/pricingSlots.js
lib/api/blog.js
lib/api/storage.js
lib/api/auth.js
lib/hooks/useDirectoryTools.js
lib/hooks/useBlogs.js
lib/hooks/usePricingSlots.js
lib/data/tools.js
lib/data/pricing-slots.js
lib/data/testimonials.js
app/frontend/marketing/*
app/admin/components/SubmissionsTab.jsx
app/admin/components/PricingSlotsTab.jsx
app/admin/components/BlogTab.jsx
app/admin/components/BlogTiptapEditor.jsx
app/admin/views/BlogEditorView.jsx


## Data model (Supabase)

Primary tables: `directory_tools`, `tool_submissions`, `pricing_slots`, `blogs`
Billing/admin: `users`, `customers`, `payments`, `checkouts`, `invoices`, `messages`, `app_analytics`
Storage bucket: `saas-starter-storage` (name kept for compatibility)

See `supabase-migrations.sql` (single file: tables + payment columns + Storage bucket).

When Supabase is empty / unset, directory listing can fall back to mock data in `lib/data/tools.js`.

## Supabase Storage

Bucket name: **`saas-starter-storage`** (constant `STORAGE_BUCKET` in `lib/api/storage.js`).
TipTap editors call `uploadBlogEditorImage` → direct Storage upload, fallback `POST /api/storage/upload-image`.
Paths: `blogs/content/`, `blogs/{id}/content/`, `blogs/banners/`, `blogs/{id}/banner-*`.
SQL: run `supabase-migrations.sql` once (includes Storage bucket `saas-starter-storage`).

## Environment variables

Required for core:
- `NEXT_PUBLIC_SITE_URL`
- `NEXT_PUBLIC_SUPABASE_URL`
- `NEXT_PUBLIC_SUPABASE_KEY`

Payments:
- `STRIPE_SECRET_KEY`
- `STRIPE_WEBHOOK_SECRET`
- `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` (optional if you only start checkout server-side)
- `STRIPE_TEST_ZERO=true` — charge $0 in Checkout for local testing
- `NEXT_PUBLIC_STRIPE_TEST_ZERO=true` — show $0 copy on submit UI

Optional:
- `RESEND_API_KEY`, `RESEND_FROM_EMAIL`
- `NEXT_PUBLIC_POSTHOG_KEY`, `NEXT_PUBLIC_POSTHOG_HOST`
- `NEXT_PUBLIC_APP_URL` (legacy Stripe fallback; prefer SITE_URL)

Use `.env.local` locally. `.env*` is gitignored.

## Intentional dual editors

- `BlogTiptapEditor.jsx` — canonical nested route editor (`/admin/blogs/*`)
- `TiptapEditor.jsx` — still used by BlogTab modal list workflow

Do not delete either without consolidating BlogTab first.

## What was removed for launch

Do not reintroduce these without a product need:
- Forms builder (`FormsTab`, `/api/forms/*`, `forms` / `form_submissions` tables)
- Email campaigns, subscribers, waitlist, kanban/tasks, idea DB, changelog, cron, assets CMS
- Builder zip/AST APIs, roles-config codegen (`modules-config`, generate-*)
- Unused deps: octokit, archiver, simple-git, nginx, react-toastify, @vercel/analytics, @stripe/stripe-js, unused Radix accordion/checkbox/avatar/tabs/tooltip/switch/scroll-area

## Conventions for agents

1. Prefer Pages Router for new pages under `pages/`.
2. Put reusable marketing UI in `app/frontend/marketing/`.
3. Put Supabase access in `lib/api/*`; use React Query hooks in `lib/hooks/*`.
4. Do not change visual theme / CSS / layout unless the task is design work.
5. Do not commit `.env` files.
6. Keep packaging lean — delete orphan modules instead of leaving stubs.
7. Brand copy is ToolDir, not "SAAS Starter".

## Local commands

bash
npm install
npm run dev # http://localhost:3002
npm run build
npm run lint
npm run pack # clean buyer zip → dist/tooldir.zip

When I was building this boilerplate, I wrote the LLM text to help everyone ask questions related to the boilerplate on Claude or chatgpt.

Once done, check the demo

Once checked, buy the template 😃

Let me explain what this template contains

How to build your Directory website in seconds?

You will get the zip file
Unzip it and run some commands (All details are in the Readme.md file in the zip)
Once run, add the supabase migration SQL in supabase SQL editor to create the database tables
For authentication, simply enable supabase Google and Email as a sign-in provider and add Google Cloud Console credentials, such as Client ID and Client secret, along with the OAuth callback URL (Details are in the readme file)
Add the Stripe secret key from the Stripe dashboard to enable payment for the early submission booking slot
Change and customise the pricing, landing page and blogs as per your project needs
Deploy the app and put the env keys containing supabase key and the Stripe key on the deployment server

7 steps and your directory website is ready with database, authentication and payment integrated.

Admin Panel to Manage Directory Website Business

That is not enough

Inside the zip folder, you can find app/admin folder, this contains the admin panel to write blog, review submissions, check payments and website analytics and update pricing for each slot, all reflects directly on the website within the admin panel.

https://tooldir.buildsaas.dev/admin

This makes it easy for you to run the entire directory website content, manage users and view analytics without touching code.

Tech Stack

The template is built using the latest technology stack

Nextjs
Shadcn for UI components
Tailwind for styling
framer motion for animation
Lucide React for icons
Supabase for the database
Supabase storage for images
Stripe for payment
Resend for emailing

All tech stacks are universally accepted and open-source, making it robust by nature.

Conclusion

Directory listing websites are in trend, and making one is a good way for you to earn money online. ToolDir ease the pain in making the entire website and saved almost $2k as a developer's costs; it works well with AI agents like Cursor, v0 or Lovable or Bolt.

Check the demo

Get the template

Cheers

Shrey

If needed, custom template, shoot me an email at shreyvijayvargiya26@gmail.com

Making of Aantraa

shrey vijayvargiya — Fri, 26 Jun 2026 15:20:30 +0000

Making of Aantraa

aantraa.site — AI audio & video translation, caption generator, and viral shorts cutter.

Under the Hood

I run a small YouTube channel. I'm not a full-time content creator, but YouTube is a solid platform to gain traffic for your online work, business, project, or idea.

Aantraa is what I built in a week. The main concept is simple:

Video translation into multiple languages
Audio translation — including text-to-audio, with MP3 output for Premiere Pro
Long-form to shorts — convert YouTube long-form video into short clips

At that time, only three features were needed, so website development wasn't the heavy lift. The real work was building APIs, backend infrastructure to integrate AI into video, and dealing with heavy storage.

Breaking the execution into steps: How I made Aantraa

AI LLM layering and provider

Aantraa is heavily dependent on AI APIs — we need reliable infrastructure for LLM providers.

OpenRouter, Portkey, Vercel AI SDK labs, and individual APIs for Anthropic, Deepseek, and OpenAI are solid options.

I prefer OpenRouter for Aantraa for one reason: multiple model support — it's easy to pick the cheapest capable model for each job. Easy to integrate, strong community support, free model access, and more.

AI LLM APIs are needed at almost every stage in the backend:

Understanding video context and creating a script
Translating the script into target languages
Recording the script into MP3 or WAV format
Summarising the video
Generating captions
Cutting videos into shorts

Building APIs and servers

Each layer needs heavy AI context and prompt engineering. Loop engineering is the trend here — and it's required for aantraa.

For example, video translation works in multiple connected steps:

Video translation API breakdown

AI understands the video, fed into the LLM via the ffmpeg module
AI generates a script/caption from the video
AI translates the script into the desired language
AI generates audio (MP3 or WAV) of the new translation
AI glues audio and video together using ffmpeg

Each step depends on the previous one, which makes production debugging hard when something breaks.

Solution: Track each process — usage tokens, estimated time, errors, and response metadata.

The same pattern applies to audio translation, viral clip cutter, and caption generator.

Infrastructure and servers

Local API development is manageable until you ship to production.

Layer	Choice
Framework	Hono.js
Backend hosting	Vercel Edge or Fly.io
DevOps	Docker, simple Git CI/CD
Database	Firebase / Supabase
Storage	UploadThing

I found UploadThing as a practical alternative to AWS S3 and Firebase/Supabase storage for file uploads. It provides client and server SDKs to upload files quickly (5 MB per chunk on the free plan).

We need storage heavily because every AI layer doesn't keep its own memory — every generated audio/video file must land in storage.

FFmpeg is essential for video and audio work, but it has limitations on serverless functions and Vercel Edge. That pushed us toward Fly.io, Railway, or Render for heavier media workloads.

Video translation into 90+ languages

Aantraa supports 90+ languages for video and audio translation.

AI translates scripts, text, on-screen text, and video context well — it needs to understand the video through the script and each frame. FFmpeg helps with that pipeline.

The flow:

AI generates a script from the source
AI translates into the target language
AI creates dubbed audio in that language
FFmpeg merges audio and video into a new translated file

Each step needs debugging, prompt engineering, and FFmpeg integration.

Finally, the output uploads to storage and returns a URL to the client for download and playback.

Audio to MP3 in multiple languages

Aantraa isn't only video translation. As a creator, I also wanted to turn blog posts or text into audio — podcast-style listening.

The audio translation tool covers:

Text to audio — download MP3 or WAV
90+ languages for text and video sources
Video to audio extraction and translation
Multiple target languages in parallel

That makes aantraa a supporting platform: one recording → 90+ language MP3s, ready for one-click sharing.

YouTube videos to shorts

The viral shorts feature converts long-form YouTube video into short clips you can upload directly to your channel.

API breakdown

AI understands the full video context — summary and script
AI breaks the script by timestamp into the desired number of shorts
FFmpeg cuts each clip; APIs upload to storage

It sounds simple, but production needs FFmpeg tuning, AI context limits, and file-size guardrails — videos over ~10 MB cost more time and money to process.

Video translation examples

See 10+ translated videos in Spanish, Hindi, Bengali, Gujarati, Marathi, Tamil, French, English, Japanese, Chinese, and more on our examples page.

90+ languages make aantraa a universal, global platform.

Conclusion

The first version is live. We also offer APIs for business agencies and startup teams — reach out via contact if you're interested.

Links

Try the product and share your feedback — early signups get 1 free minute of AI translation credit.

Cheers,

Shrey

Aantraa · aantraa.site

I built a CRM Template Nobody Asked For Until 10+ Businesses Bought It

shrey vijayvargiya — Wed, 17 Jun 2026 13:58:27 +0000

I Built a CRM Template Nobody Asked For — Then 10+ Businesses Bought It

How shipping something "boring" taught me more about product-market fit than any hot SaaS idea ever did.

I almost didn't build this.

CRMs are not sexy. Nobody tweets about their CRM. No one posts "just shipped a killer role-based access control system" and goes viral. It's the kind of product you build because you have to, not because you want to.

But that's exactly why I built it — and why it worked.

The Problem Nobody Talks About

When I started working on a CRM project, I quickly realised something: businesses don't just need a CRM, they need a CRM that fits their workflow. Off-the-shelf tools are either too generic or too expensive to customise. And building one from scratch? That's a rabbit hole most teams don't have the time or budget to fall into.

CRMs are quite complex:

20+ pages of UI that all need to communicate with each other
Role-based access control for different team members
API integrations with third-party tools
Version control for data schemas
Authentication, permissions, audit trails

It's not just a CRUD app. It's a whole product surface.

Version 1: Ship Ugly, Ship Fast

The first version was not impressive. Here's what I launched:

10+ pages of core CRM UI (contacts, deals, pipeline, tasks, settings)
Basic authentication flow
API database schemas for the most common use cases
Frontend UI components built with React and Tailwind

That's it. No documentation. No Figma files. No localization.

I put it on Gumroad, shared it with a small developer community I'd been building, and waited.

The First Sale

One month later, someone bought it.

Not a big company. Not a VC-backed startup. Just a small team that needed a CRM and didn't want to spend six months building one from scratch. They paid, they used it, and then — this is the part that changes everything — they gave me feedback.

That feedback was worth more than the sale price.

They told me what was missing. What didn't work the way they expected. What they wished was there. And I built it.

Three Months of Compounding Improvements

Here's what the template looked like three months after the first sale:

More pages, production-grade quality
From 10 to 22 fully functional pages — including analytics dashboards, activity logs, user management, reporting views, and more. Not just wireframes. Actual working pages with real data flow.

Proper schema support
Developers have different preferences and constraints. I added schema definitions for Zod, Supabase, Firebase, and Postgres so the template could slot into almost any backend stack without a full rewrite.

Documentation and multi-language support
The first version had zero documentation. That's fine for an MVP, but not for a product you're selling to businesses. I wrote proper docs, added setup guides, and built in multi-language support for international teams.

What 10+ Businesses Taught Me

By month four, the template had helped 10+ businesses worldwide — from solo founders to small agencies to companies building internal tools.

Each sale brought a new perspective. The feedback loop looked like this:

Sale → Feedback → Improvement → Better product → Next sale

A few things surprised me:

The "boring" parts mattered most. Nobody cared about the UI animations. They cared about whether the schema worked with their database, whether the auth was secure, whether their developers could understand the codebase in an afternoon.

Customization was the real ask. Several clients didn't just want the template — they wanted us to customize it for their existing business. The template became a starting point for consulting work. One product, two revenue streams.

Figma files were a latent need. One client specifically requested Figma files. This wasn't something I'd planned for. But it made sense — designers need to adapt the UI before developers touch the code. Now it's part of the offering.

What's in the Template Today

For developers and teams evaluating this, here's the current state:

Feature	Details
Pages	22 production-grade pages
Auth	Full authentication with role-based access
Schemas	Zod, Supabase, Firebase, Postgres
Frontend	React + Tailwind CSS
Documentation	Full setup guide included
Language support	Multi-language ready
Figma files	Available on request

The goal was always to give teams a 90% head start so they could spend their engineering time on what makes their business unique — not reinventing contact management for the hundredth time.

Conclusion

Boring products solve real problems.

If you're a developer thinking about what to build next, consider: what problem is so unsexy that nobody is building a great solution for it? That gap is usually where the money is.

Try It

If you're building a CRM, need a CRM for your business, or want a starting point for a custom internal tool:

Live demo: crm-saas.buildsaas.dev
Documentation: crm-saas.buildsaas.dev/about
Buy (USD): Gumroad
Buy (INR): Dodo Payments

DM me on @treyvijay or mention in the comment section.

Cheers
Shrey

Aantraa: AI Audio Video Translation Tool

shrey vijayvargiya — Wed, 10 Jun 2026 17:10:16 +0000

Under the Hood

Global internet consumers will reach 8 billion users by 2030.

The Internet is flooded with videos and texts from people all over the world.

In future, every 4 in one person will be an internet creator in some or the other ways. Not every creator is a YouTuber; some are on X, IG, TikTok, Pinterest, Reddit, Substack and LinkedIn.

In India, we have billions of consumers, in total 1.5, each one in his/her naqtive language consumes the internet.

Distributing the content needs a start of creating content in the native language. AI models are certainly a good choice to create content in native languages or, more precisely, to translate content.

Introducing Aantraa

Aantraa is an AI audio-video translation platform.

Aantraa provides 190+ language translations for your next video or audio.

Dub one video into 90+ languages with cloned voices.

Aantraa turns video, audio, or text into localised versions in minutes.

No studio. No back-and-forth. No one-language-at-a-time workflow.

If your content travels, your voice should too.

Aantraa video/audio translation form website screenshot

I built aantraa to curb the need and demand of content creators across the globe to translate the content from Russian, German, Chinese, and English to Hindi for 1.5 billion people and vice versa.

It's the simplest tool that takes a URL or uploads the video and selects the language of translation, and within minutes, aantraa translates the video.

Aantraa by Examples

Video posted in English on x.com, and below is the translated video URL in Hindi.

https://x.com/elonmusk/status/2053230433299771580?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E2053230433299771580%7Ctwgr%5E%7Ctwcon%5Es1_&ref_url=

https://b4fcijccdw.ufs.sh/f/mVUSE925dTRYdk7jrjutB0mAHE68ivjy7GN4WZpIoQk2Ydcg

Aantraa works with 190+ languages for translation, as shown below on the website.

Check more examples on the website

How it Works

This is what 3 minutes buys you:

Upload a video.
Pick 5 languages.
Get voice-cloned dubbed exports in one queue.

Most teams still localise like it’s 2014.

We built aantraa so one file can become a whole market.

Dubbing voice-over with 20+ male/female voices

Aantraa provides 190+ languages and over 20 male/female voice-overs to select the dubbed voice.

Press enter or click to view image in full size

Why Aantraa

We kept hearing the same complaint from creators and teams:

“We don’t need a studio. We need multilingual output by Friday.”

So we built aantraa around speed, parallel jobs, and private uploads.

Less process. More published content.

Stop dubbing one language at a time.

aantraa lets you run parallel jobs for Spanish, Hindi, French, and more from the same source file.

Who can use Aantraa

Built for creators, agencies, and teams that need localised content without the production overhead.

Cheaper than a full dubbing workflow.

That’s the best.

If you’re a creator, agency, or content team, paying per minute for fast self-serve dubbing is easier than coordinating translators, voice talent, and editors.

Conclusion

There are already strong tools in the dubbing space.

That’s exactly why we built aantraa with a different angle.

Not a bloated media suite.\
Not a consulting-heavy service.\
Not a workflow that assumes you have a production team.

Just a fast, self-serve way to turn one video, audio file, or script into localised voice output in 90+ languages.

The core idea is boring in the best way: Make the first translation easy, then make the next four translations basically free.

That matters for creators, agencies, and content teams that need to ship fast and keep margins sane.

We’ll keep improving quality, timing, and export workflow.\
But the north star stays the same: help one recording do the work of many.

Scrapefast: Smallest and fastest FREE web scraping API

shrey vijayvargiya — Mon, 11 May 2026 14:26:15 +0000

Hello folks!!

https://github.com/shreyvijayvargiya/scrapefast/

I’ve built the smallest and fastest web scraping free open-source Node. js-based endpoint.

Handles concurrent multiple URL scraping
Manage memory allocation, cache cleaning
API endpoints for scraping, screenshot for a single URL and multiple URL Most of the AI LLMs need internet access and web scraping for reading content from a website/URL, and a web scraping endpoint will help in the same way

Wrote a detailed blog about it, read blog: https://ihatereading.in/t/One-honojs-file-for-entire-web-scraping-API

Feel free to contribute
Cheers
Shrey

Build any SAAS website in just 299Rs/$49

shrey vijayvargiya — Thu, 30 Apr 2026 16:16:12 +0000

Hello folks!!

I am glad to announce that buildsaas.dev now supports INR pricing and UPI

Why Buildsaas?

Most of the vibe coders and indie hackers build SaaS products, add payments, authentication, and databases, and finally launch in months, only to realise that the idea is not working.

Instead, save some time by using boilerplate or an already existing code repository or template.

But we often get confused about which template to use, and most of the templates are too costly stating from $99.

Buildsaas solves this problem. We have already used buildsaas for existing products in the market, such as ihatereading.in, gettemplate. website, inkgest.com, kixi.app and more

All of our existing products or new upcoming ones are and will be built using buildsaas

It's a starter kit that has payments, authentication, an admin dashboard to write blogs, manage users, visitors, customers, create invoices and record payments and a lot more. In fact, everything can be done on one admin dashboard, and this all-in-one starter kit is for just 299Rs (Offer is valid only for the next 10 users)

Buildsaas will save 150+ development or vibe-coding hours, almost $100 in total for those AI coding tools and building such applications will cost around $1k and more

Get the Buildsaas

Do check the demo: https://demo-app.buildsaas.dev/

Visit the admin panel you will get once you buy the buildsaas: https://demo-app.buildsaas.dev/admin

Purchase link: https://checkout.dodopayments.com/buy/pdt_0NV5cXHH4abz83r7XX5dv?session=sess_NrwOKiVN6y

Buy in USD: https://shreyvijayvargiya.gumroad.com/l/build-saas-starter-boilerplate?layout=profile

Once the payment is made, you get all types of zip files of the starter kit as explained below

Nextjs, Firebase, Stripe
Nextjs, Firebase, Polar
Nextjs Supabase, Stripe
Nextjs Supabase Polar
Blog starter kit template
Newsletter starterkit template

Cheers
DM for anything you need
Shrey

Buildsaas.dev