Hadi Rizvi

Posted on May 6

How I Built a Free AI Tools Website With Next.js and Groq API

#ai #webdev #programming #productivity

I Built a Free AI Writing Tools Platform in a Weekend — Here’s Exactly How

Last weekend, I built and deployed a completely free AI writing tools platform called Textora. There are no paywalls, no word limits, and no account required.

Here’s a clear breakdown of what I built, how I built it, and what I learned along the way.

The Problem

Most AI writing tools today come with frustrating limitations:

QuillBot restricts free paraphrasing to around 125 words
Many “AI humanizers” charge $15–$20 per month
Several tools require signups just to try basic features

I wanted to build something genuinely useful — fully free, unlimited, and easy to access.

The Result

textora.org — a platform with 15 free AI writing tools
Built using Next.js 14, powered by the Groq API, and deployed at no cost

Tech Stack Breakdown

Framework: Next.js 14 (App Router + TypeScript)

I used the App Router because it provides a clean separation of concerns:

Server Components for static pages and SEO
Client Components for interactive tools
API Routes for all AI processing

This structure made the project easier to organize and scale.

AI Layer: Groq API (Llama 3.1 8B Instant)

This was one of the most effective choices in the project.

Response times average around 2–3 seconds
The free tier is generous
Output quality is reliable for writing tasks

Here’s the base pattern used across all AI tools:

import Groq from "groq-sdk"

const groq = new Groq({
  apiKey: process.env.GROQ_API_KEY
})

export async function POST(req: Request) {
  const { text, tone } = await req.json()

  const completion = await groq.chat.completions.create({
    messages: [
      {
        role: "user",
        content: `Rewrite the following text to sound natural and human. 
Tone: ${tone}. Return only the rewritten text:

${text}`
      }
    ],
    model: "llama-3.1-8b-instant",
    temperature: 0.7,
    max_tokens: 2048,
  })

  const result = completion.choices[0]?.message?.content || ""

  return Response.json({ result })
}

Each tool follows this same structure, with only the prompt changing.

Styling: Tailwind CSS + Custom Design System

I created a simple but consistent design system:

Indigo as the primary accent
Deep navy for darker sections
A clean white base

CSS variables and an extended Tailwind configuration were used for reusable design tokens.

Storage: Vercel Blob (for Blog System)

Blog posts are stored as JSON in private Blob storage
A full admin dashboard is built with NextAuth and Google OAuth
CRUD operations are handled through API routes

Rate Limiting: Upstash Redis

To prevent abuse:

import { Ratelimit } from "@upstash/ratelimit"
import { Redis } from "@upstash/redis"

const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(10, "1h"),
})

const ip = req.headers.get("x-forwarded-for") || "anonymous"
const { success } = await ratelimit.limit(ip)

if (!success) {
  return Response.json(
    { error: "Rate limit exceeded" },
    { status: 429 }
  )
}

This approach is simple and effective.

Deployment: Vercel (Free Tier)

Zero-configuration deployment for Next.js
Custom domain via Namecheap
Automatic SSL

Total infrastructure cost: $0

The 15 Tools

AI-Powered Tools

AI Humanizer
AI Detector
Paraphraser
Grammar Checker
Text Summarizer
Sentence Rewriter
Email Writer
Blog Title Generator
Meta Description Generator
Passive to Active Voice Converter

Utility Tools (Frontend Only)

Word Counter
Character Counter
Case Converter
Reading Time Estimator
Text Cleaner

The frontend tools were straightforward to build.

The AI tools all use the same backend pattern, but prompt design made a significant difference in output quality.

What I’d Do Differently

1. Prompt Engineering Takes Time

Getting consistent output required more effort than expected.

Models often add extra text or formatting
You need to clearly define the expected output format every time

The grammar checker was particularly challenging, especially when trying to return structured error data reliably.

2. SEO Is Not a Quick Setup

This part took longer than anticipated.

Tasks included:

Building a dynamic sitemap (including blog posts)
Adding metadata for every page
Implementing JSON-LD structured data

SEO alone took nearly a full day.

Final Thoughts

You don’t need a large budget to build something useful
Iteration speed matters more than perfection
Well-crafted prompts are just as important as clean code

The platform is live at textora.org

All 15 tools are available with no login and no limits.

If you’re working on something similar or have questions about the stack, feel free to reach out.

DEV Community