DEV Community: Sourav

Shipping a Framer template + 3 booking widgets in a weekend — launch-day postmortem

Sourav — Tue, 14 Apr 2026 17:11:43 +0000

Most clinic websites cost $2k+ and convert like a Canva kit. I got tired of looking at them, so I built the opposite — a Framer template plus three drop-in booking widgets built specifically for aesthetic / derm clinics, shipped as a single ZIP. This is the honest launch-day postmortem.

The product

Noir Clinic Conversion Pack — a 10-section Framer template (dark-luxe, Fraunces + Inter) plus three booking widgets shipped as both vanilla JS and Framer TSX:

Pricing Estimator — real-time price calc, service + area + tier, because "contact us for pricing" is a conversion killer.
Before/After Slider — touch-draggable comparison, replaces static portfolio grids.
Sticky WhatsApp Booking Bar — region-aware, falls back to phone on desktop.

All three widgets are plain-text config. No node_modules, no build step for the JS versions. The Framer bundle is the main event; the vanilla widgets work anywhere you can paste three files.

Stack

Site: static HTML + vanilla CSS on Netlify (noir-style.netlify.app). No React on the landing page — I wanted < 100kb total and FCP under 800ms.
Checkout: Payhip (5% fee, clean product page, supports coupons). Core $59, Pro $169.
Widgets: two versions each — vanilla JS (~4kb) and Framer TSX with property controls.
SEO infra: sitemap.xml, robots.txt, canonical tags, og:image, twitter:card, Product JSON-LD (Core + Pro variants), meta description, GA4 snippet. All verified 200 before launch.

What went right

SEO v2 before traffic. I treated the site like it had to survive indexing before I touched any social channel. Submitted sitemap to Google Search Console, archived homepage + sitemap + robots in the Wayback Machine as a trust signal, verified every secondary page (privacy, terms, refund, thank-you, demo) returned 200. All eight gates green before the first tweet.

Plain-text config over admin UIs. Every configurable thing in the product is a const config = { ... } block with inline comments. No dashboard. No database. No login. Customers can install the whole pack without ever opening Framer if they don't want to. First install time in testing: 12 minutes.

Self-serve pricing that doesn't hide the number. The #1 friction I've seen on clinic sites is "contact us for a quote." The estimator widget quotes instantly. This is a conversion decision, not a design decision.

What I'd do differently

Gumroad mirror should have been day 0, not day 2. Payhip-only launch means I'm dependent on one checkout path. Mirroring to Gumroad at a slightly higher list price ($79 vs $59 direct) protects the direct channel and gives discovery through Gumroad's organic search — should've been ready before the first tweet.

One distribution channel at a time. I had five channels queued (X, Reddit, IndieHackers, Instagram, Dev.to). I posted X first, then immediately started thinking about the next channel instead of watching what the first post actually produced. You learn more from 24h of data on one channel than from scatter-posting five variants simultaneously.

The first tweet needed a thread, not a single tweet. A product link without a thread of substance gets treated as an ad by the algorithm. A thread with actual content ("here's what I learned about clinic-site conversion," then the product) performs 3-5x better. Lesson for next launch.

The numbers I'm watching

Sessions → order conversion rate (target: ≥ 2% to validate price)
Pro vs Core mix (tells me whether agencies or solo clinics bought)
Refund rate (target: < 5%; anything higher means the page overpromised)
Traffic source attribution via UTMs on every link

Decision rule at 10 sales: if ≥ 5 came in the first 7 days, scale (Gumroad, marketplaces, Estate Pack). If 3-4, iterate on page variants. If 0-2, diagnose — sessions low means fix traffic, sessions high means fix the page.

If you're shipping a niche SaaS-style template

Pick a vertical where the current websites are objectively bad (aesthetic clinics, dental, boutique fitness — massive opportunity).
Ship the SEO/indexing surfaces before the social push. Once Google starts crawling, you want every meta tag and structured-data block correct.
Write the product description like someone's about to buy it in 30 seconds — above-the-fold specificity, not adjectives.
Config-driven > dashboard-driven for small creators. You do not want to maintain an admin panel for a $59 product.

Live demo + buy page: noir-style.netlify.app

Happy to answer anything in the comments — especially on the widget architecture, the Framer TSX property-controls setup, or the SEO pre-launch checklist.

I Built 126+ Free Browser Tools That Actually Respect Your Privacy

Sourav — Thu, 12 Mar 2026 18:29:04 +0000

Every time I needed a simple online tool, the experience was the same. Sign up. Watch ads. Wonder if my data was being sold. So I built beginthings.com.

It now has 126+ free browser-based tools. JSON formatters, image converters, SEO auditors, color pickers, QR generators, calculators, and much more. Everything runs locally in your browser. No server processing, no data collection, no accounts.

Why I Built This

Simple tools should be simple. Need to resize an image? You should not need to create an account. Need to format JSON? You should not have to watch a 30-second ad first. I started building one tool at a time and it grew into a full collection.

What Makes It Different

Every tool on beginthings.com runs entirely in your browser. Your files and data never leave your device. There is no backend server processing your uploads, no tracking cookies, no analytics following you around, and no account walls. Just open the site, use what you need, and close the tab.

What You Will Find

The collection covers developer tools like JSON formatters, Base64 encoders, regex testers, and JWT decoders. Design tools including color pickers, gradient generators, image compressors, and SVG optimizers. SEO tools like meta tag generators, schema markup validators, and on-page audit checkers. Everyday utilities like QR code generators, unit converters, password generators, and calculators. New tools are added regularly.

Try It Out

If you are tired of ad-heavy tool sites that harvest your data, give beginthings.com a look. Bookmark it, share it with your team, or just keep it handy for the next time you need a quick tool without the hassle.

I built this for people who value their privacy and their time, and I hope you find it useful.

Would love to hear what tools you use the most or what you would like to see added next.

I built 90+ free browser tools at beginthings.com -- here is the tech behind it

Sourav — Sat, 07 Mar 2026 18:39:02 +0000

I have been building beginthings.com, a collection of 90+ free browser-based tools. Everything runs client-side with no server processing needed for most tools. Here is a quick overview of what is available and some of the technical thinking behind it.

What is beginthings.com?

A free, no-signup, no-ads collection of browser tools. Think of it as your utility belt for common tasks that developers, designers, and content creators run into daily.

Some of the tools available

For Developers:

JSON formatter and validator
Base64 encoder/decoder
Password generator
QR code generator
Lorem ipsum generator

For Designers:

Color palette generator
Gradient creator
Image compressor
Image format converter

For Content Creators:

Word counter
Character counter
Text case converter

General Utilities:

Unit converters
Calculator tools
File converters

Why client-side?

Privacy and speed. Your files never leave your browser. An image you compress on beginthings.com is processed entirely on your device using JavaScript. No upload, no server, no waiting.

This was a deliberate design choice. Most "free tool" websites upload your files to their servers for processing. That is slower, less private, and honestly unnecessary for most of these operations. Modern browsers are powerful enough to handle image compression, format conversion, encoding, and text processing without any server involvement.

The tech stack

The tools are built with vanilla JavaScript where possible, keeping things lightweight. For heavier operations like image processing, I use the Canvas API and Web Workers to keep the UI responsive. Everything is designed to load fast and work instIa nhtalvye.
b
e#e#n Wbhuaitl diisn gn ebxetg?i
n
tIh ianmg sa.cctoimv,e lay caodldliencgt inoenw otfo o9l0s+ afnrde ei mbprroowvsienrg- beaxsiesdt itnogo losn.e sE.v eIrfy tthhienrge riusn sa ctloioeln ty-osui dwei swhi tehx insot esde ravse ra pfrroecee sbsrionwgs enre eudteidl iftoyr, mIo swto utlodo llso.v eH etroe hiesa ra aqbuoiuctk iotv.e
r
vCiheewc ko fi tw hoautt iast a[vbaeiglianbtlhei nagnsd. csoomm]e( hotft ptsh:e/ /tbeecghinnitchailn gtsh.icnokmi)n ga nbde hlientd miet .k
n
o#w# wWhhaatt yiosu btehgiinnkt.hings.com?

A free, no-signup, no-ads collection of browser tools. Think of it as your utility belt for common tasks that developers, designers, and content creators run into daily.

Some of the tools available

For Developers:

JSON formatter and validator
Base64 encoder/decoder
Password generator
QR code generator
Lorem ipsum generator

For Designers:

Color palette generator
Gradient creator
Image compressor
Image format converter

For Content Creators:

Word counter
Character counter
Text case converter

General Utilities:

Unit converters
Calculator tools
File converters

Why client-side?

Privacy and speed. Your files never leave your browser. An image you compress on beginthings.com is processed entirely on your device using JavaScript. No upload, no server, no waiting.

The tech stack

What is next?

I am actively adding new tools and improving existing ones. If there is a tool you wish existed as a free browser utility, I would love to hear about it.

Check it out at beginthings.com and let me know what you think.

I Built a Free Resume Builder That Works 100% in Your Browser — Here's How

Sourav — Fri, 06 Mar 2026 19:36:34 +0000

Most resume builders online want your email, your data, and your money. I wanted something different — a resume builder that runs entirely in your browser with zero data collection. So I built one.

Try it here: BeginThings Resume Builder

The Problem with Most Resume Builders

If you've ever tried to create a resume online, you know the drill:

Sign up with your email
Fill in your details on their server
Hit "Download" and... paywall
Your personal data is now stored on someone else's server forever

This frustrated me as a developer. A resume is one of the most personal documents you'll ever create — it has your name, phone number, email, work history, education. Why should any of that need to leave your browser?

The Solution: 100% Client-Side

I built a resume builder that processes everything locally in your browser using pure HTML, CSS, and JavaScript. Here's what makes it different:

No sign-up required — just open and start building
No data leaves your browser — everything stays on your machine
Free PDF export — powered by html2pdf.js, no server needed
Multiple templates — professional designs that actually look good
Dark mode UI — because we're developers and we deserve nice things

How It Works Under the Hood

The entire tool is a single self-contained HTML file. No frameworks, no build tools, no backend.

Template Rendering

Each resume template is a JavaScript function that takes your form data and returns styled HTML. When you switch templates, it re-renders instantly:

function renderTemplate(data, templateId) {
  const templates = {
    modern: renderModern,
    classic: renderClassic,
    minimal: renderMinimal
  };
  return templates[templateId](data);
}

PDF Generation

For PDF export, I use html2pdf.js which wraps html2canvas and jsPDF. It captures the rendered HTML resume as a canvas and converts it to a clean PDF:

function exportPDF() {
  const element = document.getElementById('resume-preview');
  const opt = {
    margin: 0,
    filename: 'resume.pdf',
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { scale: 2 },
    jsPDF: { unit: 'mm', format: 'a4' }
  };
  html2pdf().set(opt).from(element).save();
}

Live Preview

As you type in any field, the resume preview updates in real-time. No "Generate" button needed — it's all reactive through input event listeners:

document.querySelectorAll('input, textarea').forEach(el => {
  el.addEventListener('input', () => updatePreview());
});

Why Single-File Architecture?

I chose to build each tool as a single HTML file for several reasons:

Zero dependencies on external servers — works offline once loaded
Easy to host — just drop the file on any static hosting
Fast loading — no API calls, no database queries
Maximum privacy — literally impossible to collect data when there's no backend

This same architecture powers all 30+ tools on BeginThings, including an invoice generator, business card maker, QR code generator, and many more.

What I Learned Building This

html2pdf.js is amazing but quirky. Getting pixel-perfect PDF output requires careful CSS. Avoid position: fixed, watch out for page breaks in the middle of sections, and always set a high scale value for crisp text.

Form UX matters more than you think. Adding "Add Experience" and "Add Education" buttons with dynamic sections made the tool actually usable vs. having a fixed number of fields.

Dark mode is not optional anymore. My analytics showed 60%+ of users prefer dark mode. Building with a dark-first approach (light backgrounds only in the resume preview) was the right call.

Try It Out

The resume builder is completely free at beginthings.com/resume-builder. No sign-up, no data collection, no catch.

If you find it useful, I'd love to hear your feedback. And if you're interested in the single-file architecture approach, check out the other tools at beginthings.com — everything from PDF tools to calculators to developer utilities, all built the same way.

What's your take on browser-only tools vs. traditional SaaS? Drop a comment below!

I Built 30+ Free Browser-Based Developer Tools - No Sign-up, No Ads Tracking

Sourav — Fri, 06 Mar 2026 17:09:08 +0000

Hey DEV community! I built BeginThings — a collection of 20+ free, browser-based tools for developers, designers, and freelancers. Everything runs client-side, no data leaves your browser.

Why I Built This

I was tired of tools that require sign-ups, track your data, or hit you with paywalls after 3 uses. So I built single-page HTML tools that work instantly — no backend, no cookies, no BS.

Developer Tools

JSON Formatter & Validator — Format, validate, minify, convert JSON to CSV, tree viewer
Base64 Encoder/Decoder — Encode/decode text, files to Base64, image preview from data URIs
Password Generator — Cryptographic random passwords, passphrases, strength checker, bulk generation
Lorem Ipsum Generator — Classic lorem ipsum, hipster ipsum, dummy data generator, name generator
Color Picker — HEX/RGB/HSL converter, palette generator, contrast checker

Text & Content Tools

Word Counter — Real-time word/character count, reading time, text analyzer, find & replace, case converter
QR Code Generator — URL/text/vCard/WiFi QR codes, custom colors, batch generation, scanner

Image Tools

Image Compressor — Compress, resize, convert images. All processing in-browser via Canvas API

Financial Calculators

Salary Calculator (India) — CTC to take-home breakdown
EMI Calculator
SIP Calculator
Loan Calculator
Unit Converter — 10+ categories, 200+ units
And more at beginthings.com

Tech Stack

Each tool is a single self-contained HTML file — all CSS and JS inline. No frameworks, no build step, no npm. Just vanilla HTML/CSS/JS that works everywhere.

Dark theme (#0a0a0a background, cyan accents)
Mobile responsive
JSON-LD structured data for SEO
Works offline once loaded

Embed on Your Site

Want to embed any tool on your blog or website? Just use an iframe:

<iframe src="https://beginthings.com/json-formatter.html" width="100%" height="800" frameborder="0"></iframe>

Check out the embed page for all available tools and embed codes.

NEW: Recently Added Tools

Resume Builder

Build professional resumes with multiple templates — fill in your details and download as PDF instantly.
Try it →

Invoice Generator

Create professional invoices with auto-calculated taxes, multiple currencies, and instant PDF download.
Try it →

Business Card Maker

Design professional business cards with 8 templates, QR codes, and export to PDF/PNG.
Try it →

Flowchart Maker

Create flowcharts and diagrams with a canvas-based editor — 6 shape types, bezier connections, and export to PNG/SVG.
Try it →

PDF Tools

Merge, split, compress, and convert PDFs — all processing happens in your browser.
Try it →

Markdown Editor

Live preview markdown editor with syntax highlighting and export options.
Try it →

Regex Tester

Test and debug regular expressions with real-time matching, capture groups, and common patterns library.
Try it →

What's Next

We've grown from 20 to 30+ tools and counting! Building more based on community demand.

What tools do you wish existed as simple, free, no-signup browser tools? Drop your ideas in the comments!

Check it out: beginthings.com

I built 96+ free tools for freelancers — no login required, no paywalls, just tools that work

Sourav — Thu, 05 Mar 2026 20:15:18 +0000

Every freelancer I know has the same problem: you need a quick tool — an invoice generator, a QR code maker, a UTM builder — and every option either wants your email, locks features behind a paywall, or drowns you in ads before you can do anything.

I got tired of it. So I built BeginThings.

What it is

BeginThings is a collection of 96+ free tools built specifically for freelancers and solopreneurs. Every tool on the site works immediately — no account, no email, no trial period. Just open it and use it.

The tools (a sample)

Client & Business

Invoice Generator — create professional invoices in seconds, download as PDF
Contract Template Builder — fill-in-the-blank freelance contracts
Rate Calculator — figure out your hourly rate based on income goals

Marketing

UTM Builder — generate clean UTM-tagged URLs for campaigns
Bio Link Builder — create a simple link-in-bio page
QR Code Maker — generate QR codes for any URL

Documents

Resume Formatter — clean, professional resume output
Cover Letter Generator — structured templates for job applications
PDF Merge & Split tools

Dev & Web

Base64 Encoder/Decoder
JSON Formatter
Color Palette Generator
Meta Tag Previewer

...and 80+ more.

Why no login?

I made a deliberate decision: zero friction.

When you need a QR code at 11pm before a client call tomorrow morning, the last thing you want is a sign-up flow. You want the tool to just work.

No account also means no data stored on my servers about your invoices, your clients, or your contracts. Everything runs in your browser.

What I learned building this

Scope creep is real — I started with 10 tools and "just one more" turned into 96.
SEO for tools is brutal — there's so much competition from huge sites. Organic discovery takes time.
People really do want free tools — the feedback has been overwhelmingly positive. Devs, designers, writers, consultants all use it.
The hardest tool to build was the invoice generator — getting PDF output to look professional across browsers was painful.

Try it

👉 beginthings.com — completely free, no sign-up required.

I'd love to hear what tools you use most as a freelancer, or what's missing from the collection. Drop a comment!