DEV Community

Cover image for I Built a Free Productivity Tools Suite in One Day Using v0, Next.js and Vercel
El Mamoune
El Mamoune

Posted on

I Built a Free Productivity Tools Suite in One Day Using v0, Next.js and Vercel

#showdev #productivity #webdev #nextjs

The Idea: Micro-Tools with Compound SEO

The strategy is simple. Instead of building one big product, build multiple tiny single-feature tools, each targeting a high-volume keyword, all living on the same domain.

Each tool ranks for its own keywords. Every tool you add strengthens the domain. The traffic compounds over time.

Search volumes that make this worth pursuing:

  • "word counter" → 1,000,000+ searches/month
  • "character counter" → 500,000+ searches/month
  • "lorem ipsum generator" → 200,000+ searches/month
  • "readability checker" → 90,000+ searches/month
  • "social media character counter" → 60,000+ searches/month

That's nearly 2 million potential monthly searches across 5 simple tools.

The Stack

  • v0 by Vercel — AI-powered UI generation
  • Next.js App Router — single project, all tools as routes
  • Tailwind CSS — layout and spacing
  • Vercel — deployment and hosting (free tier)
  • Porkbun — custom domain (~$10/year)
  • Google Search Console — indexing
  • Google Analytics 4 — tracking

Total cost: ~$10/year for the domain. Everything else is free.

Step 1 — Design System First

Before touching any code, I defined a strict design system to keep all 5 tools visually consistent:

Background:  #F8F7F4  (warm off-white — feels like a writing tool)
Surface:     #FFFFFF
Text:        #1A1A1A
Accent:      #E84B2A  (warm red-orange — one pop color only)
Border:      1px solid #EEEEEE

Fonts:
  Playfair Display  → titles
  IBM Plex Mono     → numbers and code output
  DM Sans           → UI labels and body
Enter fullscreen mode Exit fullscreen mode

This alone makes the product feel premium. Most free tools look like they were built in 2009 — consistent typography and a warm background color immediately set you apart.

Step 2 — Build with v0

I used v0 by Vercel to generate each tool. The key is writing a detailed prompt that includes the full design system, layout specs, logic, and SEO requirements in one shot.

Here is the structure I used for every prompt:

1. Design system (colors, fonts, spacing)
2. Layout description (two-column, percentages)
3. Core feature (exactly what it does)
4. All calculations in a useMemo hook
5. SEO meta tags for index.html
6. Static SEO content section below the tool
Enter fullscreen mode Exit fullscreen mode

The most important part of any v0 prompt:

Be specific about what NOT to do.

I added lines like:

  • "No heavy shadows"
  • "No dark theme"
  • "No purple gradients"
  • "Textarea must feel like Notion, not a form input"

This prevents v0 from defaulting to generic AI aesthetics.

Step 3 — Single Project, All Tools

The biggest mistake to avoid: building each tool as a separate project.

If you deploy 5 separate Vercel projects and point them to the same domain with different paths, navigation between tools requires a full page reload. It feels slow and broken.

The correct approach is one Next.js project with App Router:

app/
  layout.tsx              ← shared header + nav for ALL tools
  page.tsx                ← Word Counter (home route)
  case-converter/
    page.tsx
  lorem-ipsum/
    page.tsx
  readability/
    page.tsx
  social-counter/
    page.tsx
Enter fullscreen mode Exit fullscreen mode

This gives you:

  • Instant client-side navigation between tools
  • Shared JS bundle (loads once, tools feel instant)
  • One deployment, one domain, compound SEO

Step 4 — SEO Setup (The Right Way)

This is where most developers skip important steps. Here is what I implemented:

Per-page metadata with template 

// app/layout.tsx
export const metadata: Metadata = {
  title: {
    default: 'etudai — Free Text & Writing Tools Online',
    template: '%s — etudai'  // Each page gets: "Word Counter — etudai"
  },
}

// app/page.tsx (Word Counter)
export const metadata: Metadata = {
  title: 'Word Counter — Count Words & Characters Free Online',
  description: 'Free online word counter. Instantly count words, characters, sentences, paragraphs, reading time and speaking time. No sign-up.',
  alternates: {
    canonical: 'https://www.etudai.com',
  },
}
Enter fullscreen mode Exit fullscreen mode

FAQ Schema (JSON-LD) on every page

This is the most underused SEO technique for tool sites. FAQ schema generates rich results in Google — those expandable Q&A boxes that take double the space in search results.

const faqSchema = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  mainEntity: [
    {
      '@type': 'Question',
      name: 'Does this tool save my text?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'No. Everything runs in your browser. Your text is never sent to any server.'
      }
    },
    // Add 3-4 questions per tool
  ]
}
Enter fullscreen mode Exit fullscreen mode

robots.txt 

User-agent: *
Allow: /
Sitemap: https://www.etudai.com/sitemap.xml
Enter fullscreen mode Exit fullscreen mode

Dynamic sitemap 

// app/sitemap.ts
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    { url: 'https://www.etudai.com', priority: 1.0 },
    { url: 'https://www.etudai.com/case-converter', priority: 0.9 },
    { url: 'https://www.etudai.com/lorem-ipsum', priority: 0.9 },
    { url: 'https://www.etudai.com/readability', priority: 0.9 },
    { url: 'https://www.etudai.com/social-counter', priority: 0.9 },
  ]
}
Enter fullscreen mode Exit fullscreen mode

SEO content section on every tool page

Below each tool, I added a static content section with:

  • H2: "How to use [Tool Name]"
  • H2: "Why [feature] matters"
  • H2: "FAQ" with 3-4 questions

This content is what Google actually reads and ranks. The tool itself is JavaScript — Google can't fully index it. The static content section is your real SEO surface.

Step 5 — Deploy in 5 Minutes 

# Push to GitHub
git add .
git commit -m "initial deploy"
git push

# Connect to Vercel
# vercel.com → New Project → Import GitHub repo → Deploy
Enter fullscreen mode Exit fullscreen mode

Vercel detects Next.js automatically. No configuration needed.

For the custom domain:

  1. Vercel → Settings → Domains → Add etudai.com
  2. In Porkbun DNS, add:
    • A record → 76.76.21.21
    • CNAME www → cname.vercel-dns.com
  3. Wait 10 minutes → SSL auto-generates

Step 6 — Google Analytics with Next.js

The official Next.js way — no manual script tags needed:

npm install @next/third-parties
Enter fullscreen mode Exit fullscreen mode 
// app/layout.tsx
import { GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <GoogleAnalytics gaId="G-XXXXXXXXXX" />
      </body>
    </html>
  )
}
Enter fullscreen mode Exit fullscreen mode

Step 7 — Backlinks (The Part Most Builders Skip)

Getting your first backlinks is what tells Google your site is worth indexing quickly. Here's my submission list:

Do immediately (free):

  • uneed.be
  • tinytools.directory
  • alternativeto.net (as alternative to existing tools)
  • producthunt.com

This week:

  • Reddit r/webdev and r/SideProject
  • dev.to (this article)
  • hashnode.com (cross-post)

The biggest lever:
Writing a genuine article on dev.to about how you built it. Dev.to has extremely high Google domain authority. One article here can send 200-500 visitors in the first week.

Results So Far

  • Built and deployed in 1 day
  • Custom domain live: etudai.com
  • Google Search Console verified and indexing requested
  • Google Analytics tracking confirmed (3 active users within the first hour)
  • Product Hunt launch scheduled
  • Listed on Uneed

Google indexing typically takes 24-48 hours after Search Console submission. SEO results take 1-3 months to show meaningful traffic.

The Tools Built

etudai.com currently includes:

  • Word Counter — words, characters, reading time, speaking time, keyword density
  • Case Converter — uppercase, lowercase, title case, camelCase, kebab-case
  • Lorem Ipsum Generator — words, sentences or paragraphs
  • Readability Checker — Flesch score, grade level, sentence analysis
  • Social Counter — Twitter, Instagram, LinkedIn, TikTok character limits

All free. No sign-up. Your text never leaves your browser.

What I Would Do Differently

1. Start with the domain from day one.
I initially deployed to a Vercel subdomain (v0-word-counter-pro.vercel.app). Any SEO work done there is wasted when you switch to a custom domain. Buy the domain first, deploy to it immediately.

2. Build the full suite from the start.
Building tools one by one as separate projects creates unnecessary complexity. Start with the single Next.js project structure from day one.

3. Write the SEO content section before worrying about the UI.
Google ranks the static content, not the interactive tool. A well-written FAQ section matters more than pixel-perfect animations.

Key Takeaways

  • Micro-tools are a legitimate SEO strategy. Each tool targets different keywords. Traffic compounds.
  • v0 + Next.js + Vercel is the fastest stack to go from idea to live product right now.
  • SEO is 20% technical setup and 80% content. The FAQ sections and explanatory content are what rank.
  • A custom domain is not optional. Vercel subdomains have significantly less Google trust than custom domains.
  • Backlinks matter more than most developers realize. Submit to directories on day one.

If you're a designer or developer looking to generate passive traffic, this micro-tools approach is one of the most straightforward paths I've found.

The total time from idea to this article: one day.

Check it out at etudai.com — and let me know what tool you'd want to see next.

Top comments (0)