DEV Community: shrey vijayvargiya

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

Free Open-Source Documentation Creator Tool

shrey vijayvargiya — Wed, 29 Apr 2026 16:22:10 +0000

Hey folks!!

Welcome to the new blog

I was building a product, buildsaas.dev and writing documentation for it. I tried to find alternatives on the internet, find Fumadocs, Docusaurus and Mintlify.

But they have a loophole, each of them not serving the way I want it. I am required to create a simple Nextjs React repository that helps me to create documentation for any SAAS product in future.

This repository should also help with the following features, as defined

Easy to download, install the repository, and packages
Markdown support and static content rendering for SEO
AI chatbot and language support integration
Dark/light theme
Latest tech stack
Works well with AI code editors
One-click deploy on Github
Responsive webpage with an editor that renders all UI types of components

Most of the tools I've found are either not free or do not provide a code repository

That is why I created this documentation creator website; it's free and open-source.

All instructions on installations are in the repository; no third-party APIs are needed, only frontend packages

How to use

Clone the repository
Edit the markdown content .md files or add new ones
Edit the sidebar if adding a new route, page, or content
Push to Github
Deploy to vercel

It's literally that simple, FREE and easy to customise.

Github: https://github.com/shreyvijayvargiya/docs-template

Demo: https://docs-template-henna.vercel.app/

Cheers
Shrey

20 Stunning Websites for Design Engineers

shrey vijayvargiya — Fri, 24 Apr 2026 11:53:10 +0000

Hey there!!

Welcome to the new blog.

20 good websites for design engineers

🔥 Websites for Landing Page Inspiration

Tigran Z

Tigran Azatyan | Design & Motion

Motion designer working across brand, product, interaction, and advertising—bringing ideas to life through expressive, purposeful movement.

tigranz.com

Skale

Skale - Home

We'll create a websites that fulfills your business goals. High-converting design solutions for SaaS, Startups, Agencies, and Digital Creators

skale.solutions

Supa Power

Supapower Framer Template

Supapower Framer Template. Made for web and mobile app startups.

supa-power.framer.website

Menoa Template

Menoa – Framer Portfolio Template

Menoa is a sleek and modern portfolio template built for freelance designers, creatives, and small agencies. It's clean, fast to set up, and crafted to help you look professional and win better clients.

menoa-template.framer.website

CMD Supply

CMD Supply | Premium Framer Templates

Build and launch beautiful, responsive websites in minutes with our easy-to-use templates. Built for Framer, no code needed.

cmd.supply

Budarina Studio

Budarina Studio - premium design solutions for busy founders.

High-converting solutions for tech and AI companies to build revenue.

budarina.studio

Viral SMA

Viral - Social Media Agency Website Template for Framer

Viral is a premium Framer template built for social media agencies that want to look credible, results-driven, and conversion-focused from day one.

viral-sma.framer.website

Slush

slush.app

Buildkits

SaaS Boilerplates, starter kits, and design systems | Buildkits

Whether you're a start-up trying to validate ideas quickly or an established company looking for scalable solutions, you can find the perfect tools to meet your needs right here!

buildkits.dev

Just Fucking Use Astro

A public service announcement for developers still building websites like it's 2012 or shipping full SPAs for marketing sites. Most sites are content plus a few interactive bits. Just fucking use Astro.

justfuckinguseastro.com

Napkin AI Blog

Napkin AI - The visual AI for business storytelling

Just type, copy-paste or generate your text and Napkin will instantly transform it into insightful visuals. Make your communication more effective with Napkin.

napkin.ai

World Monitor

World Monitor - Real-Time Global Intelligence Dashboard

Real-time global intelligence dashboard with live news, markets, military tracking, infrastructure monitoring, and geopolitical data. OSINT in one view.

worldmonitor.app

Planetono

Planetoño

We tried making this real. NASA said No. So for now, it's just a delicious concept by Tubik.

planetono.space

Context.dev

https://www.context.dev/

Keytomic

Keytomic – Rank on LLMs and Search Engines on Autopilot

Keytomic is an all-in-one AI SEO and content tool that helps brands rank on LLMs and search engines without manual efforts or guesswork.

keytomic.com

Outrank

Outrank - Grow Organic Traffic on Auto-Pilot

Get traffic and outrank competitors with Backlinks & SEO-optimized content while you sleep.

outrank.so

Sixtyfour AI

Sixtyfour | Intelligence Infrastructure on People and Entities

The Enterprise Data Platform to deploy AI agents that unify social, contact, and proprietary data into decision-ready profiles.

sixtyfour.ai

Faces Profile

Faces: Interactive Presentations

Create interactive, explorable decks that truly deliver. Made effortlessly with AI.

faces.app

Creem

Smooth payments for SaaS and Indie Hackers that don't break the bank

creem.io

Henna

Henna - Designer & Photographer Portfolio

A modern minimal portfolio template for designers and photographers, built with clean layouts, smooth micro-interactions, and fully customizable sections to showcase work with clarity and impact.

henna.framer.website

Originally published on iHateReading

One honojs file for entire web scraping API

shrey vijayvargiya — Mon, 13 Apr 2026 17:00:31 +0000

Building scrape endpoints using one honojs file

Tags: Web Scraping, Github Repository, Scraping, Backend, Honojs

Hey there!!

Welcome to the new blog

Web scraping is always in demand and will be in demand. I've checked tonnes of APIs, including FREE and Paid APIs for web scraping.

SERP API, Google API, and ScrapingBee all platforms provide APIs for web scraping, but in today's story, we will be building one of our own web scraping APIs

I'll also provide github repository in the end, which you can use easily to launch your own scraping APIs on vercel, Cloudflare, netlify or, fly.io or even on a Docker container

How does it start?

I was working on inkgest.com, and we need scraping APIs to scrape the website content legitimately. The above provides options that have a few edge cases, each costs a couple of $$ for just 100 requests per month, and that is not a feasible option

Inkgest needs to make tonnes of API requests to scrape or do web scraping, and for that, relying on third-party wasn't a good solution, forcing us to make our own scraping APIs

Why Honojs?

We have a couple of options for simple open-source web scraping APIs as a framework to choose from: FastAPI or NestJS. Anything works well, but I want to choose something fast, small in size and easy to deploy anywhere using Docker, so I prefer honojs with bun, which is a new tech stack but a faster one.

What is Web Scraping?

To newcomers, web scraping is a simple API that simulates a browser, opens a website URL or link, and scrapes the content.

It does more, or can do more, because every scraping algorithm basically uses the Chrome browser, headless or head, except if you are using the LightPanda browser SDK, which does this without using headless Chrome, making it faster than ever before.

Web scraping is nothing more than an API endpoint whose task is to create a browser instance, load the URL or website, scrape the content or read the DOM elements, and finally parse the content in a human-readable format.

Packages for Web Scraping?

A few packages or SDKs that are open-sourced are used in web scraping, as listed below

Puppeteer
Playwright
Cheerio
Crawlee
Lightpanda browser

A lot more options we have, one needs to do a good Google search

How does a Web Scraping API work?

Loads the browser instance
Go to the URL page or web link
Read the DOM elements (Wait for elements/webpage to load)
Parse the DOM elements, read the content

Why Scraping is Hard or Illegal?

Web scraping is not illegal, but websites have the authority to block the scrapers scraping the website, including Reddit, X, Substack or Medium.

Scraping is not allowed for most of the websites; each website has a robots.txt file providing instructions for the web scraper, and each web scraper needs to follow those instructions.

We can't simply scrape every content, every time, from any webpage; we will hit the rate limit, scraper bot detectors, or get IP blocked.

That is why web scraping is not an easy one; it needs an art to do the following

Rotate IP addresses
Modify the user agents in our scraping API for the browser instance
Handling cookies, overlays or modals for the website before scraping

A lot to be done for scraping a website's content and handling those API endpoints on your own won't cost you much, but it will costs the time

Simple Scraping API

Below is the code for a simple web scraping API

/**
 * Minimal Hono API: POST /scrape + POST /screenshot
 * Pattern aligned with ihatereading-api: BrowserPool → puppeteer-core →
 * request interception, stealth-ish evaluateOnNewDocument, JSDOM cleanup, markdown.
 *
 * Env:
 *   BROWSER_POOL_SIZE=2
 *   CHROME_PATH=/path/to/chrome   (local dev; optional if @sparticuz/chromium works)
 */
import { serve } from "@hono/node-server";
import { Hono } from "hono";
import { JSDOM } from "jsdom";
import TurndownService from "turndown";

const POOL_SIZE = Math.max(1, parseInt(process.env.BROWSER_POOL_SIZE || "2", 10) || 2);

const CHROME_ARGS = [
    "--no-sandbox",
    "--disable-setuid-sandbox",
    "--disable-dev-shm-usage",
    "--disable-gpu",
    "--disable-web-security",
    "--no-zygote",
    "--single-process",
];

function isValidHttpUrl(s) {
    try {
        const u = new URL(String(s).trim());
        return u.protocol === "http:" || u.protocol === "https:";
    } catch {
        return false;
    }
}

/** In-memory sliding-window rate limit (same idea as index.js). */
const rateLimitMap = new Map();
function rateLimit(ip, limit, windowMs) {
    const now = Date.now();
    const record = rateLimitMap.get(ip);
    if (!record || now > record.resetTime) {
        rateLimitMap.set(ip, { count: 1, resetTime: now + windowMs });
        return { allowed: true, remaining: limit - 1 };
    }
    if (record.count >= limit) {
        return {
            allowed: false,
            retryAfter: Math.ceil((record.resetTime - now) / 1000),
            remaining: 0,
        };
    }
    record.count++;
    return { allowed: true, remaining: limit - record.count };
}

setInterval(() => {
    const now = Date.now();
    for (const [ip, r] of rateLimitMap.entries()) {
        if (now > r.resetTime) rateLimitMap.delete(ip);
    }
}, 5 * 60 * 1000);

class BrowserPool {
    constructor(size) {
        this._size = size;
        this._pool = [];
        this._queue = [];
        this._ready = false;
        this._loading = false;
    }

    async _launch() {
        const puppeteer = (await import("puppeteer-core")).default;
        const chromium = (await import("@sparticuz/chromium")).default;

        const chromePath = process.env.CHROME_PATH?.trim();
        if (chromePath) {
            return puppeteer.launch({
                headless: true,
                executablePath: chromePath,
                args: CHROME_ARGS,
            });
        }
        try {
            const executablePath = await chromium.executablePath();
            return puppeteer.launch({
                headless: true,
                executablePath,
                args: [...chromium.args, "--disable-web-security"],
                ignoreDefaultArgs: ["--disable-extensions"],
            });
        } catch {
            throw new Error(
                "Could not launch Chrome. Set CHROME_PATH to your Chrome/Chromium binary.",
            );
        }
    }

    async initialise() {
        if (this._ready || this._loading) return;
        this._loading = true;
        const browsers = await Promise.all(
            Array.from({ length: this._size }, () => this._launch()),
        );
        this._pool = browsers.map((browser, index) => ({
            browser,
            busy: false,
            index,
        }));
        this._ready = true;
        this._loading = false;
    }

    _acquire() {
        const free = this._pool.find((e) => !e.busy);
        if (free) {
            free.busy = true;
            return Promise.resolve(free);
        }
        return new Promise((resolve) => this._queue.push(resolve));
    }

    _release(entry) {
        entry.busy = false;
        const next = this._queue.shift();
        if (next) {
            const f = this._pool.find((e) => !e.busy);
            if (f) {
                f.busy = true;
                next(f);
            } else this._queue.unshift(next);
        }
    }

    async withPage(fn) {
        if (!this._ready) await this.initialise();
        const entry = await this._acquire();
        let page;
        try {
            page = await entry.browser.newPage();
            return await fn(page);
        } finally {
            if (page) {
                try {
                    await page.close();
                } catch {}
            }
            this._release(entry);
        }
    }

    get stats() {
        if (!this._pool.length) {
            return { size: 0, busy: 0, free: 0, queued: this._queue.length };
        }
        const busy = this._pool.filter((e) => e.busy).length;
        return {
            size: this._pool.length,
            busy,
            free: this._pool.length - busy,
            queued: this._queue.length,
        };
    }
}

const browserPool = new BrowserPool(POOL_SIZE);

const turndown = new TurndownService({
    headingStyle: "atx",
    codeBlockStyle: "fenced",
});

const NOISE_SELECTORS = [
    "script",
    "style",
    "noscript",
    "header",
    "footer",
    "nav",
    "aside",
    ".ad",
    ".ads",
    "[class*='cookie' i]",
    "[id*='cookie' i]",
].join(", ");

function stripDomNoise(document) {
    document.querySelectorAll(NOISE_SELECTORS).forEach((el) => el.remove());
}

async function setupPage(page, { timeout, viewport }) {
    await page.setViewport(viewport);
    await page.setUserAgent(
        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
    );
    await page.setExtraHTTPHeaders({
        Accept:
            "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
        "Accept-Language": "en-US,en;q=0.9",
    });

    await page.evaluateOnNewDocument(() => {
        Object.defineProperty(navigator, "webdriver", { get: () => undefined });
        Object.defineProperty(navigator, "plugins", { get: () => [1, 2, 3, 4, 5] });
        Object.defineProperty(navigator, "languages", { get: () => ["en-US", "en"] });
    });

    await page.setRequestInterception(true);
    page.on("request", (req) => {
        const type = req.resourceType();
        const url = req.url().toLowerCase();
        if (type === "image" || type === "font" || type === "media") {
            req.abort();
            return;
        }
        if (type === "stylesheet") {
            req.respond({ status: 200, contentType: "text/css", body: "" });
            return;
        }
        if (
            url.includes("cloudflare") ||
            url.includes("challenge") ||
            url.includes("bot-detection")
        ) {
            req.abort();
            return;
        }
        req.continue();
    });

    page.setDefaultNavigationTimeout(timeout);
    page.setDefaultTimeout(timeout);
}

/**
 * Core scrape — simplified from scrapeSingleUrlWithPuppeteer (no Firestore, proxy, Reddit, G2, AI).
 */
async function scrapeUrl(url, options = {}) {
    const {
        waitForSelector = null,
        timeout = 30_000,
        includeSemanticContent = true,
        includeImages = true,
        includeLinks = true,
        extractMetadata = true,
    } = options;

    const viewport = { width: 1366, height: 768, deviceScaleFactor: 1 };

    return browserPool.withPage(async (page) => {
        await setupPage(page, { timeout, viewport });

        await page.goto(url, { waitUntil: "domcontentloaded", timeout });
        if (waitForSelector) {
            try {
                await page.waitForSelector(waitForSelector, { timeout: 10_000 });
            } catch {}
        }

        const scrapedData = includeSemanticContent
            ? await page.evaluate(
                    (opts) => {
                        const data = {
                            url: location.href,
                            title: document.title,
                            content: {},
                            metadata: {},
                            links: [],
                            images: [],
                        };
                        ["h1", "h2", "h3", "h4", "h5", "h6"].forEach((tag) => {
                            data.content[tag] = Array.from(
                                document.querySelectorAll(tag),
                            ).map((h) => h.textContent.trim());
                        });
                        if (opts.extractMetadata) {
                            document.querySelectorAll("meta").forEach((meta) => {
                                const name =
                                    meta.getAttribute("name") || meta.getAttribute("property");
                                const content = meta.getAttribute("content");
                                if (name && content) data.metadata[name] = content;
                            });
                        }
                        if (opts.includeLinks) {
                            const host = location.hostname;
                            const seen = new Set();
                            data.links = Array.from(document.querySelectorAll("a[href]"))
                                .map((a) => ({
                                    text: a.textContent.trim(),
                                    href: a.href,
                                    title: a.getAttribute("title") || "",
                                }))
                                .filter((l) => {
                                    try {
                                        if (new URL(l.href).hostname !== host) return false;
                                    } catch {
                                        return false;
                                    }
                                    if (!l.text && !l.title) return false;
                                    const k = `${l.text}|${l.href}`;
                                    if (seen.has(k)) return false;
                                    seen.add(k);
                                    return true;
                                });
                        }
                        if (opts.includeImages) {
                            data.images = Array.from(document.querySelectorAll("img[src]"))
                                .filter((img) => !img.src.startsWith("data:"))
                                .map((img) => ({
                                    src: img.src,
                                    alt: img.alt || "",
                                }));
                        }
                        return data;
                    },
                    { extractMetadata, includeLinks, includeImages },
                )
            : { url, title: await page.title(), content: {}, metadata: {}, links: [], images: [] };

        const html = await page.content();
        const dom = new JSDOM(html);
        const doc = dom.window.document;
        stripDomNoise(doc);
        const markdown = turndown.turndown(doc.body);

        return {
            success: true,
            data: scrapedData,
            markdown,
        };
    });
}

async function screenshotUrl(url, options = {}) {
    const {
        timeout = 30_000,
        fullPage = true,
        waitForSelector = null,
    } = options;
    const viewport = { width: 1366, height: 768, deviceScaleFactor: 1 };

    return browserPool.withPage(async (page) => {
        await setupPage(page, { timeout, viewport });
        await page.goto(url, { waitUntil: "domcontentloaded", timeout });
        if (waitForSelector) {
            try {
                await page.waitForSelector(waitForSelector, { timeout: 10_000 });
            } catch {}
        }
        const buf = await page.screenshot({
            type: "png",
            fullPage,
            encoding: "binary",
        });
        return Buffer.from(buf).toString("base64");
    });
}

const app = new Hono();

app.get("/", (c) =>
    c.json({
        ok: true,
        hint: "POST /scrape or /screenshot with JSON { url, ... }",
    }),
);

app.post("/scrape", async (c) => {
    const ip =
        c.req.header("x-forwarded-for")?.split(",")[0]?.trim() ||
        c.req.header("x-real-ip") ||
        "unknown";
    const rl = rateLimit(ip, 30, 10 * 60 * 1000);
    if (!rl.allowed) {
        c.header("Retry-After", String(rl.retryAfter));
        return c.json({ error: "rate_limited", retryAfter: rl.retryAfter }, 429);
    }

    let body = {};
    try {
        body = await c.req.json();
    } catch {
        return c.json({ error: "invalid_json" }, 400);
    }

    const { url } = body;
    if (!url || !isValidHttpUrl(url)) {
        return c.json({ error: "valid https url required" }, 400);
    }

    try {
        const result = await scrapeUrl(url, {
            waitForSelector: body.waitForSelector ?? null,
            timeout: Number(body.timeout) || 30_000,
            includeSemanticContent: body.includeSemanticContent !== false,
            includeImages: body.includeImages !== false,
            includeLinks: body.includeLinks !== false,
            extractMetadata: body.extractMetadata !== false,
        });
        return c.json({
            ...result,
            url,
            timestamp: new Date().toISOString(),
            poolStats: browserPool.stats,
        });
    } catch (e) {
        console.error(e);
        return c.json(
            { success: false, error: e?.message || "scrape_failed", url },
            500,
        );
    }
});

app.post("/screenshot", async (c) => {
    const ip =
        c.req.header("x-forwarded-for")?.split(",")[0]?.trim() ||
        c.req.header("x-real-ip") ||
        "unknown";
    const rl = rateLimit(ip, 20, 10 * 60 * 1000);
    if (!rl.allowed) {
        c.header("Retry-After", String(rl.retryAfter));
        return c.json({ error: "rate_limited" }, 429);
    }

    let body = {};
    try {
        body = await c.req.json();
    } catch {
        return c.json({ error: "invalid_json" }, 400);
    }

    const { url } = body;
    if (!url || !isValidHttpUrl(url)) {
        return c.json({ error: "valid https url required" }, 400);
    }

    try {
        const b64 = await screenshotUrl(url, {
            timeout: Number(body.timeout) || 30_000,
            fullPage: body.fullPage !== false,
            waitForSelector: body.waitForSelector ?? null,
        });
        return c.json({
            success: true,
            url,
            image_base64: b64,
            mime: "image/png",
            timestamp: new Date().toISOString(),
            poolStats: browserPool.stats,
        });
    } catch (e) {
        console.error(e);
        return c.json({ success: false, error: e?.message || "screenshot_failed" }, 500);
    }
});

const port = Number(process.env.PORT) || 3000;
console.log(`Listening on http://localhost:${port}`);
serve({ fetch: app.fetch, port });

A few things to note down

We are using a small version of Playwright, @sparticuz/chromium, as it works on Vercel Edge as well
For making API work on Cloudflare, use Playwright or Puppeteer
Turndown npm is used to parse the content into markdown

Now using one simple method as an API, our web scraping API is ready

Deploying in Production

Let's be honest, this API works for personal use cases but not in production for mass users. So our next task is to make it production-ready

Create a pool for the browser instances, which works well for multiple URL web scraping, using BrowserPool
Add rate limiting to the API endpoint
URL validation layer
Caching for already scraped URL content, no need to rerun the API, save costs and time
Lastly, add some noise selectors to avoid while scraping the content, which helps the API to avoid loading unwanted scripts such as Google Analytics or ads
IP rotations and user agent proxies to avoid getting banned while scraping too much

The above points are added to the code, making the API a robust production-grade level scraping API.

Take Screenshot & AI Summary

The same API helps to take a screenshot if the takeScreenshot parameter is passed as true in the API

For a screenshot, we load the webpage and wait for a few seconds, and then use the playwright page.screenshot method to take the screenshot, quite an easy one.

Another thing to mention is aiSummary, using an AI LLM model, we can generate an AI summary for every webpage by passing the scraped content into an AI LLM to generate the summary. This is quite interesting and useful

Check the Github repository

That would be enough for today. If you need anything else, feel free to email me.

Cheers

Shrey

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