DEV Community: Raj Chavan

I built an app that OCRs every screenshot on your phone — here's the architecture

Raj Chavan — Thu, 13 Aug 2026 06:13:46 +0000

We all have that folder of 500+ screenshots we can never find anything in. I got tired of scrolling through mine looking for a receipt from three months ago, so I built Screenshot Vault — an app that reads the text in every screenshot on your phone and lets you search it like Google.

Here's how it's built, and a few decisions that ended up mattering more than I expected.

The stack

Expo (React Native) + Expo Router — file-based routing, EAS for native builds
@react-native-ml-kit/text-recognition — on-device OCR via Google ML Kit
expo-sqlite — local persistence
expo-media-library — reading the device's Screenshots album
Gemini 3.6 Flash — categorization, titles, tags, called through a small Next.js API route
Next.js + Vercel — landing page + the backend proxy

Decision #1: OCR stays fully on-device

My first instinct was to upload screenshots to a server for processing. Then I actually thought about what's in a typical screenshot folder — bank OTPs, payment confirmations, private chats, addresses. Uploading that to a database I control is a liability for me and a real risk for users if anything ever leaks.

Google ML Kit's text recognition runs entirely on-device, for free, with no server round-trip. So OCR happens locally, and the only thing that ever leaves the phone is the already-extracted text — sent to Gemini for a lightweight categorization call, not the image itself. This also happens to be cheaper to run at scale, since I'm not paying for image storage or bandwidth.

Decision #2: Don't block the user on a full scan

If someone installs this with 500 existing screenshots, running OCR + AI on all of them before showing anything would mean a 10-20 minute wait on first launch. That's an instant uninstall.

Instead, processing is staged and resumable:

CREATE TABLE screenshots (
  id TEXT PRIMARY KEY,
  uri TEXT,
  text_content TEXT,
  category TEXT,
  ai_title TEXT,
  tags TEXT,
  ocr_done INTEGER DEFAULT 0,
  ai_done INTEGER DEFAULT 0,
  created_at INTEGER
);

On open:

Show whatever's already in SQLite — instant, zero wait
Insert bare rows for any new screenshots found (thumbnail visible immediately)
Background pass: OCR everything with ocr_done = 0, newest-first
Background pass: AI-classify everything with ocr_done = 1 AND ai_done = 0, newest-first

If the app gets closed mid-scan, it just picks up from wherever the flags left off next time — no reprocessing, no lost work. This is basically the same idea Google Photos uses for its "preparing your library" background indexing.

Decision #3:_ Never put the AI API key in the client_

Early version called Gemini directly from the app with the key in an env var. Realized pretty quickly that anyone who installs the APK can extract that key and rack up usage on my bill — env vars prefixed EXPO_PUBLIC_ get bundled straight into the client, no exceptions.

Moved it behind a single Next.js API route on the same Vercel project as the landing page:

export async function POST(req: NextRequest) {
  const { text } = await req.json();
  const apiKey = process.env.GEMINI_API_KEY; // server-only, never shipped to client

  const res = await fetch(GEMINI_ENDPOINT, {
    method: 'POST',
    headers: { 'x-goog-api-key': apiKey },
    body: JSON.stringify({ /* prompt asking for category + title + tags in one call */ }),
  });
  // ...parse and return
}

One call returns category + title + tags together instead of three separate requests — matters a lot on Gemini's free tier, which caps out fast.

Still early and Android-only right now, testing with a small group before a wider release. If you want to follow along or try it when it's ready: screenshot-vault-lac.vercel.app

Curious if anyone's tackled similar on-device vs. cloud tradeoffs for AI features — happy to talk through any of this in the comments.

I Open-Sourced the SDK Behind My SaaS — Here's Why

Raj Chavan — Tue, 21 Jul 2026 06:40:42 +0000

I've been building TourKit for the past 3 months — a product tour SDK for SaaS products.

One script tag. Dashboard-controlled tours.
Works on React, Next.js, Vue, HTML, WordPress.

Today I open-sourced the SDK under an MIT license.

Here's why and what's inside.

The problem with closed-source SDKs

When you install a third-party script on your website, you're trusting that it:

Doesn't track your users beyond what it says
Doesn't inject anything malicious
Does exactly what it claims to do

With a closed-source SDK, you have to take the company's word for it.

That's a hard sell for security-conscious developers — especially when the script runs on every page of their product.

So I open-sourced it

The TourKit SDK is now public and MIT-licensed.

github.com/webdev-raj/Tourkit-sdk

You can read every line of code that runs on your users' websites. Audit it. Fork it. Self-host it if you want.

What's inside the SDK

The SDK is vanilla JavaScript with zero dependencies. Here's what it does:

index.js — Config fetcher

// Reads data-key from script tag
// Fetches tour config from TourKit API
// Calls startTour() with steps + config
window.TourKit = {
  startFor: function(path) { ... },
  destroy: function() { ... },
  reset: function(path) { ... },
  resetAll: function() { ... }
}

renderer.js — Tooltip engine

Creates spotlight overlay
Positions tooltip (top/bottom/left/right)
Handles step transitions
Mobile bottom sheet under 768px
Tracks analytics events

session-key.js — Seen flag management

// Per-path localStorage keys
// tourkit_seen_KEY_dashboard
// tourkit_seen_KEY_projects
// Each page independent

The mobile bottom sheet

This is the part I'm most proud of.

Every other tour SDK breaks on mobile.
Intercom literally doesn't support mobile product tours — their docs say so.

TourKit automatically switches to bottom sheet mode on screens under 768px:

Desktop (768px+):
Tooltip floats beside highlighted element

Mobile (under 768px):
Element highlighted at top of screen
Tooltip slides up from the bottom
Feels completely native

Zero config. SDK detects screen size and switches automatically.

URL-based tour triggers

Each step can target a specific page:

{
  "title": "Your projects",
  "message": "Manage all your projects here",
  "selector": "[data-tourkit='projects-list']",
  "position": "bottom",
  "url_pattern": "/dashboard/projects"
}

Pattern matching supports:

Exact: /dashboard
Dynamic: /dashboard/projects/[id]
Wildcard: /dashboard/*
All pages: null

The SDK checks window.location.pathnameon every route change and starts the tour from the matching step automatically.

The AI workflow (the real differentiator)

This is what makes TourKit different from every other tour tool:

Step 1 — Copy the AI prompt
From your TourKit dashboard, copy the agent prompt with one click.

Step 2 — Paste into Cursor
Your AI agent:

Reads your entire codebase
Identifies key UI elements
Adds data-tourkit attributes
Detects your routes automatically
Generates tour.json with correct url_patterns for each page

Step 3 — Drag and drop
Drop tour.json into the TourKit dashboard. All steps import instantly.

Step 4 — Add script tag once

<script
  src="https://cdn.jsdelivr.net/gh/webdev-raj/Tourkit-sdk@v1.0.0/dist/tourkit.min.js"
  data-key="YOUR_KEY"
  data-api="https://tourkit-phi.vercel.app"
  async>
</script>

Live tour in under 2 minutes.
No manual CSS selectors.
No guessing which elements to highlight.

The open core model

Dashboard stays private.
SDK is open source.

Same model as:

Plausible Analytics
Cal.com
Supabase
Fathom

The SDK is the delivery mechanism.
The dashboard is where the value lives — step editor, analytics, AI generator, prebuilt templates, team management.

Current honest status

✅ SDK open source + MIT licensed
✅ Working on React, Next.js, Vue, HTML
✅ Mobile bottom sheet tours
✅ AI tour generator
✅ JSON drag and drop import
✅ Analytics dashboard
❌ 0 paying customers
❌ npm package (coming soon)

Try it

Dashboard (free plan available):
tourkit-phi.vercel.app

Open source SDK:
github.com/webdev-raj/Tourkit-sdk

Docs:
tourkit-phi.vercel.app/docs

If you're building a SaaS and need user onboarding — I'd genuinely love for you to try it and tell me what's broken or missing.

And if you find the SDK useful — a GitHub star genuinely helps with
discovery 🙏

Building in public. 3 months in. 0 paying customers. Shipping every week.

Stop losing users in the first 5 minutes — onboarding problem for indie SaaS

Raj Chavan — Sat, 04 Jul 2026 15:06:33 +0000

Every SaaS Product has the same silent killer.

User signs up. Lands on your dashboard.
Looks around. Gets confused. Leaves.

You never hear from them again.
No error. No complaint. Just gone.

The brutal math:

If 100 people sign up and 70 leave in the first session without understanding your product, you're not growing; you're filling a leaky bucket.

Better onboarding doesn't just improve retention. It makes everything else work better too.

Better onboarding → more activated users
More activated users → more upgrades
More upgrades → more word of mouth
More word of mouth → more signups

It compounds.

The problem with existing solutions:

Intercom Product Tours — $300+/month minimum. Not a conversation for anyone bootstrapping.

Intro.js / Shepherd.js — free but you write hundreds of lines of JavaScript config. Update one CSS class, and it silently breaks in production. Zero error messages.

There was nothing in between for indie hackers.

What TourKit does:

Paste one script tag on your website. Configure tour steps from a dashboard.
Visitors get a guided walkthrough automatically.

No code. No framework lock-in. No complex setup.

What you get:
→ New users understand your product faster
→ Less support questions about basic features
→ Higher activation rate in first session
→ Analytics showing exactly where users drop off
→ Tours that work on mobile with bottom sheet UI
→ Context-aware tours — different steps per page

What it costs:
→ Free tier to start
→ $9/month for growing products
→ $19/month for unlimited everything + AI generator

vs Intercom at $300+/month.

The outcome in plain terms:

Your users stop leaving confused. They start understanding your product.
They stick around long enough to see the value.

That's the whole point.

If you're building a SaaS and onboarding is currently "signup → blank dashboard → hope they figure it out" — that's fixable.

try here tourkit

Curious — what does your current onboarding look like? Email sequence, video walkthrough, in-app tour, or nothing at all?

Why I built an onboarding tool instead of using Intercom (and what it cost me)

Raj Chavan — Tue, 30 Jun 2026 13:27:40 +0000

I spent three months building TourKit. Here's the honest story of
why, and what it actually cost me to build it solo.

The problem I kept hitting

Every side project I built had the same issue. Users would sign up, land on the dashboard, look around confused, and leave.

No onboarding. No guidance. Just a blank page and hope they figure it out.

I knew the fix existed — product tours. The little tooltips that walk you through a new app. I'd used them on Notion, Linear, Vercel. They work.

So I went looking for a tool to add one to my own project.

What I found

Intercom Product Tours — the industry standard. Opened their pricing page. $300+/month minimum to get product tours. For a side project making $0, that's not a discussion; that's a no.

Appcues — similar story. $300-500/month. Enterprise pricing for an enterprise problem I didn't have.

Intro.js — free and open source. This seemed promising until I actually tried to use it. You write JavaScript config for every single step. No dashboard. No analytics. Update a CSS class and
your tour silently breaks in production.

Shepherd.js — same category as Intro.js. More flexible, still requires real code, still no dashboard or analytics.

I needed something between "$300/month enterprise tool" and "write 200 lines of JS yourself."

It didn't exist. So I decided to build it.

What I actually built

TourKit — paste one script tag on your website, configure tour steps from a dashboard, your visitors get a guided walkthrough.

The core idea: give indie hackers and small teams the dashboard experience of Intercom without the enterprise price tag.

<script
  src="https://cdn.jsdelivr.net/gh/webdev-raj/Tourkit@sdk-v14/sdk/dist/tourkit.min.js"
  data-key="YOUR_KEY"
  data-api="https://tourkit-phi.vercel.app"
  async>
</script>

That's the entire installation. Everything else happens in the dashboard.

What it cost me to build

Time: Roughly 3 months of evenings and weekends, solo, using Cursor heavily for the actual coding.

Money: Almost nothing. The whole stack runs on free tiers:

Vercel (hosting) — free
Supabase (database, auth) — free tier
jsDelivr (CDN for the SDK) — free
Lemon Squeezy (payments) — free + 5% fee

Total monthly infrastructure cost right now: $0.

Mistakes: A lot. I spent way too long polishing animations before I even had basic payments working. I built features nobody asked for because building felt more productive than the scarier task of actually trying to get customers.

The hardest technical problem

Context-aware tours on dynamic URLs. If your app has routes like /products/[id], a naive URL matcher either matches every product page with the same tour (annoying, repeats forever) or matches nothing at all.

I ended up building pattern-based matching:

/products/[id] matches /products/123
/products/[id] matches /products/456

Both share the same "seen" flag, based on the pattern, not the actual URL. So the tour shows once across all product pages, not once per product.

This took multiple rebuilds to get right, including finding the bug by literally adding TourKit to my own TourKit dashboard and using it myself.

What I learned

Dogfooding finds bugs nothing else does. I added TourKit's own tours to TourKit's own dashboard and found three critical matching bugs in 24 hours that months of manual testing missed.

Free tier infrastructure goes a long way. This entire SaaS, including a vanilla JS SDK, dashboard, analytics, and payments, costs $0/month to run at small scale.

Building is the easy part. I can ship features fast. Getting someone to actually pay $9/month is the part I'm still figuring out.

Where it's at now

TourKit is live and functional. Free tier, plus paid plans starting at $9/month. Still working on getting the first real paying customers — turns out that's a different skill than writing code.

If you're building a SaaS and onboarding is an afterthought, it shouldn't be. Whether you use TourKit or build your own, that first impression matters more than most features you'll ship.

tourkit

Happy to answer questions about the technical side,
the stack, or just the experience of building solo.

Building a Context-Aware Onboarding System in Next.js

Raj Chavan — Tue, 09 Jun 2026 16:17:35 +0000

When I started building TourKit, I thought onboarding tours would be the easy part.

Create a few tooltips, highlight some elements, and move users from step to step.

Turns out I was completely wrong.

The real challenge wasn't building the UI.

It was deciding when a tour should start.

The Problem with Traditional Tours

Most onboarding systems follow a fixed flow:

Dashboard → Analytics → Settings → Complete

But real users don't behave like that.

Some users land directly on the analytics page.

Others skip half the product and jump straight into settings.

Showing the same onboarding flow to everyone creates friction instead of helping.

My Goal

I wanted onboarding to react to where users actually are.

For example:

User lands on /analytics → show analytics onboarding
User lands on /settings → show settings onboarding
User opens a feature for the first time → explain only that feature

Instead of forcing users through a long tutorial, the onboarding should feel contextual.

The Technical Challenge

The difficult part wasn't rendering tooltips.

It was handling:

Route changes
Delayed component rendering
Missing elements
Dynamic page content

A tour could start before the target element even existed in the DOM.

This caused selectors to fail and onboarding to break.

The Solution

I built a trigger system that waits for specific conditions before launching a tour.

Example triggers:

URL-based
First visit based
Feature interaction-based

This allowed onboarding to adapt naturally to user behavior.

What I Learned

The UI is often the easiest part of onboarding.

The real complexity lives in runtime behavior:

Knowing when to start
Knowing what to show
Avoiding interruption

The best onboarding doesn't force users through a tutorial.

It helps them make progress.

Final Thoughts

Building this feature took far longer than I expected, but it completely changed how I think about onboarding.

Users don't want more steps.

They want momentum.

I'm currently building TourKit, a developer-first onboarding platform focused on lightweight and contextual onboarding experiences.

Try it out - here - Tourkit

Would love to hear how others are approaching onboarding in their products.

Add an onboarding tour to any React/Next.js app in 5 minutes

Raj Chavan — Sun, 07 Jun 2026 15:17:14 +0000

Add an onboarding tour to any React/Next.js app in 5 minutes

Most apps have zero onboarding.

Users land on your dashboard, look around confused, and leave.

The problem? Existing tools like Intercom cost $300+/month. Shepherd.js requires writing hundreds of lines of config. Intro.js feels outdated.

I built TourKit to fix this. One script tag. Configure from a dashboard. Works on any website.

Here's how to add it to your React or Next.js app in 5 minutes.

What you'll build

A guided onboarding tour that:

Highlights specific elements on your page
Shows tooltips with title and message
Tracks completion in analytics
Never repeats for returning users
Works on mobile with bottom sheet UI

Step 1 — Create a free account

Go to tourkit-phi.vercel.app and sign up.

Create a new project:

Project name: My App
Domain: yourapp.com

You'll get a unique script key. Copy it.

Step 2 — Install the script tag

For Next.js (App Router)

Add to your root app/layout.js:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://cdn.jsdelivr.net/gh/webdev-raj/Tourkit@sdk-v13/sdk/dist/tourkit.min.js"
          data-key="YOUR_SCRIPT_KEY"
          data-api="https://tourkit-phi.vercel.app"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

For React (Create React App / Vite)

Add to your public/index.html before </body>:

<script
  src="https://cdn.jsdelivr.net/gh/webdev-raj/Tourkit@sdk-v13/sdk/dist/tourkit.min.js"
  data-key="YOUR_SCRIPT_KEY"
  data-api="https://tourkit-phi.vercel.app"
  async>
</script>

Replace YOUR_SCRIPT_KEY with the key from your TourKit dashboard.

Step 3 — Add TourKitProvider for route changes

React and Next.js use client-side routing. The page URL changes without a full reload.

Without this, TourKit only runs on initial page load and misses route changes.

Next.js (App Router)

Create components/TourKitProvider.jsx:

'use client'
import { useEffect } from 'react'
import { usePathname } from 'next/navigation'

export default function TourKitProvider() {
  const pathname = usePathname()

  useEffect(() => {
    const timer = setTimeout(() => {
      window.TourKit?.startFor(pathname)
    }, 500)
    return () => clearTimeout(timer)
  }, [pathname])

  return null
}

Add to app/layout.js:

import TourKitProvider from '@/components/TourKitProvider'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <TourKitProvider />
        {children}
        <Script ... />
      </body>
    </html>
  )
}

React Router

import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

export default function TourKitProvider() {
  const location = useLocation()

  useEffect(() => {
    const timer = setTimeout(() => {
      window.TourKit?.startFor(location.pathname)
    }, 500)
    return () => clearTimeout(timer)
  }, [location.pathname])

  return null
}

Add inside your <BrowserRouter>:

<BrowserRouter>
  <TourKitProvider />
  <App />
</BrowserRouter>

Step 4 — Configure your tour steps

Go back to your TourKit dashboard.

Open your project → click Edit Tour.

Add your first step:

Title: Welcome to MyApp
Message: This is your main dashboard where you manage everything.
CSS Selector: .dashboard-header
Position: bottom

Add more steps for key features:

Step 1: .dashboard-header → "Welcome to MyApp"
Step 2: .sidebar-nav → "Navigate between sections here"
Step 3: .create-btn → "Click here to create your first item"
Step 4: .settings-link → "Customize your account here"

Finding the right CSS selector:

Open Chrome DevTools (F12) → right click any element → Inspect → copy the selector.

Common selectors:

nav → navigation bar
.sidebar → sidebar
#dashboard → element with id="dashboard"
.btn-primary → primary button
header → page header

Step 5 — Test your tour

Click Live Demo on your project page.

This opens a sandbox with multiple pages to test your tour without touching your real website.

Or load your actual app and the tour will appear automatically for first-time visitors.

To replay during testing, run in browser console:

window.TourKit.resetAll()

Bonus — Context-aware tours

Different pages can have different tours.

In the step editor, set a Trigger URL:

Step 1: no URL → shows on / (homepage)
Step 2: /dashboard → shows on dashboard only
Step 3: /settings → shows on settings only
Step 4: /products/[id] → shows on any product page

Each page gets its own focused tour. Users only see what's relevant to where they are.

Dynamic URL segments are supported:

/products/[id] → matches /products/123
/blog/[category]/[slug]→ matches /blog/tech/my-post
/dashboard/* → matches all dashboard pages

What the tour looks like

On desktop:

Spotlight overlay highlights the element
Tooltip appears next to it
Smooth transitions between steps

On mobile:

Element highlighted at top
Tooltip slides up as a bottom sheet
Large tap targets for buttons

The TourKit API

After installation, these methods are available globally:

// Start tour for current page
window.TourKit.start()

// Start tour for specific page
window.TourKit.startFor('/dashboard')

// Destroy active tour
window.TourKit.destroy()

// Reset seen flag for current page
window.TourKit.reset()

// Reset all seen flags
window.TourKit.resetAll()

Analytics

TourKit automatically tracks:

Tour started
Each step viewed
Tour completed
Tour skipped

View analytics per project in your dashboard.
See completion rates and step dropoff.

Pricing

Free — 1 project, 500 sessions/month
Starter — $9/mo, 3 projects, 2000 sessions
Pro — $19/mo, unlimited + AI tour generator

Start free at tourkit-phi.vercel.app

Summary

In 5 minutes, you can have a fully working onboarding tour on your React or Next.js app:

✅ Create project → get script key
✅ Add script tag to layout
✅ Add TourKitProvider for route changes
✅ Configure steps from the dashboard
✅ Test on live demo page

No framework lock-in. No complex config. One script tag.

If you try it, let me know how it goes.

Happy to help with CSS selectors or any setup questions in the comments.

Live Here - Tourkit