Skip to content

MrAkbari91/text-transform-nextjs

Repository files navigation

🌐 TextTransformer

A comprehensive web application built with Next.js, featuring AI-powered tools for text manipulation, formatting, and conversion. Transform, beautify, minify, and convert text effortlessly using modern web technologies and artificial intelligence.


✨ Features

🔧 Core Functionality

  • Text Input & Output
    Clean, user-friendly interface for inputting and viewing transformed text.

  • Text Transformations

    • Lowercase / Uppercase / Title Case
    • Slug Case
    • Remove extra spaces / empty lines
    • Invert / Reverse text
    • URL Encoding / Decoding
  • Speech-to-Text
    Browser-based speech recognition for hands-free text input.

  • Text Statistics
    Real-time:

    • Word count
    • Sentence count
    • Line count
    • Space count
    • Estimated reading time
  • Copy & Download
    Easily copy the transformed text or download it as a file.

  • Notifications
    Toast notifications for user actions and feedback.


🧰 Dedicated Tools

  • CSS Formatter & Minifier
    Beautify or minify CSS using AI.

  • HTML Formatter
    Format and clean up messy HTML.

  • JSON Formatter
    Validate and format JSON data with error checking.

  • Binary Converter
    Convert text to/from binary code.

  • Morse Code Converter
    Encode or decode Morse code.

  • URL Encoder/Decoder
    Convert text to/from URL-safe strings.

  • MD5 Generator
    Generate MD5 hashes instantly.

  • Image to Base64
    Upload and convert images to base64 strings.

  • QR Code Generator
    Create QR codes from text input.

  • Reverse Text
    Flip your text backward character by character.

  • Text Cleanup
    Sanitize messy or unstructured text.

  • Password Generator
    Generate secure, random passwords with customizable options.

  • Find & Replace
    Search and replace any text or patterns with ease.


⚙️ Technical Features

  • AI-Powered Processing
    Integrates Google Genkit for advanced AI-driven transformations.

  • Responsive Design
    Fully responsive UI for desktop and mobile.

  • Dark/Light Theme
    Toggle between light and dark modes for visual comfort.

  • Modern UI/UX
    Built with Tailwind CSS and Radix UI for a sleek, intuitive experience.


🛠️ Installation

📋 Prerequisites

  • Node.js (v18+)
  • npm or bun (package manager)

🚀 Setup

  1. Clone the repository

    git clone <repository-url>
    cd text-google
    
    
  2. Install dependencies

    Using npm:

    npm install

    Using bun:

    bun install
  3. Set up environment variables Create a .env.local file in the root directory and add your Firebase & Google AI configuration:

    # Firebase configuration
    NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
    NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
    NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
    
    # Google AI configuration
    GOOGLE_GENAI_API_KEY=your_google_ai_api_key
  4. Start the development server

    npm run dev
    # or
    bun run dev

    ➡️ App will be available at: http://localhost:9002


📦 Build for Production

npm run build
npm run start

📜 Scripts

  • npm run lint — Run ESLint for code linting
  • npm run typecheck — Run TypeScript type checking
  • npm run genkit:dev — Start Genkit development server
  • npm run genkit:watch — Start Genkit in watch mode

🧪 Usage Guide

🏠 Main Interface

  • Input text manually or via speech-to-text
  • Apply transformations using intuitive buttons
  • View real-time text statistics
  • Copy or download results instantly

🧩 Tool Pages

  • Navigate via the sidebar/menu
  • Each tool includes instructions and options
  • AI-enhanced processing for supported tools
  • Output can be copied or downloaded

🧱 Technology Stack

Tech Description
Frontend Next.js 15, React 18, TypeScript
Styling Tailwind CSS, Radix UI
AI Google Genkit, Firebase Integration
Forms React Hook Form + Zod Validation
Icons Lucide React
State React Hooks (useState, useEffect, etc)

🤝 Contributing

  1. Fork the repository
  2. Create your feature branch: git checkout -b feature/your-feature
  3. Commit your changes: git commit -m 'Add your message'
  4. Push to the branch: git push origin feature/your-feature
  5. Open a pull request 🚀

📄 License

This project is licensed under the MIT License.

About

AI-powered text manipulation toolkit built with Next.js and Google Genkit, featuring 15+ tools for formatting, converting, and transforming text

Topics

Resources

Stars

Watchers

Forks

Contributors