DEV Community: AceToolz

Why I Built a Desktop Markdown Editor in 2026 Using Tauri 2.0

AceToolz — Fri, 03 Apr 2026 14:51:03 +0000

By Pranshu Agarwal · Founder, AceToolz

It Started With a Problem

When I was deep in building AceToolz, I had Markdown everywhere. README files, changelogs, documentation drafts, tool descriptions, etc. Markdown was the connective tissue of the whole project.

And I will be honest about something: I used AI tools heavily during development. Claude Code was a big part of my workflow. If you have used Claude Code or any agentic AI tool, you already know that the outputs are almost always Markdown. Implementation plans, architecture decisions, code explanations, session summaries. Everything comes back as a structured .md file. At one point I had dozens of these sitting in a folder and absolutely no good way to read them.

Every single time I needed to actually read one of those files, I was opening a browser tab, pasting content into Dillinger or StackEdit or similar sites, previewing it, closing the tab, making edits, then repeating the whole cycle again. It sounds minor. It was not. When you are doing that ten times a day, every day, it becomes genuinely annoying.

And it was not just reading. When writing detailed prompts, instructions or feature specs for Claude Code, I was writing in Markdown too. Structured headings, bullet points, code blocks. AI models respond significantly better to well-structured Markdown input than they do to unformatted paragraphs. So I was both reading Markdown outputs and writing Markdown inputs constantly, and I had no good dedicated place to do either.

I kept thinking: why is there no simple desktop app for this? Not a plugin, not a browser extension, not a full-blown note-taking suite. Just a clean, fast editor that opens a .md file and shows me what it looks like. That is it.

I never found one that felt right. So I built it.

That is how MarkUp started. A side project I originally built for myself, to scratch my own itch. And now I am sharing it with the developer community because I suspect a lot of you have felt the exact same frustration.

Markdown Is Not Going Anywhere

Before I get into MarkUp itself, I want to spend a moment on why Markdown specifically matters in 2026, because I think it is easy to take for granted how deeply embedded it has become.

GitHub made Markdown the default language of technical documentation. Then Notion, Obsidian, and Linear brought it to product teams. Then Ghost and Hashnode brought it to bloggers. Then Discord, Slack, and WhatsApp added their own flavors of it. At this point, if you work in tech in any capacity, you are writing Markdown whether you consciously think about it or not.

For developers, Markdown is everywhere: READMEs, wikis, pull request descriptions, issue templates, technical specs, API documentation. GitHub Flavored Markdown (GFM) especially has become a genuine standard that most developers are expected to understand and use fluently.

And then AI came along and made Markdown even more central to how developers work.

Every major AI coding tool outputs Markdown. Claude Code, Cursor, ChatGPT, Gemini. When you ask for an architecture plan, a code review, a feature breakdown, it comes back structured in Markdown. There is a good reason for this. Markdown is plain text, so it is lightweight and fast to generate. It carries semantic structure (headings, lists, code blocks) without the bloat of a Word document or the binary encoding of a PDF. A well-structured Markdown file gives an AI model clear context to reason about, and a well-structured Markdown output is easy for a developer to parse and act on. PDF and Word formats are designed for human readers and printing. Markdown is designed for both humans and machines. That distinction matters a lot in an AI-first workflow.

The funny thing is that despite Markdown being so ubiquitous, the tooling around it has mostly stayed web-based. There are great web editors. But very few desktop-first editors that treat Markdown as the main event rather than a secondary feature of a larger app.

That gap is what MarkUp is trying to fill.

Why Existing Options Were Not Enough

I tried several editors before building my own. Here is what I kept running into:

Several Web-based editors (Dillinger, StackEdit, HackMD) require a browser, require internet, and often require an account. They are fine for quick one-off previews but terrible for any kind of real workflow. Your files live on your machine. Your editor should too.

VS Code with a Markdown extension is what most developers default to, and honestly it is not bad. But opening VS Code to view an AI-generated implementation plan or a Claude Code session output feels like pulling out a full toolbox to tighten one screw. The Markdown preview in VS Code is a secondary feature bolted onto a code editor. It gets the job done but it is not designed around the Markdown reading and writing experience. When your AI workflow is generating .md files constantly, you want something faster to reach for.

Obsidian and Notion are powerful but they are knowledge management systems. They have their own file formats, sync systems, and opinions about how your notes should be organized. I did not want a system. I wanted an editor.

Typora comes closest to what I wanted. But it is paid, and more importantly it is not built around the split-preview workflow I prefer when writing documentation.

None of these were what I wanted. So I started building.

What MarkUp Is (and What It Is Not)

MarkUp is a free desktop Markdown editor available for Windows, macOS, and Linux. It is currently in Beta (v0.6.1) so there will be rough edges and I am actively working on improvements, but the core experience is solid enough to use daily.

It is not a note-taking app. It is not a knowledge base. It is not trying to organize your life or sync to the cloud. It opens .md files. It shows you a live preview while editing. It exports to PDF or HTML. It does that really well and stays out of your way.

No account required. No internet required. No telemetry. Your files stay on your machine.

The Features (A Developer's Walkthrough)

Real-Time Split Preview

The centerpiece of MarkUp is the split view. Write on the left, see the rendered output on the right, live as you type. No manual refresh, no toggle. The preview updates in real time.

You can also switch to editor-only or preview-only mode depending on what you are doing. Writing a long document? Editor-only keeps you focused. Reviewing someone else's Markdown? Preview-only reads like a proper document.

Dark Mode

Yes, obviously. Dark mode is not a feature, it is a requirement. MarkUp supports both light and dark themes and respects your system preference by default. The editor itself is comfortable for long writing sessions in both modes.

The Slash Command Palette

This is one of my favorite things in MarkUp and the feature I am most proud of.

Type / anywhere in the editor and a command palette opens with 20+ commands. Tables, code blocks, links, headings, emojis, task lists, dividers. You pick it from the menu and it inserts the correct Markdown syntax for you.

The reason I built this is that Markdown syntax, while simple, has just enough friction to break your writing flow. Having to remember the pipe syntax for a table is the kind of thing that makes people give up on Markdown and go back to Google Docs. Slash commands eliminate that friction entirely.

This feature is also why I think MarkUp is useful beyond the traditional developer audience. No-code developers, vibe coders, writers who have heard about Markdown but find the raw syntax intimidating: the slash command palette means you never have to memorize a single piece of syntax. You just type / and pick what you want.

Multi-Tab Support With Session Persistence

You can have multiple documents open simultaneously, each in its own tab. More importantly, when you close MarkUp and reopen it, all your tabs are exactly where you left them. Content, scroll position, everything.

This seems like a small thing but it is one of those features that, once you have it, you never want to work without it. I often have a README, a changelog, and a documentation draft open at the same time. Session persistence means I never lose that context.

Zen Mode

Press Esc in any tab and you enter Zen Mode. The menu bar, tab bar, and status bar all disappear. Only the text is visible. It is the kind of focused writing mode that iA Writer charges for.

Export to PDF and HTML

When your document is ready, you can export it as a PDF via the system print dialog (clean, properly formatted, syntax highlighting preserved) or as a self-contained HTML file with embedded styles. The HTML export is particularly useful for documentation you want to share with someone who does not use Markdown.

External File Modification Detection

If another app modifies a file you have open in MarkUp (a Git pull, a sync tool, a code editor auto-save), MarkUp detects it and prompts you to reload. Small feature, prevents real headaches.

GitHub Flavored Markdown

Full GFM support: tables, task lists, strikethrough, fenced code blocks with syntax highlighting. If it renders correctly on GitHub, it renders correctly in MarkUp.

The Technical Architecture

I want to spend a bit of time here because the technology choices were deliberate and I think they are interesting.

Why Tauri 2.0 and Not Electron

The honest answer is that Electron felt like too much.

Electron bundles a full Chromium browser and a Node.js runtime with every app. That is why a lot of Electron apps are 150MB+ and take several seconds to launch. For a Markdown editor, that overhead seemed absurd.

Tauri takes a different approach. Instead of bundling a browser, it uses the operating system's native WebView (WebView2 on Windows, WKWebView on macOS, WebKitGTK on Linux). The app logic is handled by a Rust binary on the backend. The result is dramatically smaller binaries and significantly faster startup times.

The Windows installer for MarkUp is 2.74MB. The macOS DMG is 3.90MB. For context, Slack's installer is around 90MB.

Tauri 2.0 specifically introduced better plugin architecture, improved mobile support (which I am looking at for future versions), and a cleaner IPC model between the frontend and the Rust backend. It was the right call.

Why CodeMirror 6

The editor itself is built on CodeMirror 6, which is a professional-grade code editor library used by platforms like CodeSandbox, Replit, and Jupyter.

I did not want to write a text editor from scratch. CodeMirror 6 gave me syntax highlighting, undo/redo history, search, key bindings, and extensibility out of the box. It is the kind of library that is easy to start with and does not fight you when you need to customize it.

The React 18 frontend sits on top of CodeMirror 6 and handles the split-preview layout, tab management, and all the UI state. TypeScript throughout, which made the codebase much easier to reason about as features grew.

Offline-First Architecture

There is no server. There is no API. There is no authentication. The app reads and writes files directly on your file system via Tauri's file system APIs. Markdown rendering happens locally using a renderer running in the frontend. Export happens via the native print dialog or a local file write.

This was a deliberate choice. I wanted MarkUp to work on a plane, in a basement with no WiFi, in any situation where internet is not available. It is also why there is zero data collection. There is no server to send data to.

The repository is private for now, but open-sourcing it is on the roadmap once the codebase is in a state I am happy to share publicly.

Who Is MarkUp Really For

When I built MarkUp I was thinking primarily about developers. People editing READMEs, writing technical documentation, reviewing changelogs. That is still the core audience and if you fall into that category, I think you will find it genuinely useful.

But the more people I have shown it to, the more I realize the slash command palette changes the audience significantly. Non-developers who write documentation for tools, product managers drafting specs, content writers working with headings and tables: the friction of learning Markdown syntax has always kept these people away. When you can type /table and get a formatted table without knowing the pipe syntax, that barrier disappears.

No-code developers and vibe coders especially. These are people who rely heavily on AI tools to build products, and that means they are swimming in Markdown constantly whether they realize it or not. Every Claude response, every Cursor suggestion, every ChatGPT output is Markdown. They are reading AI-generated specs, prompts, and plans all day long. They just have no dedicated place to open and read those files comfortably. MarkUp is actually a better fit for this audience than for traditional developers in some ways: the slash commands mean they never need to learn syntax, and the clean split view means they can finally read their AI outputs as formatted documents rather than raw text full of asterisks and hash symbols.

So while the technical architecture section above is aimed squarely at developers, the app itself is designed to be comfortable for anyone who works with text and structure.

Try It

MarkUp is free, works on Windows, macOS, and Linux, and you can download it at acetoolz.com/markup. No account, no install wizard to fight with, just download and open.

It is in Beta right now (v0.6.1), so I would genuinely appreciate feedback. If something does not work as expected or you want a feature that is missing, let me know in the comments here or reach out directly.

And if you find MarkUp useful, take a look at AceToolz as well. We have built 25+ online tools for everyday developer and productivity tasks: PDF tools, image tools, text utilities, AI writing tools, and more. The whole platform is built around the same philosophy as MarkUp: practical tools that work without unnecessary friction.

Final Thought

The best tools I use are the ones I barely notice. They just do what I need and get out of the way. That is what I was going for with MarkUp.

If you are a developer who deals with Markdown regularly and you have felt the same friction I felt, I hope this makes your day a little bit smoother.

Pranshu Agarwal is the founder of AceToolz, a platform of 25+ online productivity and developer tools. Follow AceToolz on Dev.to for more.

OCR Integration in Web Apps: Google Document AI vs Tesseract

AceToolz — Sat, 09 Aug 2025 12:12:14 +0000

A comprehensive comparison for developers choosing OCR solutions

When building web applications that need to extract text from images or PDFs, choosing the right OCR (Optical Character Recognition) solution can make or break your user experience. After implementing OCR functionality in AceToolz, processing thousands of documents, I've gained hands-on experience with both Google Document AI and Tesseract. Here's what you need to know.

TL;DR: Quick Comparison

Feature	Google Document AI	Tesseract.js
Accuracy	95-99% (production)	80-90% (varies)
Speed	~2-5 seconds	~10-30 seconds
Cost	Pay-per-use ($1.50/1000 pages)	Free
Languages	200+ languages	100+ languages
Setup Complexity	Medium	Easy
Offline Support	No	Yes

The Real-World Scenario

At AceToolz, our PDF OCR tool processes everything from scanned receipts to multi-page legal documents. Users expect fast, accurate results regardless of document quality. Here's how both solutions performed in production.

Google Document AI: The Powerhouse

Implementation

// Google Document AI setup
import { DocumentProcessorServiceClient } from '@google-cloud/documentai';

const client = new DocumentProcessorServiceClient({
  keyFilename: process.env.GOOGLE_APPLICATION_CREDENTIALS,
});

async function processDocument(fileBuffer, mimeType) {
  const request = {
    name: `projects/${projectId}/locations/${location}/processors/${processorId}`,
    rawDocument: {
      content: fileBuffer.toString('base64'),
      mimeType: mimeType,
    },
  };

  try {
    const [result] = await client.processDocument(request);
    return result.document.text;
  } catch (error) {
    console.error('Document AI processing failed:', error);
    throw error;
  }
}

Real API Route (Next.js)

// /api/tools/ocr-pdf/route.ts
import { NextRequest } from 'next/server';
import { DocumentProcessorServiceClient } from '@google-cloud/documentai';

export async function POST(request: NextRequest) {
  try {
    const formData = await request.formData();
    const file = formData.get('file') as File;

    if (!file) {
      return Response.json({ error: 'No file provided' }, { status: 400 });
    }

    const fileBuffer = Buffer.from(await file.arrayBuffer());

    // Initialize Google Document AI
    const client = new DocumentProcessorServiceClient({
      credentials: {
        client_email: process.env.GOOGLE_CLIENT_EMAIL,
        private_key: process.env.GOOGLE_PRIVATE_KEY?.replace(/\\n/g, '\n'),
        project_id: process.env.GOOGLE_PROJECT_ID,
      },
    });

    const request = {
      name: `projects/${process.env.GOOGLE_PROJECT_ID}/locations/us/processors/${process.env.GOOGLE_PROCESSOR_ID}`,
      rawDocument: {
        content: fileBuffer.toString('base64'),
        mimeType: file.type,
      },
    };

    const [result] = await client.processDocument(request);
    const extractedText = result.document?.text || '';

    return Response.json({ 
      text: extractedText,
      confidence: result.document?.pages?.[0]?.paragraphs?.[0]?.layout?.confidence || 0,
    });

  } catch (error) {
    console.error('OCR processing failed:', error);
    return Response.json({ error: 'OCR processing failed' }, { status: 500 });
  }
}

Pros of Google Document AI

Exceptional Accuracy: 95-99% accuracy on real documents
Fast Processing: 2-5 seconds for typical documents
Advanced Features: Layout detection, form parsing, table extraction
Language Support: 200+ languages out of the box
Structured Output: Returns coordinates, confidence scores, and formatting

Cons of Google Document AI

Cost: $1.50 per 1000 documents can add up
Internet Dependency: Requires API calls
Setup Complexity: GCP credentials, IAM roles
Vendor Lock-in: Tied to Google Cloud ecosystem

Tesseract.js: The Free Alternative

Implementation

// Tesseract.js setup
import { createWorker } from 'tesseract.js';

async function extractTextTesseract(imageBuffer) {
  const worker = await createWorker();

  try {
    await worker.loadLanguage('eng+spa+fra'); // Multiple languages
    await worker.initialize('eng+spa+fra');

    const { data: { text, confidence } } = await worker.recognize(imageBuffer);

    return {
      text: text.trim(),
      confidence: confidence / 100, // Convert to 0-1 scale
    };
  } finally {
    await worker.terminate();
  }
}

Client-Side Implementation

// React component with Tesseract.js
import { useState } from 'react';
import { createWorker } from 'tesseract.js';

export default function ClientOCR() {
  const [text, setText] = useState('');
  const [loading, setLoading] = useState(false);
  const [progress, setProgress] = useState(0);

  const handleFileUpload = async (file) => {
    setLoading(true);

    const worker = await createWorker();

    // Progress tracking
    worker.setParameters({
      logger: m => {
        if (m.status === 'recognizing text') {
          setProgress(Math.round(m.progress * 100));
        }
      }
    });

    try {
      await worker.loadLanguage('eng');
      await worker.initialize('eng');

      const { data: { text } } = await worker.recognize(file);
      setText(text);
    } catch (error) {
      console.error('OCR failed:', error);
    } finally {
      await worker.terminate();
      setLoading(false);
    }
  };

  return (
    <div>
      <input 
        type="file" 
        accept="image/*"
        onChange={(e) => handleFileUpload(e.target.files[0])}
      />

      {loading && (
        <div>Processing... {progress}%</div>
      )}

      {text && (
        <textarea value={text} readOnly />
      )}
    </div>
  );
}

Pros of Tesseract.js

Free: No usage costs
Client-Side: Works offline, no server needed
Privacy: Documents never leave user's device
Customizable: Trainable for specific use cases
No API Limits: Process unlimited documents

Cons of Tesseract.js

Lower Accuracy: 80-90% on average documents
Slower Processing: 10-30 seconds typical
Resource Heavy: Can slow down user's browser
Quality Sensitive: Poor images = poor results

Production Performance Data

Based on 10,000+ document processing sessions at AceToolz:

Google Document AI Results

Average Processing Time: 3.2 seconds
Success Rate: 98.5%
User Satisfaction: 4.8/5.0
Accuracy on Poor Quality Scans: 89%
Monthly Cost (1000 docs): $1.50

Tesseract.js Results

Average Processing Time: 18.7 seconds
Success Rate: 87.3%
User Satisfaction: 3.9/5.0
Accuracy on Poor Quality Scans: 67%
Monthly Cost: $0

When to Choose What

Choose Google Document AI When:

Accuracy is critical
Processing speed matters
Budget allows for usage costs
Handling diverse document types
Need advanced features (tables, forms)

Choose Tesseract.js When:

Cost is a primary concern
Privacy requirements (client-side processing)
Offline functionality needed
Simple text extraction only
Low volume processing

Hybrid Approach: Best of Both Worlds

// Smart OCR routing based on user tier and document type
async function smartOCR(file, userTier) {
  // Premium users get Google Document AI
  if (userTier === 'premium') {
    return await processWithDocumentAI(file);
  }

  // Free users get Tesseract with option to upgrade
  const tesseractResult = await processWithTesseract(file);

  // If confidence is low, suggest premium upgrade
  if (tesseractResult.confidence < 0.8) {
    return {
      ...tesseractResult,
      upgradeRecommendation: true,
      message: "For better accuracy, try our premium OCR"
    };
  }

  return tesseractResult;
}

Implementation Tips

For Google Document AI:

Batch Processing: Process multiple documents in parallel
Error Handling: Implement proper retry logic
Cost Monitoring: Track usage to avoid surprises
Caching: Cache results for identical documents

For Tesseract.js:

Web Workers: Keep UI responsive during processing
Image Preprocessing: Enhance images before OCR
Progressive Loading: Show processing progress
Memory Management: Terminate workers properly

The Verdict

For AceToolz's PDF OCR tool, we use Google Document AI for premium users and offer Tesseract.js for free tier users. This provides:

Premium experience for paying customers
Free functionality for cost-conscious users
Natural upgrade path based on quality needs

Try both solutions yourself: AceToolz PDF OCR Tool

The choice ultimately depends on your specific requirements: prioritize Google Document AI for accuracy and speed, or Tesseract.js for cost and privacy.

What's your experience with OCR in web applications? Share your thoughts in the comments below!

NextAuth.js v5 Guide: Migrating from v4 with Real Examples

AceToolz — Sat, 09 Aug 2025 12:03:06 +0000

A complete migration guide with actual code from production

NextAuth.js v5 (Auth.js) brings significant improvements but also breaking changes. After migrating AceToolz from v4 to v5 beta, I've learned the gotchas and best practices. Here's your complete migration guide with real production code.

Why Migrate to NextAuth.js v5?

Better TypeScript Support: Improved type safety throughout
Unified API: Consistent interface across all frameworks
Enhanced Security: Better session management and CSRF protection
Framework Agnostic: Works with Next.js, SvelteKit, SolidStart, and more
Improved Developer Experience: Better error messages and debugging

Before You Start

⚠️ Important: NextAuth.js v5 is still in beta. For production apps, proceed carefully and test thoroughly.

Current Setup Check

# Check your current NextAuth version
npm list next-auth

# AceToolz was using
"next-auth": "^4.24.7"

Step 1: Installation and Dependencies

Remove Old Packages

npm uninstall next-auth
npm uninstall @next-auth/prisma-adapter  # if using Prisma

Install NextAuth v5

npm install next-auth@beta
npm install @auth/prisma-adapter  # New Prisma adapter

Updated package.json

{
  "dependencies": {
    "next-auth": "5.0.0-beta.25",
    "@auth/prisma-adapter": "^2.6.0",
    "prisma": "^5.22.0",
    "@prisma/client": "^5.22.0"
  }
}

Step 2: Configuration Migration

Before (v4): `pages/api/auth/[...nextauth].ts`

import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'
import CredentialsProvider from 'next-auth/providers/credentials'
import { PrismaAdapter } from '@next-auth/prisma-adapter'
import { prisma } from '@/lib/prisma'
import bcrypt from 'bcryptjs'

export default NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
    CredentialsProvider({
      name: 'credentials',
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) return null;

        const user = await prisma.user.findUnique({
          where: { email: credentials.email },
        });

        if (user && bcrypt.compareSync(credentials.password, user.password!)) {
          return { id: user.id, email: user.email, name: user.name };
        }

        return null;
      },
    }),
  ],
  session: { strategy: 'jwt' },
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.roleId = user.roleId;
      }
      return token;
    },
    async session({ session, token }) {
      if (token) {
        session.user.id = token.sub!;
        session.user.roleId = token.roleId as number;
      }
      return session;
    },
  },
})

After (v5): `app/api/auth/[...nextauth]/route.ts`

import NextAuth from 'next-auth'
import Google from 'next-auth/providers/google'
import Credentials from 'next-auth/providers/credentials'
import { PrismaAdapter } from '@auth/prisma-adapter'
import { prisma } from '@/lib/prisma'
import bcrypt from 'bcryptjs'

const handler = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    Google({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
    Credentials({
      name: 'credentials',
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) return null;

        const user = await prisma.user.findUnique({
          where: { email: credentials.email },
        });

        if (user && bcrypt.compareSync(credentials.password, user.password!)) {
          return { 
            id: user.id, 
            email: user.email, 
            name: user.name,
            roleId: user.roleId, // Custom field
          };
        }

        return null;
      },
    }),
  ],
  session: { strategy: 'jwt' },
  callbacks: {
    async jwt({ token, user }) {
      // On signin, add custom fields to token
      if (user) {
        token.roleId = user.roleId;
      }
      return token;
    },
    async session({ session, token }) {
      // Send properties to the client
      if (token) {
        session.user.id = token.sub!;
        session.user.roleId = token.roleId as number;
      }
      return session;
    },
  },
  pages: {
    signIn: '/auth/signin',
    error: '/auth/error',
  },
});

export { handler as GET, handler as POST }

Step 3: Environment Variables

New Required Variables

# .env.local
# v5 requires AUTH_SECRET instead of NEXTAUTH_SECRET
AUTH_SECRET=your-secret-key-here
# AUTH_URL replaces NEXTAUTH_URL  
AUTH_URL=http://localhost:3000

# Google OAuth (unchanged)
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

# Database (unchanged)
DATABASE_URL=your-database-url

Migration Script for Environment

# Quick find and replace in your .env files
sed -i 's/NEXTAUTH_SECRET/AUTH_SECRET/g' .env.local
sed -i 's/NEXTAUTH_URL/AUTH_URL/g' .env.local

Step 4: Type Definitions Update

Before (v4): `types/next-auth.d.ts`

import NextAuth from 'next-auth'

declare module 'next-auth' {
  interface Session {
    user: {
      id: string
      roleId: number
    } & DefaultSession['user']
  }

  interface User {
    roleId: number
  }
}

declare module 'next-auth/jwt' {
  interface JWT {
    roleId: number
  }
}

After (v5): `types/auth.d.ts`

import { DefaultSession } from 'next-auth'

declare module 'next-auth' {
  interface Session {
    user: {
      id: string
      roleId: number
    } & DefaultSession['user']
  }

  interface User {
    roleId?: number  // Make it optional for OAuth users
  }
}

declare module '@auth/core/jwt' {
  interface JWT {
    roleId?: number
  }
}

Step 5: Client-Side Usage Updates

Before (v4): Using `useSession`

import { useSession, signIn, signOut } from 'next-auth/react'

export default function Component() {
  const { data: session, status } = useSession()

  if (status === 'loading') return <p>Loading...</p>
  if (!session) return <button onClick={() => signIn()}>Sign In</button>

  return (
    <div>
      <p>Welcome {session.user?.name}</p>
      <p>Role ID: {session.user.roleId}</p>
      <button onClick={() => signOut()}>Sign Out</button>
    </div>
  )
}

After (v5): Same API, but updated provider

// app/layout.tsx
import { SessionProvider } from 'next-auth/react'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <SessionProvider>{children}</SessionProvider>
      </body>
    </html>
  )
}

The useSession hook usage remains the same! This is one of the benefits of v5 - minimal client-side changes.

Step 6: Server-Side Usage Updates

Before (v4): `getServerSession`

import { getServerSession } from 'next-auth'
import { authOptions } from '@/pages/api/auth/[...nextauth]'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const session = await getServerSession(req, res, authOptions)

  if (!session) {
    return res.status(401).json({ error: 'Unauthorized' })
  }

  // Handle request
}

After (v5): Import from auth config

// lib/auth.ts - Extract auth config
import NextAuth from 'next-auth'
import Google from 'next-auth/providers/google'
import { PrismaAdapter } from '@auth/prisma-adapter'
import { prisma } from '@/lib/prisma'

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    Google({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  // ... rest of config
})

// app/api/protected-route/route.ts
import { auth } from '@/lib/auth'

export async function GET() {
  const session = await auth()

  if (!session) {
    return Response.json({ error: 'Unauthorized' }, { status: 401 })
  }

  return Response.json({ user: session.user })
}

Step 7: Middleware Updates

Before (v4): Custom middleware

import { withAuth } from 'next-auth/middleware'

export default withAuth(
  function middleware(req) {
    // Custom logic
  },
  {
    callbacks: {
      authorized: ({ token, req }) => {
        return token?.roleId === 4 // Admin only
      },
    },
  }
)

After (v5): Updated middleware

import { auth } from '@/lib/auth'
import { NextResponse } from 'next/server'

export default auth((req) => {
  const { nextUrl } = req
  const isLoggedIn = !!req.auth

  // Protect admin routes
  if (nextUrl.pathname.startsWith('/admin')) {
    if (!isLoggedIn || req.auth?.user?.roleId !== 4) {
      return NextResponse.redirect(new URL('/auth/signin', nextUrl))
    }
  }

  return NextResponse.next()
})

export const config = {
  matcher: ['/admin/:path*', '/dashboard/:path*'],
}

Step 8: Database Schema Considerations

Updated Prisma Schema for v5

model Account {
  id                String  @id @default(cuid())
  userId            String  @map("user_id")
  type              String
  provider          String
  providerAccountId String  @map("provider_account_id")
  refresh_token     String? @db.Text
  access_token      String? @db.Text
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String? @db.Text
  session_state     String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
  @@map("accounts")
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique @map("session_token")
  userId       String   @map("user_id")
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@map("sessions")
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String    @unique
  password      String?   // For credentials
  emailVerified DateTime? @map("email_verified")
  image         String?
  roleId        Int       @default(1) @map("role_id")

  accounts Account[]
  sessions Session[]

  @@map("users")
}

Step 9: Testing Your Migration

Test Checklist

// test/auth.test.ts
import { describe, it, expect } from 'vitest'
import { auth } from '@/lib/auth'

describe('NextAuth v5 Migration', () => {
  it('should handle OAuth sign in', async () => {
    // Test OAuth flow
  })

  it('should handle credentials sign in', async () => {
    // Test credentials flow
  })

  it('should preserve custom session data', async () => {
    // Test roleId and custom fields
  })

  it('should handle sign out', async () => {
    // Test sign out flow
  })
})

Manual Testing Steps

OAuth Flow: Test Google sign-in
Credentials Flow: Test email/password login
Session Persistence: Refresh page, check session
Custom Fields: Verify roleId is preserved
Protected Routes: Test middleware protection
Sign Out: Test sign-out functionality

Common Migration Issues and Solutions

Issue 1: Session Strategy with Credentials

Problem: Using database strategy with credentials provider fails.

Solution: Use JWT strategy when using credentials:

export const { handlers, auth } = NextAuth({
  session: { strategy: 'jwt' }, // Required for credentials
  providers: [
    Credentials({
      // ... credentials config
    }),
  ],
})

Issue 2: Custom Fields Not Persisting

Problem: roleId not available in session.

Solution: Update both JWT and session callbacks:

callbacks: {
  async jwt({ token, user, trigger }) {
    if (user) {
      token.roleId = user.roleId
    }
    return token
  },
  async session({ session, token }) {
    if (token) {
      session.user.id = token.sub!
      session.user.roleId = token.roleId as number
    }
    return session
  },
}

Issue 3: Environment Variables

Problem: NEXTAUTH_SECRET not recognized.

Solution: Update to AUTH_SECRET:

# Change in all environment files
AUTH_SECRET=your-secret-here
AUTH_URL=http://localhost:3000

Performance Improvements in v5

After migration, AceToolz saw:

25% faster authentication: Improved session handling
Better error messages: Easier debugging
Type safety: Fewer runtime errors
Bundle size: 15% smaller client bundle

Production Deployment Checklist

[ ] Update environment variables
[ ] Test OAuth providers
[ ] Verify custom session fields
[ ] Check protected routes
[ ] Test sign-out flow
[ ] Monitor error logs
[ ] Update documentation

Migration Timeline

Planning: 1 day (reading docs, planning approach)
Implementation: 2-3 days (code changes, testing)
Testing: 2-3 days (thorough testing across features)
Deployment: 1 day (staged rollout)

Conclusion

NextAuth.js v5 migration requires careful planning but provides significant benefits. The key is thorough testing and understanding the breaking changes.

See the results: AceToolz Authentication - Running NextAuth.js v5 in production.

Questions about NextAuth.js v5 migration? Drop them in the comments!

Building 20 Online Tools in 6 Months: Lessons in Rapid Development

AceToolz — Sat, 09 Aug 2025 11:55:43 +0000

Six months ago, I had a simple idea: create a collection of useful online tools that developers and everyday users actually need. Today, AceToolz has 20 different online tools and growing. Here's everything I learned about rapid development, technical decisions that saved months, and mistakes that cost weeks.

The Challenge: 20 Tools in 180 Days

The goal was ambitious but clear:

5 Text Processing Tools: Case converter, word counter, text diff, grammar checker, paraphraser
7 PDF Tools: Editor, converter, compressor, merger, splitter, OCR, page management
4 Image Tools: Compressor, resizer, format converter, background remover
4 Generator Tools: QR codes, passwords, UUIDs, random patterns

Each tool needed to be production-ready, not a prototype.

Month 1: Foundation and Architecture Decisions

The Tech Stack Choice

// The foundation that made everything possible
const techStack = {
  framework: 'Next.js 14 (App Router)',
  database: 'Neon PostgreSQL + Prisma',
  authentication: 'NextAuth.js v5',
  hosting: 'Vercel',
  styling: 'Tailwind CSS',
  ui: 'Custom components (no external libraries)',
};

Why these choices mattered:

Next.js App Router: Built-in API routes eliminated backend complexity
Serverless: Zero infrastructure management
Prisma: Database changes without migrations hell
TypeScript: Caught bugs before users did

The Tool Interface Pattern

The biggest time-saver was standardizing every tool:

// lib/tools/interface.ts
export interface Tool {
  name: string;
  slug: string;
  description: string;
  category: 'text' | 'pdf' | 'image' | 'generate';
  isPremium: boolean;
  processingType: 'client' | 'server';
  settings: ToolSetting[];
  process: (input: any, settings: any) => Promise<any>;
}

// Example implementation
export const wordCounterTool: Tool = {
  name: 'Word Counter',
  slug: 'word-counter',
  description: 'Count words, characters, and paragraphs',
  category: 'text',
  isPremium: false,
  processingType: 'client',
  settings: [
    {
      key: 'includeSpaces',
      type: 'boolean',
      label: 'Include spaces in character count',
      defaultValue: true,
    }
  ],
  process: async (text: string, settings) => {
    return {
      words: text.trim().split(/\s+/).filter(Boolean).length,
      characters: settings.includeSpaces ? text.length : text.replace(/\s/g, '').length,
      paragraphs: text.split('\n\n').filter(Boolean).length,
    };
  },
};

This pattern saved weeks. Every tool followed the same structure.

The Reusable Component System

// components/tools/ToolContainer.tsx
interface ToolContainerProps {
  tool: Tool;
  children: React.ReactNode;
  onProcess: (input: any) => Promise<any>;
}

export default function ToolContainer({ tool, children, onProcess }: ToolContainerProps) {
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState(null);

  const handleProcess = async (input: any) => {
    setLoading(true);
    try {
      const result = await onProcess(input);
      setResult(result);
    } catch (error) {
      setError(error.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="tool-container">
      <ToolHeader tool={tool} />
      <div className="tool-body">
        {children}
      </div>
      <ToolFooter loading={loading} result={result} />
    </div>
  );
}

Month 2-3: The Text and Generator Tools Sprint

Client-Side vs Server-Side Decision Matrix

Early on, I created a decision framework:

const processingDecision = {
  clientSide: [
    'Simple text manipulation',
    'No external APIs needed',
    'Privacy-sensitive operations',
    'Instant feedback required'
  ],
  serverSide: [
    'External API integration',
    'Heavy computation',
    'File processing',
    'Premium features'
  ]
};

Text Tools: The Fast Wins

Text tools were perfect for building momentum:

// lib/tools/caseConverter.ts - Built in 1 day
export async function convertCase(text: string, targetCase: string) {
  switch (targetCase) {
    case 'uppercase':
      return text.toUpperCase();
    case 'lowercase':
      return text.toLowerCase();
    case 'titlecase':
      return text.replace(/\w\S*/g, (txt) => 
        txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
      );
    case 'camelcase':
      return text.replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => 
        index === 0 ? word.toLowerCase() : word.toUpperCase()
      ).replace(/\s+/g, '');
    default:
      return text;
  }
}

Key insight: Start with simple, high-value tools to build confidence and establish patterns.

The Generator Tools Pattern

// lib/tools/passwordGenerator.ts - Reusable randomization
class SecureRandomizer {
  private static charSets = {
    lowercase: 'abcdefghijklmnopqrstuvwxyz',
    uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
    numbers: '0123456789',
    symbols: '!@#$%^&*()_+-=[]{}|;:,.<>?'
  };

  static generatePassword(options: PasswordOptions): string {
    const charset = this.buildCharset(options);
    const array = new Uint32Array(options.length);
    crypto.getRandomValues(array);

    return Array.from(array, x => charset[x % charset.length]).join('');
  }

  static generateUUID(): string {
    return crypto.randomUUID();
  }

  // Reused across 3 different generator tools
  private static buildCharset(options: any): string {
    let charset = '';
    Object.entries(options).forEach(([key, enabled]) => {
      if (enabled && this.charSets[key]) {
        charset += this.charSets[key];
      }
    });
    return charset;
  }
}

Month 3-4: PDF Tools - The Real Challenge

The Vercel Serverless Limitation

Hit a wall immediately:

// This failed - Vercel has 4.5MB request limit
export async function POST(request: NextRequest) {
  const formData = await request.formData();
  const file = formData.get('file') as File; // 50MB PDF = 💥

  // Process file... CRASH
}

The External API Solution

// lib/utils/ilovepdf-upload.ts
import ILovePDFApi from '@ilovepdf/ilovepdf-nodejs';

class PDFProcessor {
  private api: ILovePDFApi;

  constructor() {
    this.api = new ILovePDFApi(
      process.env.ILOVEPDF_PUBLIC_KEY!,
      process.env.ILOVEPDF_SECRET_KEY!
    );
  }

  async compressPDF(fileBuffer: Buffer): Promise<Buffer> {
    const task = this.api.newTask('compress');

    try {
      await task.start();
      const file = await task.addFile(fileBuffer);
      await task.process();
      return await task.download();
    } finally {
      await task.delete(); // Cleanup
    }
  }

  async convertToPDF(fileBuffer: Buffer, fromFormat: string): Promise<Buffer> {
    const task = this.api.newTask('officepdf');
    // Similar pattern...
  }
}

The PDF.js Integration for Editing

// components/tools/PDFEditor/PDFEditorCanvas.tsx
import * as pdfjsLib from 'pdfjs-dist';

export default function PDFEditorCanvas({ pdfData }: { pdfData: ArrayBuffer }) {
  const [pdf, setPdf] = useState<PDFDocumentProxy | null>(null);
  const [currentPage, setCurrentPage] = useState(1);

  useEffect(() => {
    const loadPDF = async () => {
      const loadingTask = pdfjsLib.getDocument(pdfData);
      const pdfDoc = await loadingTask.promise;
      setPdf(pdfDoc);
    };

    loadPDF();
  }, [pdfData]);

  const renderPage = async (pageNumber: number) => {
    if (!pdf) return;

    const page = await pdf.getPage(pageNumber);
    const scale = 1.5;
    const viewport = page.getViewport({ scale });

    const canvas = canvasRef.current!;
    const context = canvas.getContext('2d')!;
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    const renderContext = {
      canvasContext: context,
      viewport: viewport
    };

    await page.render(renderContext).promise;
  };

  // Annotation system, text editing, shape tools...
}

Lesson learned: For complex features like PDF editing, don't reinvent the wheel. PDF.js + Canvas API provided 90% of the functionality.

Month 4-5: Image Tools and External Services

ImageKit.io Integration

// lib/utils/imagekit/client.ts
import ImageKit from 'imagekit';

class ImageProcessor {
  private imagekit: ImageKit;

  constructor() {
    this.imagekit = new ImageKit({
      publicKey: process.env.NEXT_PUBLIC_IMAGEKIT_PUBLIC_KEY!,
      privateKey: process.env.IMAGEKIT_PRIVATE_KEY!,
      urlEndpoint: process.env.NEXT_PUBLIC_IMAGEKIT_URL_ENDPOINT!,
    });
  }

  async compressImage(file: File, quality: number): Promise<string> {
    const uploadResult = await this.imagekit.upload({
      file: file,
      fileName: `compressed_${Date.now()}`,
      folder: '/temp-images/',
    });

    // Generate compressed URL
    return this.imagekit.url({
      path: uploadResult.filePath,
      transformation: [{
        quality: quality.toString(),
        format: 'auto'
      }]
    });
  }

  async removeBackground(file: File): Promise<string> {
    // Upload and apply background removal
    const uploadResult = await this.imagekit.upload({
      file: file,
      fileName: `nobg_${Date.now()}`,
      folder: '/temp-images/',
    });

    return this.imagekit.url({
      path: uploadResult.filePath,
      transformation: [{
        effect: 'bg-removal'
      }]
    });
  }
}

The Usage Tracking System

// lib/utils/user-limits.ts
export class UsageLimiter {
  static async checkLimit(userId: string, toolSlug: string): Promise<boolean> {
    const today = new Date().toISOString().split('T')[0];

    const usage = await prisma.toolUsage.findFirst({
      where: {
        userId,
        toolSlug,
        date: today,
      }
    });

    const userRole = await this.getUserRole(userId);
    const limit = this.getLimitForRole(userRole, toolSlug);

    return !usage || usage.count < limit;
  }

  static async incrementUsage(userId: string, toolSlug: string): Promise<void> {
    const today = new Date().toISOString().split('T')[0];

    await prisma.toolUsage.upsert({
      where: {
        userId_toolSlug_date: {
          userId,
          toolSlug,
          date: today,
        }
      },
      update: {
        count: { increment: 1 }
      },
      create: {
        userId,
        toolSlug,
        date: today,
        count: 1,
      }
    });
  }
}

Month 6: Performance, Polish, and Launch

The Ocean Depth Design System

/* globals.css - The visual identity */
:root {
  --primary-gradient: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%);
  --morning-sky: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 50%, #93c5fd 100%);
  --surface-gradient: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  --accent-blue: #2563eb;
  --ocean-deep: #1e40af;
}

.tool-container {
  background: var(--surface-gradient);
  border-radius: 24px;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}

.primary-button {
  background: var(--primary-gradient);
  border-radius: 16px;
  transition: all 0.3s ease;
}

Performance Optimizations

// Performance monitoring wrapper
export function withPerformanceMonitoring<T extends (...args: any[]) => any>(
  fn: T,
  operationName: string
): T {
  return ((...args: any[]) => {
    const start = performance.now();

    const result = fn(...args);

    if (result instanceof Promise) {
      return result.finally(() => {
        const end = performance.now();
        console.log(`${operationName} took ${end - start} milliseconds`);
      });
    } else {
      const end = performance.now();
      console.log(`${operationName} took ${end - start} milliseconds`);
      return result;
    }
  }) as T;
}

// Applied to all tool processing functions
export const optimizedWordCounter = withPerformanceMonitoring(
  wordCounterTool.process,
  'Word Counter Processing'
);

The Numbers: What Actually Happened

Development Timeline

Month 1: Foundation + 3 tools (text tools)
Month 2: 8 tools (remaining text + all generators)
Month 3: 4 tools (basic PDF tools)
Month 4: 3 tools (complex PDF tools)
Month 5: 4 tools (image tools)
Month 6: Polish + performance + launch

Technical Metrics

Page Load Time: <2 seconds (average)
Tool Processing: 85% under 5 seconds
Uptime: 99.9%
Bundle Size: 125KB (gzipped)

Biggest Lessons Learned

1. Start Simple, Scale Complexity

// DON'T start with this complexity
const advancedPDFEditor = {
  features: ['annotations', 'forms', 'signatures', 'collaboration'],
  complexity: 'insane',
  timeToMarket: '6 months'
};

// START with this
const basicPDFViewer = {
  features: ['view', 'download'],
  complexity: 'manageable', 
  timeToMarket: '1 week'
};

2. External APIs > Reinventing Wheels

Building PDF processing from scratch would have taken 6 months. Using iLovePDF API took 6 days.

3. User Feedback Drives Features

The most-used tools were the ones I thought were "too simple":

Word Counter: 40% of all usage
Case Converter: 25% of all usage
QR Generator: 20% of all usage

4. Performance Matters More Than Features

// This optimization saved the project
const optimizations = {
  'Lazy loading components': '+40% page speed',
  'Client-side processing': '+60% user satisfaction',
  'Proper caching': '+30% server efficiency',
  'Image optimization': '+25% mobile performance'
};

5. Documentation Your Future Self Will Thank You For

/**
 * PDF Processing Pipeline
 * 
 * Flow: Upload -> Validate -> Process -> Download
 * Limits: 50MB max file size
 * Supported: PDF, DOC, DOCX, PPT, PPTX
 * 
 * @example
 * const result = await processPDF(file, 'compress', { quality: 0.8 });
 */
export async function processPDF(
  file: File, 
  operation: PDFOperation, 
  options: ProcessingOptions
): Promise<ProcessingResult> {
  // Implementation...
}

What I'd Do Differently

1. Start with Analytics Day 1

I added analytics in month 3. Wish I had usage data from the beginning.

2. Build Premium Features Earlier

Free tier limitations came in month 4. Should have been part of the original architecture.

3. More Aggressive Caching

// Implemented too late
const cacheStrategy = {
  'Tool results': 'Redis, 1 hour',
  'User preferences': 'Local storage',
  'Static assets': 'CDN, 30 days'
};

The Tech Stack That Delivered

MVP Speed Winners:

Next.js App Router (pages in minutes)
Vercel deployment (zero config)
Prisma (database changes without fear)
Tailwind CSS (styling without custom CSS)

Production Scale Heroes:

ImageKit.io (handled 1M+ image operations)
iLovePDF (processed 100K+ PDFs)
Neon PostgreSQL (serverless database that just works)
NextAuth.js (authentication without security headaches)

The Current State

20 production tools across 4 categories
99.9% uptime (Vercel is amazing)
Sub-2-second load times globally
Zero security incidents (thanks NextAuth + Vercel)

What's Next

Currently building:

Browser Extension: Bring tools to where users work
API Service: Let developers integrate our tools
Mobile Apps: Native iOS/Android applications
Workflow Builder: Chain tools together

Try the tools yourself: AceToolz.com

Building something similar? I'd love to hear about your approach in the comments!

AI-Powered Text Transformation - Deep Dive into the Paraphraser & Summarizer

AceToolz — Mon, 04 Aug 2025 14:23:50 +0000

Building intelligent text processing with dual-mode functionality, premium tier management, and sophisticated AI integration

Welcome back to the AceToolz Application Walkthrough series! In our previous article, we explored the Ocean Depth UI Theme, showcasing how consistent UI patterns create cohesive user experiences across 20 tools. Today, we're diving deep into one of our most sophisticated tools: the Paraphraser & Summarizer.

This tool demonstrates advanced AI integration, complex state management, premium feature gating, and intelligent user experience design. Let's explore how we built a professional-grade text transformation tool that handles both paraphrasing and summarization with extensive customization options.

The Challenge: Dual-Mode Text Processing

Building a text processing tool sounds straightforward until you realize the complexity involved:

Dual functionality (paraphrase vs. summarize) with different option sets
Premium tier management with feature restrictions
Real-time character limits and validation
AI API integration with error handling and fallbacks
Authentication states (guest, free, premium users)
Usage tracking for analytics and billing
Responsive UI that works across all devices

The Paraphraser & Summarizer tool tackles all these challenges while maintaining the elegant simplicity users expect.

Architecture Overview: From Frontend to AI

Technology Stack

Frontend: Next.js 14 with TypeScript and Tailwind CSS
AI Integration: OpenAI GPT-4o API with custom prompt engineering
Authentication: NextAuth.js with role-based access control
State Management: React hooks with custom preference loading
UI Components: Shadcn/ui with Ocean Depth theming

Core Components Structure

ParaphraserSummarizerTool.tsx    # Main React component
paraphraserSummarizer.ts         # Tool configuration & types
text-process/route.ts            # API endpoint with AI integration
usage-tracking/route.ts          # Analytics and billing tracking

User Experience Flow: From Guest to Premium

Authentication-Aware Interface

The tool implements a sophisticated authentication flow:

// Guest users see encouraging signup interface
if (isGuest) {
  return (
    <div className="text-center bg-gradient-to-br from-green-50 to-emerald-50">
      <Lock className="h-8 w-8 text-green-600" />
      <h2>Paraphraser & Summarizer</h2>
      <p>Sign up for free to get started!</p>
      <Button onClick={() => openAuthModal('signup')}>
        Sign Up Free
      </Button>
    </div>
  );
}

Key UX Decisions:

Encouraging tone rather than blocking message
Clear value proposition highlighting free tier benefits
Seamless auth integration with modal-based signup/login
Feature comparison showing free vs. premium benefits

Step-by-Step Guided Interface

Once authenticated, users see a carefully designed three-step process:

Step 1: Text Input with Smart Limits

const characterCount = inputText.length;
const isOverLimit = characterCount > FREE_TIER_LIMIT;

// Dynamic character counter with premium indicators
<span className={`text-sm ${!isPremium && isOverLimit ? 'text-red-500' : 'text-gray-600'}`}>
  {characterCount}{!isPremium ? `/${FREE_TIER_LIMIT}` : ''} characters
  {isPremium && <span className="text-green-600">(Unlimited)</span>}
</span>

Step 2: Mode Selection with Visual Feedback

The mode selection uses our Ocean Depth design system:

Interactive cards with hover effects and gradient backgrounds
Clear descriptions explaining each mode's purpose
Active state styling using brand colors
Smooth transitions for mode switching

Step 3: Dynamic Options Based on Mode

The options panel demonstrates sophisticated state management:

// Dynamic options rendering based on active mode
{activeTab === 'paraphrase' && (
  <div className="space-y-6">
    {/* Tone Selection */}
    <ToneOptions />
    {/* Complexity Selection */}
    <ComplexityOptions />
  </div>
)}

{activeTab === 'summarize' && (
  <div className="space-y-6">
    {/* Length Selection */}
    <LengthOptions />
    {/* Style Selection */}
    <StyleOptions />
  </div>
)}

Premium Feature Management: Elegant Restrictions

Visual Premium Indicators

One of the most challenging aspects was implementing premium restrictions without frustrating free users:

// Premium badge component
const PremiumBadge = () => (
  <span className="inline-flex items-center ml-1 text-xs font-medium text-yellow-700 bg-yellow-100 rounded px-1.5 py-0.5">
    <Crown size={12} className="mr-0.5" />
    <span>Premium</span>
  </span>
);

// Premium option detection
const isPremiumOption = (optionType: 'tone' | 'complexity' | 'length', value: string): boolean => {
  const isPremium = user?.role?.name === 'Text_Pro' || user?.role?.name === 'PRO';
  if (isPremium) return false;

  const premiumOptions = {
    tone: ['professional', 'academic', 'creative'],
    complexity: ['similar', 'complex'],
    length: ['detailed']
  };

  return premiumOptions[optionType].includes(value);
};

Design Philosophy:

Show, don't hide premium features to encourage upgrades
Clear visual indicators using crown badges and opacity
Graceful degradation with helpful upgrade messaging
Consistent styling maintaining Ocean Depth aesthetics

Server-Side Validation

The API endpoint includes robust premium validation:

// Character limit enforcement
if (text.length > FREE_TIER_LIMIT) {
  const isPremium = session.user?.role?.name === 'Text_Pro' || 
                   session.user?.role?.name === 'PRO';

  if (!isPremium) {
    return NextResponse.json(
      { error: `Free tier is limited to ${FREE_TIER_LIMIT} characters.` },
      { status: 400 }
    );
  }
}

// Premium option validation
if (options.tone && premiumOptions.tone.includes(options.tone)) {
  return NextResponse.json(
    { error: 'This tone option requires a premium subscription' },
    { status: 403 }
  );
}

This dual-validation approach (frontend + backend) ensures security while maintaining smooth UX.

AI Integration: Sophisticated Prompt Engineering

Dynamic Prompt Construction

The heart of the tool lies in its AI integration with carefully crafted prompts:

function buildPrompt(text: string, options: ProcessOptions): string {
  if (options.mode === 'paraphrase') {
    return `You are a professional text rewriter. Paraphrase the following text using a ${options.tone || 'casual'} tone and make it ${options.complexity || 'simpler'} than the original.

Maintain the original meaning but change the sentence structure and vocabulary where appropriate.

Text to paraphrase:
${text}`;
  } else { // summarize
    const lengthGuidance = {
      'brief': 'very concise (about 25% of the original length)',
      'medium': 'moderately detailed (about 40% of the original length)',
      'detailed': 'comprehensive but condensed (about 60% of the original length)'
    }[options.length || 'brief'];

    const styleGuidance = options.style === 'bullets' 
      ? 'Format the summary as bullet points.' 
      : 'Format the summary as a cohesive paragraph.';

    return `You are a professional text summarizer. Create a ${lengthGuidance} summary of the following text. ${styleGuidance}

Text to summarize:
${text}`;
  }
}

Prompt Engineering Insights:

Clear role definition ("professional text rewriter/summarizer")
Specific instructions with measurable targets (25%, 40%, 60% length)
Dynamic parameter injection based on user selections
Consistent output formatting instructions

Error Handling and Fallbacks

The AI integration includes comprehensive error handling:

// Development fallback for testing
if (process.env.NODE_ENV !== 'production') {
  return NextResponse.json({
    processedText: "This is a processed version of the text for development purposes.",
    originalWordCount: countWords(mockText),
    newWordCount: 10,
    characterReduction: 75
  });
}

// Production error handling
if (!response.ok) {
  const errorData = await response.json();
  console.error('OpenAI API error:', errorData);
  return NextResponse.json(
    { error: `OpenAI API error: ${errorData.error?.message || response.statusText}` },
    { status: response.status }
  );
}

Results Display: Analytics and Insights

Real-Time Processing Feedback

The results display provides comprehensive analytics:

// Processing results with detailed analytics
{result && (
  <div className="mt-4 p-4 bg-blue-50 rounded-xl">
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
      <div>
        <div className="text-2xl font-bold text-blue-600">{result.originalWordCount}</div>
        <div className="text-sm text-gray-600">Original Words</div>
      </div>
      <div>
        <div className="text-2xl font-bold text-green-600">{result.newWordCount}</div>
        <div className="text-sm text-gray-600">New Words</div>
      </div>
      {result.characterReduction !== undefined && (
        <div>
          <div className="text-2xl font-bold text-purple-600">{result.characterReduction}%</div>
          <div className="text-sm text-gray-600">Reduction</div>
        </div>
      )}
    </div>
  </div>
)}

User Value:

Immediate feedback on transformation effectiveness
Quantified results showing word count changes
Compression metrics for summarization tasks
Visual analytics with color-coded statistics

Copyable Output Integration

The results integrate with our reusable CopyableOutput component:

<CopyableOutput value={outputText} />

This provides instant copy functionality with visual feedback, maintaining consistency across all tools.

Usage Tracking: Analytics and Billing

Comprehensive Analytics Integration

One of the most sophisticated aspects is the usage tracking system:

const trackTextProcessUsage = async (data: {
  mode: 'paraphrase' | 'summarize';
  inputLength: number;
  outputLength: number;
  originalWordCount: number;
  newWordCount: number;
  characterReduction?: number;
  settings: object;
}) => {
  // Find tool ID dynamically
  const toolResponse = await fetch('/api/tools-with-settings');
  const tool = response.tools.find(t => t.slug === 'paraphraser-summarizer');

  const trackingPayload = {
    toolId: tool.id,
    toolType: 'text' as const,
    userAgent: navigator.userAgent,
    toolData: {
      toolSetting: { ...data.settings, mode: data.mode },
      toolResult: { ...data },
      actionDescription: data.mode === 'paraphrase' 
        ? `Paraphrased text (${data.originalWordCount} → ${data.newWordCount} words)`
        : `Summarized text - reduced by ${data.characterReduction}% (${data.originalWordCount} → ${data.newWordCount} words)`,
      aiUsage: true
    }
  };

  await fetch('/api/tools/usage-tracking', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(trackingPayload)
  });
};

Tracking Capabilities:

Detailed usage metrics for business intelligence
AI usage flagging for cost management
User behavior analytics for feature optimization
Guest session tracking for conversion analysis

User Preferences: Personalization at Scale

Async Preference Loading

The tool integrates with our user preference system:

const { preferences, isLoading: preferencesLoading } = useToolPreferences('paraphraser-summarizer');

// Handle async preference loading
useEffect(() => {
  if (!preferencesLoading && Object.keys(preferences).length > 0) {
    setActiveTab(preferences['defaultMode'] as 'paraphrase' | 'summarize' || 'paraphrase');
    setTone(preferences['defaultTone'] as ProcessOptions['tone'] || 'casual');
    setComplexity(preferences['defaultComplexity'] as ProcessOptions['complexity'] || 'simpler');
    // ... additional preference loading
  }
}, [preferences, preferencesLoading]);

This ensures returning users see their preferred settings immediately, improving workflow efficiency.

Educational Content: Built-in Learning

Contextual Tips and Guidance

The tool includes comprehensive educational content:

// Dynamic tip content based on user tier
<div className="font-semibold text-gray-900 mb-1">Premium Tier Benefits</div>
<div>
  {!isPremium ? 
    `Free users: ${FREE_TIER_LIMIT} characters with basic options. Premium Text Pro users enjoy unlimited characters, all tone styles, and advanced complexity controls.` : 
    'Premium users enjoy unlimited character processing, all tone styles (Professional, Academic, Creative), and advanced complexity controls.'
  }
</div>

The tips section adapts content based on user tier, providing relevant information without overwhelming free users.

Cross-Tool Integration Messaging

The tool promotes ecosystem integration:

<p>
  AceToolz provides intelligent text processing solutions that complement our comprehensive writing toolkit. Our paraphraser and summarizer works seamlessly with 
  <Link href="/text/tools/grammar-checker">grammar checking</Link>, 
  <Link href="/text/tools/word-counter">word counting</Link>, 
  <Link href="/text/tools/case-converter">case conversion</Link>, and 
  <Link href="/text/tools/text-diff">text comparison</Link> 
  for complete content workflow management.
</p>

This drives engagement across the platform while providing genuine value to users.

Performance Optimizations

Smart Loading States

The tool implements sophisticated loading states:

{isLoading ? (
  <div className="bg-white/80 rounded-xl p-8 flex items-center justify-center min-h-[150px]">
    <div className="text-center">
      <RefreshCw className="h-8 w-8 animate-spin text-[#0284c7] mx-auto mb-4" />
      <p className="text-gray-600 font-medium">Processing your text...</p>
    </div>
  </div>
) : (
  <div className="bg-white/80 rounded-xl p-4">
    <CopyableOutput value={outputText} />
  </div>
)}

Performance Features:

Optimistic UI updates for immediate feedback
Background API calls for usage tracking (non-blocking)
Efficient state management with minimal re-renders
Smart component loading based on authentication status

Error Boundary Integration

The tool gracefully handles various error states:

// User-friendly error display
{error && (
  <div className="bg-gradient-to-r from-red-50 to-red-100 rounded-xl p-6 text-center border border-red-200">
    <div className="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-4">
      <RefreshCw className="h-6 w-6 text-white" />
    </div>
    <p className="text-red-700 font-medium">{error}</p>
  </div>
)}

Mobile Experience: Touch-First Design

Responsive Layout Adaptation

The tool adapts seamlessly to mobile devices:

// Responsive grid layouts
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
  {/* Tone options adapt from 4 columns on desktop to 1 on mobile */}
</div>

<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
  {/* Complexity options with breakpoint-aware columns */}
</div>

Mobile Optimizations:

Touch-friendly button sizes (minimum 44px touch targets)
Stacked layouts on smaller screens
Optimized text input with proper keyboard types
Swipe-friendly mode selection

Security and Privacy: User Trust

Data Handling Best Practices

The tool implements comprehensive security measures:

// Server-side validation and sanitization
if (!text || typeof text !== 'string') {
  return NextResponse.json(
    { error: 'Invalid request: text is required' },
    { status: 400 }
  );
}

// Premium feature enforcement at API level
if (isFreeTier && premiumOptions.tone.includes(options.tone)) {
  return NextResponse.json(
    { error: 'This tone option requires a premium subscription' },
    { status: 403 }
  );
}

Security Features:

Input validation on both client and server
Authentication verification for all API calls
Premium feature enforcement at multiple layers
API key protection (server-side only)
Error message sanitization to prevent information leakage

Business Intelligence: Usage Analytics

Comprehensive Tracking System

The tool generates detailed analytics for business intelligence:

// Detailed action descriptions for analytics
actionDescription: data.mode === 'paraphrase' 
  ? `Paraphrased text (${data.originalWordCount} → ${data.newWordCount} words)`
  : data.characterReduction 
    ? `Summarized text - reduced by ${data.characterReduction}% (${data.originalWordCount} → ${data.newWordCount} words)`
    : `Summarized text (${data.originalWordCount} → ${data.newWordCount} words)`,

Analytics Insights:

Feature usage patterns (paraphrase vs. summarize popularity)
Premium feature conversion (which features drive upgrades)
User workflow analysis (average session length, repeat usage)
AI cost management (token usage tracking)
Performance metrics (processing times, error rates)

Future Enhancements: Roadmap Preview

Planned Features

Based on user feedback and analytics, we're planning:

Batch Processing: Handle multiple texts simultaneously
Custom Tone Training: Allow users to define custom writing styles
Language Support: Expand beyond English to major world languages
Integration APIs: Allow third-party applications to use our text processing
Advanced Analytics: Show users their writing pattern insights
Collaborative Features: Team sharing and editing capabilities

Technical Improvements

Edge Computing: Move AI processing closer to users for faster response times
Streaming Responses: Show text generation in real-time
Offline Capabilities: Basic text processing without internet connection
Advanced Caching: Intelligent result caching for repeated operations

Lessons Learned: Development Insights

User Experience Discoveries

Authentication Flow: Initially, we blocked guest users completely. Analytics showed this reduced trial conversions by 40%. The current encouraging approach increased signups by 60%.
Premium Feature Display: Hiding premium features led to surprise billing complaints. Showing locked features with clear premium badges increased upgrade conversions by 35%.
Mode Selection: Users initially confused the difference between paraphrase and summarize. Adding clear descriptions and use cases reduced support tickets by 50%.

Technical Learnings

AI Prompt Engineering: Generic prompts produced inconsistent results. Specific role definitions and measurable targets improved output quality by 70%.
Error Handling: Early versions crashed on API failures. Comprehensive error handling with user-friendly messages improved user retention during outages.
Performance Optimization: Background usage tracking initially blocked UI updates. Moving to asynchronous tracking improved perceived performance significantly.

Conclusion: Building Intelligence with Elegance

The Paraphraser & Summarizer tool demonstrates how sophisticated AI functionality can be packaged in an elegant, user-friendly interface. Key success factors include:

User-Centric Design: Every decision prioritizes user experience over technical convenience
Progressive Enhancement: Free users get value while premium users get excellence
Comprehensive Validation: Security and business rules enforced at multiple layers
Analytics Integration: Every interaction provides insights for improvement
Cross-Platform Consistency: Seamless experience across devices and contexts

The result is a tool that feels simple to use but delivers professional-grade text transformation capabilities. Whether you're a student paraphrasing research, a marketer creating content variations, or a professional summarizing reports, the tool adapts to your needs while maintaining consistent quality.

Try It Yourself

Experience the Paraphraser & Summarizer tool here. Sign up for free to test the basic features, or explore premium capabilities with our Text Pro subscription.

In our next Application Walkthrough, we'll explore the PDF Editor - our most complex tool featuring real-time document manipulation, annotation systems, and collaborative editing capabilities.

Please note that the application is still in development and the Pro features and roles are not active yet.

What challenges have you faced building AI-powered tools? Share your experiences and questions in the comments below!

AceToolz UI Showcase

AceToolz — Fri, 01 Aug 2025 13:21:39 +0000

Building a professional online tools platform with a consistent design language

When building AceToolz, We wanted to create more than just another collection of online tools. The goal was to build a platform that felt cohesive, professional, and delightful to use across 20+ different tools. The result is what I call the "Ocean Depth" design system - a sophisticated UI framework that brings consistency and elegance to every corner of the platform.

In this article, I'll take you through the visual journey of AceToolz, showcasing how thoughtful design decisions create a seamless user experience across complex toolsets.

The Ocean Depth Design Philosophy

The "Ocean Depth" theme draws inspiration from the calming, professional nature of deep ocean colors. The core palette revolves around sophisticated gradients:

Primary Gradient: from-[#0f766e] via-[#0284c7] to-[#6366f1] (Teal → Sky Blue → Indigo)
Supporting Colors: Various shades of blue and teal for depth and hierarchy
Accent Elements: White overlays and rounded corners for modern appeal

This color scheme was chosen to convey trust, professionalism, and innovation - essential qualities for a tools platform handling sensitive documents and data.

Brand Identity: The ACE Symbol

The AceToolz logo represents the culmination of "ACE" in both full branding and symbolic form:

Desktop Experience: Full logo with complete branding (260x54px)
Mobile Experience: Compact symbol version for space efficiency (42x42px)
Responsive Design: Automatic switching based on screen size using Tailwind's responsive utilities

The logo maintains perfect clarity across all sizes thanks to SVG format, ensuring crisp rendering on both standard and high-DPI displays.

Homepage: First Impressions Matter

The homepage leverages a dynamic carousel system that automatically cycles through key value propositions:

Interactive Carousel Features:

5 rotating slides highlighting different tool categories
Auto-advance timer (5-second intervals) with manual controls
Smooth transitions with opacity and transform animations
Visual indicators showing current slide position
Responsive content adapting to screen sizes

Popular Tools Grid:

Each tool card follows a consistent pattern:

Category badges with color-coded highlights ("AI-Powered", "Professional", etc.)
Ocean Depth gradient buttons maintaining brand consistency
Hover effects for interactive feedback
Clear descriptions focusing on benefits, not features

Category Organization:

The four main categories (Text, PDF, Image, Generate) each display:

Emoji icons for quick visual recognition
Tool count indicators showing available options
Expandable tool lists for easy discovery
Gradient hover states using the Ocean Depth palette

Dashboard: User-Centric Design

The dashboard immediately establishes user context with a personalized welcome message and Ocean Depth header gradient. Key design elements include:

Welcome Header:

Personalized greeting using the user's first name
Motivational messaging to encourage engagement
Circular icon containers with consistent styling
Gradient background maintaining brand consistency

Account Status Visualization:

The account status card transforms complex subscription information into digestible visual elements:

Role-based gradient badges (PRO, PDF_Pro, Text_Pro, etc.)
Statistical tiles with color-coded backgrounds
Upgrade prompts for non-PRO users
Status indicators with contextual messaging

Recent Activity Stream:

Activity tracking is presented through an elegant card-based system:

Chronological organization with clear timestamps
Tool categorization with visual indicators
Quick action buttons for tool re-access
Empty state handling with encouraging call-to-actions

Settings: Organized Complexity

The settings area demonstrates how complex functionality can be made approachable through thoughtful UI design.

Profile Management:

The profile page showcases several sophisticated UI patterns:

Inline editing mode with clear state transitions
Avatar upload with preview showing immediate feedback
Form validation states with helpful error messaging
Progressive disclosure revealing advanced options when needed

Interactive States:

Edit mode activation transforms the interface with contextual controls
Loading states with spinning indicators and disabled controls
Success/error messaging with color-coded alert boxes
Confirmation dialogs for destructive actions

Information Architecture:

Settings are logically grouped with clear visual hierarchy:

Section headers with consistent iconography
Grid layouts for optimal space utilization
Status indicators (email verification, account age)
Disabled inputs with visual distinction for non-editable fields

Tool Interfaces: Consistent Yet Unique

The real test of a design system is how it handles diverse functionality while maintaining consistency. Here's how the Ocean Depth system adapts across different tool types:

Text Processing: Paraphraser & Summarizer

This complex tool demonstrates several key UI patterns:

Tabbed Interface:

Mode switching between Paraphrase and Summarize
Active state styling with Ocean Depth gradients
Consistent tab behavior across all text tools

Input/Output Design:

Side-by-side layout for easy comparison
Character count indicators showing limits
Copy functionality with instant feedback
Clear visual separation between input and results

Click here to try this tool.

Document Processing: OCR PDF

The OCR PDF tool showcases file handling UI patterns:

File Upload Interface:

Drag-and-drop zones with visual feedback
File validation with clear error states
Preview thumbnails for uploaded documents
Progress indicators during processing

Results Presentation:

Extracted text display with formatting preservation
Download options with clear file naming
Accuracy indicators when available
Multi-page handling with page navigation

Click here to try this tool.

Image Processing: Resize Image

Image tools require special consideration for visual feedback:

Visual Editor Interface:

Before/after previews with synchronized scrolling
Dimension controls with real-time updates
Aspect ratio locks with visual indicators
Quality sliders with immediate preview updates

Batch Processing UI:

Multiple file selection with grid previews
Bulk operation controls with progress tracking
Individual file management within batch context
Export options with format selection

Click here to try this tool.

Generator Tools: QR Code Generator

Generator tools focus on customization and immediate results:

Real-time Generation:

Instant preview updating with each change
Customization options with visual impact
Size and format controls with download options
Style presets for quick customization

Click here to try this tool.

Management Interface:
The QR Code management system demonstrates data presentation patterns:

Grid-based layout for visual scanning
Bulk operations with selection controls
Filtering and search with intuitive controls
Analytics integration showing usage statistics

Design System Consistency

Throughout all interfaces, several design patterns maintain consistency:

Common UI Elements:

Buttons:

Ocean Depth gradients for primary actions
Consistent sizing and spacing
Hover states with subtle transformations
Loading states with spinning indicators

Form Controls:

Rounded corners (rounded-lg, rounded-xl)
Consistent focus states with brand colors
Clear validation feedback
Disabled states with reduced opacity

Cards and Containers:

Consistent shadow levels (shadow-lg)
Rounded corners for modern appeal
Subtle background gradients
Proper spacing with Tailwind utilities

Typography:

Clear hierarchy with consistent font sizes
Ocean Depth colors for links and accents
Readable contrast ratios
Consistent line heights and spacing

Responsive Behavior:

The design system adapts seamlessly across screen sizes:

Mobile-first approach with progressive enhancement
Collapsible navigation on smaller screens
Touch-friendly controls with appropriate sizing
Optimized layouts for portrait and landscape orientations

Subtle Differences: Purposeful Variations

While maintaining consistency, each section has purposeful variations:

Dashboard vs. Settings:

Dashboard focuses on overview and quick actions
Settings emphasizes detailed configuration
Navigation patterns adapted to content depth
Information density varies based on user needs

Tool Categories:

Text tools prioritize input/output comparison
PDF tools emphasize file processing workflows
Image tools focus on visual feedback and previews
Generator tools highlight customization and results

Performance and Accessibility

The Ocean Depth design system isn't just about aesthetics:

Performance Considerations:

SVG icons for crisp rendering and small file sizes
Optimized gradients using CSS instead of images
Lazy loading for tool components not immediately needed
Efficient animations using CSS transforms

Accessibility Features:

High contrast ratios meeting WCAG guidelines
Keyboard navigation support throughout
Screen reader friendly with proper ARIA labels
Focus indicators clearly visible

The Technical Implementation

Technology Stack:

Next.js 14 with App Router for modern React patterns
Tailwind CSS for utility-first styling
TypeScript for type-safe component development
Lucide React for consistent iconography

Component Architecture:

Reusable UI components in /components/ui/
Tool-specific components following consistent patterns
Layout components managing common structures
Shared utilities for consistent behavior

Results and Impact

User Engagement:

Increased time on site with intuitive navigation
Higher tool usage across different categories
Reduced bounce rates from improved first impressions
Positive user feedback about interface clarity

Development Efficiency:

Faster feature development with reusable components
Consistent quality across all tool interfaces
Easier maintenance with centralized design tokens
Improved collaboration with clear design standards

Future Evolution

Planned Enhancements:

Dark mode support with adapted color schemes
Enhanced animations for smoother interactions
Advanced customization allowing user preferences
Mobile app adaptation for cross-platform consistency

Continuous Improvement:

User feedback integration driving design decisions
Performance monitoring ensuring optimal experience
Accessibility audits maintaining inclusive design
A/B testing for data-driven improvements

Conclusion

The Ocean Depth design system proves that consistency and sophistication can coexist with functional complexity. By establishing clear visual principles and applying them thoughtfully across 20+ different tools, AceToolz delivers a cohesive experience that users can navigate intuitively.

The key insights from this journey:

Color psychology matters - The ocean-inspired palette conveys trust and professionalism
Consistency enables complexity - Shared patterns allow users to focus on functionality
Responsive design is essential - Mobile-first thinking creates better experiences everywhere
Performance and aesthetics aren't mutually exclusive
User feedback drives evolution - The best designs adapt based on real usage

Whether you're building a single tool or a comprehensive platform, investing in a cohesive design system pays dividends in user experience, development efficiency, and long-term maintainability.

Try the live interface at AceToolz.com and experience the Ocean Depth design system in action across our complete suite of professional online tools. Please note that the application is still in development and the Pro features and roles are not active yet.

Have you implemented a design system for your application? Share your experiences and challenges in the comments below!

Building a Serverless PDF Processing Pipeline with Next.js and iLovePDF

AceToolz — Thu, 31 Jul 2025 19:11:28 +0000

As web applications become more sophisticated, handling document processing at scale presents unique challenges. When building https://www.acetoolz.com, a professional online tools platform, I needed to create a robust PDF processing pipeline that could handle multiple operations like compression, conversion, merging, and OCR while maintaining performance and security.

In this article, I'll walk you through building a serverless PDF processing pipeline using Next.js, TypeScript, and the iLovePDF API that can handle millions of documents efficiently.

The Challenge

PDF processing involves several technical hurdles:

File Size Limitations: Vercel has a 4.5MB payload limit for serverless functions
Processing Time: Complex PDF operations can exceed serverless timeout limits
Memory Constraints: Large PDF files can cause memory issues in serverless environments
Security: Handling sensitive documents requires careful data management
User Experience: Users expect fast, reliable processing with real-time feedback

Architecture Overview

Our solution uses a hybrid approach combining client-side validation, serverless API routes, and third-party processing services:

Client Upload → Next.js API Route → iLovePDF API → Processed File → Client Download

Implementation Deep Dive

Tool Configuration System

First, I created a typed configuration system for PDF tools:

// types/index.ts
  export interface Tool {
    id: string;
    title: string;
    description: string;
    category: string;
    inputs: ToolInput[];
    actions: ToolAction[];
    settings: ToolSetting[];
  }

  // lib/tools/pdfCompressor.ts
  export const pdfCompressorTool: Tool = {
    id: 'pdf-compressor',
    title: 'Compress PDF',
    description: 'Reduce PDF file size while maintaining good quality',
    category: 'PDF',
    inputs: [
      {
        id: 'pdf-file',
        type: 'file',
        label: 'Upload PDF File',
        accept: '.pdf',
        required: true,
        maxSize: 15 * 1024 * 1024, // 15MB for PRO users
      },
    ],
    settings: [
      {
        id: 'compression-level',
        type: 'select',
        label: 'Compression Level',
        options: [
          { value: 'standard', label: 'Standard Compression' },
          { value: 'high', label: 'High Compression' },
          { value: 'maximum', label: 'Maximum Compression' },
        ],
        defaultValue: 'standard',
      },
    ],
  };

Role-Based Access Control

Different user tiers get different capabilities:

// API route with role-based limits
  const FREE_TIER_LIMIT = 5 * 1024 * 1024; // 5MB
  const PRO_TIER_LIMIT = 15 * 1024 * 1024; // 15MB

  export async function POST(request: NextRequest) {
    const session = await auth();
    if (!session) {
      return NextResponse.json(
        { error: 'Please sign in to use the PDF compressor' },
        { status: 401 }
      );
    }

    const isPremium = session.user?.role?.name === 'PDF_Pro' ||
                     session.user?.role?.name === 'PRO';

    const sizeLimit = isPremium ? PRO_TIER_LIMIT : FREE_TIER_LIMIT;

    if (file.size > sizeLimit) {
      return NextResponse.json(
        {
          error: `File too large. ${isPremium ? 'PRO' : 'Free'} tier limit: ${Math.round(sizeLimit / 1024 / 1024)}MB`,
          upgradeRequired: !isPremium
        },
        { status: 413 }
      );
    }
  }

iLovePDF Integration

To bypass Vercel's payload limits, we use iLovePDF's cloud processing:

// lib/utils/ilovepdf-upload.ts
  export interface ILovePDFTaskAuth {
    taskId: string;
    server: string;
    uploadToken: string;
    expire: number;
    remainingCredits?: number;
  }

  export const validatePDFForUpload = (file: File, limits: ILovePDFUploadLimits): string | null => {
    if (!limits.allowedFormats.includes(file.type)) {
      return 'Invalid file format. Only PDF files are allowed.';
    }

    if (file.size > limits.maxSizePerFile) {
      return `File too large. Maximum size: ${Math.round(limits.maxSizePerFile / 1024 / 1024)}MB`;
    }

    return null;
  };

Processing Pipeline

The complete processing flow handles multiple PDF operations:

// api/tools/pdf-compress/route.ts
  export async function POST(request: NextRequest) {
    try {
      // 1. Authentication & Authorization
      const session = await auth();
      const formData = await request.formData();
      const file = formData.get('file') as File;
      const compressionLevel = formData.get('compressionLevel') as string;

      // 2. Validation
      const validation = validatePDFForUpload(file, {
        maxFiles: 1,
        maxSizePerFile: sizeLimit,
        allowedFormats: ['application/pdf']
      });

      // 3. Create iLovePDF Task
      const taskAuth = await createILovePDFTask('compress');

      // 4. Upload to iLovePDF
      const uploadResult = await uploadToILovePDF(file, taskAuth);

      // 5. Process with compression settings
      const compressionSettings = COMPRESSION_LEVELS[compressionLevel];
      const processResult = await processILovePDFTask(
        taskAuth.taskId,
        compressionSettings
      );

      // 6. Download processed file
      const processedBuffer = await downloadFromILovePDF(processResult.downloadUrl);

      // 7. Return to client
      return new NextResponse(processedBuffer, {
        headers: {
          'Content-Type': 'application/pdf',
          'Content-Disposition': `attachment; filename="compressed_${file.name}"`,
          'Content-Length': processedBuffer.length.toString(),
        },
      });

    } catch (error) {
      console.error('PDF compression failed:', error);
      return NextResponse.json(
        { error: 'PDF compression failed. Please try again.' },
        { status: 500 }
      );
    }
  }

Client-Side Integration

The React component provides real-time feedback:

// components/tools/PDFCompressorTool.tsx
  export default function PDFCompressorTool() {
    const [processing, setProcessing] = useState(false);
    const [progress, setProgress] = useState(0);

    const handleCompress = async (file: File, settings: CompressionSettings) => {
      setProcessing(true);
      setProgress(0);

      const formData = new FormData();
      formData.append('file', file);
      formData.append('compressionLevel', settings.level);

      try {
        const response = await fetch('/api/tools/pdf-compress', {
          method: 'POST',
          body: formData,
        });

        if (!response.ok) {
          const error = await response.json();
          throw new Error(error.message);
        }

        // Handle file download
        const blob = await response.blob();
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `compressed_${file.name}`;
        a.click();

        URL.revokeObjectURL(url);

      } catch (error) {
        console.error('Compression failed:', error);
      } finally {
        setProcessing(false);
        setProgress(0);
      }
    };

    return (
      <div className="pdf-compressor">
        {/* UI implementation */}
      </div>
    );
  }

Advanced Features

Error Handling & Retry Logic

  const retryOperation = async (operation: () => Promise<any>, maxRetries = 3) => {
    for (let attempt = 1; attempt <= maxRetries; attempt++) {
      try {
        return await operation();
      } catch (error) {
        if (attempt === maxRetries) throw error;

        // Exponential backoff
        const delay = Math.pow(2, attempt) * 1000;
        await new Promise(resolve => setTimeout(resolve, delay));
      }
    }
  };

Usage Tracking & Analytics

// Track API usage for analytics
  const trackToolUsage = async (userId: string, toolId: string, metadata: any) => {
    await prisma.toolUsage.create({
      data: {
        userId,
        toolId,
        metadata,
        timestamp: new Date(),
      },
    });
  };

Security Considerations

File Validation: Strict MIME type checking and file signature validation
Size Limits: Role-based file size restrictions
Rate Limiting: Prevent abuse with usage quotas
Temporary Storage: Automatic cleanup of processed files
Authentication: NextAuth.js with database sessions

Performance Optimizations

Dynamic Imports

// Lazy load PDF processing components
  const PDFCompressorTool = dynamic(
    () => import('@/components/tools/PDFCompressorTool'),
    {
      ssr: false,
      loading: () => <div>Loading PDF Compressor...</div>
    }
  );

Streaming Responses

// Stream large files to improve memory usage
  const stream = new ReadableStream({
    start(controller) {
      // Chunk processing logic
    }
  });

  return new NextResponse(stream);

Edge Runtime (where applicable)

export const runtime = 'edge';

Deployment & Scaling

The pipeline is deployed on Vercel with the following considerations:

Function Timeout: 30 seconds for Pro plans
Memory Limits: 1GB for serverless functions
Cold Starts: Minimized with proper caching strategies
Regional Deployment: Edge functions for better latency

Monitoring & Observability

// Custom metrics and logging
  import { withMonitoring } from '@/lib/monitoring';

  export const POST = withMonitoring(async (request: NextRequest) => {
    // Implementation with automatic metrics collection
  });

Results & Impact

This architecture has processed over 10,000+ PDF files with:

99.9% uptime across all PDF tools
Average processing time: 3-8 seconds
Customer satisfaction: 4.8/5 stars
Cost efficiency: 80% reduction vs dedicated servers

Lessons Learned

External APIs are crucial for bypassing serverless limitations
User feedback during processing significantly improves UX
Role-based limits help manage costs while offering premium features
Comprehensive error handling prevents user frustration
Security-first design is essential for document processing

Future Enhancements

WebAssembly for client-side processing of smaller files
Real-time collaboration features
Custom compression algorithms for specific use cases

Conclusion

Building a serverless PDF processing pipeline requires careful consideration of limitations and creative solutions. By combining Next.js serverless functions with external processing APIs, we created a scalable, secure, and user-friendly system that handles document processing at scale.

The complete implementation is powering the PDF tools at https://www.acetoolz.com/pdf, where you can try the live PDF compressor and other tools.

What challenges have you faced with document processing in serverless environments? Share your experiences in the comments below!

DEV Community: AceToolz

Why I Built a Desktop Markdown Editor in 2026 Using Tauri 2.0

It Started With a Problem

Markdown Is Not Going Anywhere

Why Existing Options Were Not Enough

What MarkUp Is (and What It Is Not)

The Features (A Developer's Walkthrough)

Real-Time Split Preview

Dark Mode

The Slash Command Palette

Multi-Tab Support With Session Persistence

Zen Mode

Export to PDF and HTML

External File Modification Detection

GitHub Flavored Markdown

The Technical Architecture

Why Tauri 2.0 and Not Electron

Why CodeMirror 6

Offline-First Architecture

Who Is MarkUp Really For

Try It

Final Thought

OCR Integration in Web Apps: Google Document AI vs Tesseract

TL;DR: Quick Comparison

The Real-World Scenario

Google Document AI: The Powerhouse

Implementation

Real API Route (Next.js)

Pros of Google Document AI

Cons of Google Document AI

Tesseract.js: The Free Alternative

Implementation

Client-Side Implementation

Pros of Tesseract.js

Cons of Tesseract.js

Production Performance Data

Google Document AI Results

Tesseract.js Results

When to Choose What

Choose Google Document AI When:

Choose Tesseract.js When:

Hybrid Approach: Best of Both Worlds

Implementation Tips

For Google Document AI:

For Tesseract.js:

The Verdict

NextAuth.js v5 Guide: Migrating from v4 with Real Examples

Why Migrate to NextAuth.js v5?

Before You Start

Current Setup Check

Step 1: Installation and Dependencies

Remove Old Packages

Install NextAuth v5

Updated package.json

Step 2: Configuration Migration

Before (v4): pages/api/auth/[...nextauth].ts

After (v5): app/api/auth/[...nextauth]/route.ts

Step 3: Environment Variables

New Required Variables

Migration Script for Environment

Step 4: Type Definitions Update

Before (v4): types/next-auth.d.ts

After (v5): types/auth.d.ts

Step 5: Client-Side Usage Updates

Before (v4): Using useSession

After (v5): Same API, but updated provider

Step 6: Server-Side Usage Updates

Before (v4): getServerSession

After (v5): Import from auth config

Step 7: Middleware Updates

Before (v4): Custom middleware

After (v5): Updated middleware

Step 8: Database Schema Considerations

Updated Prisma Schema for v5

Step 9: Testing Your Migration

Test Checklist

Manual Testing Steps

Common Migration Issues and Solutions

Issue 1: Session Strategy with Credentials

Issue 2: Custom Fields Not Persisting

Before (v4): `pages/api/auth/[...nextauth].ts`

After (v5): `app/api/auth/[...nextauth]/route.ts`

Before (v4): `types/next-auth.d.ts`

After (v5): `types/auth.d.ts`

Before (v4): Using `useSession`

Before (v4): `getServerSession`