TextTools

Modern text utilities for developers and creators. Analyze text in real time and format JSON instantly with a smooth, mobile-first experience.

Live Demo

Try it here: word-counter-arnav112-dev.vercel.app 🚀

Features

• Real-time word and character analysis
• JSON formatter and minifier
• Dedicated routes for each tool (/word-counter, /json-formatter)
• Shared responsive layout with desktop and mobile navigation
• Auto-format JSON while typing or pasting
• Quick actions: copy, clear, and download output
• Mobile responsive UI across screen sizes
• Smooth animations and thoughtful micro-interactions
• SEO-optimized structure for better discoverability

Screenshots

Tech Stack

• React (Vite + TypeScript)
• Tailwind CSS
• Framer Motion
• shadcn/ui

Getting Started

Prerequisites

• Node.js 18+
• npm

Installation

npm install

Run Locally

npm run dev

App runs at http://localhost:5173 by default.

Production Build

npm run build
npm run preview

Usage

• Open the app landing page (/) and choose a tool.
• Word/Character Counter: Type or paste text to see metrics update in real time.
• JSON Formatter: Paste JSON to auto-format, then copy, clear, minify, or download as needed.

Project Structure

text-tools/
├── public/              # Static assets (SEO files, public metadata)
├── src/
│   ├── components/      # Reusable layout, UI, and tool components
│   │   ├── Layout.tsx   # Shared app header/navigation + content wrapper
│   │   ├── tools/       # Feature tools (CharacterCounter, JsonFormatter)
│   │   └── ui/          # shadcn/ui component library
│   ├── hooks/           # Custom React hooks
│   ├── lib/             # Utility logic (text/json helpers)
│   ├── pages/           # Route pages (Home, WordCounter, JsonFormatter, NotFound)
│   ├── App.tsx          # Router + providers
│   └── main.tsx         # Vite entry point
├── index.html
├── package.json
└── vite.config.ts

Future Improvements

• Add more text tools (case converter, diff checker, slug generator)
• Add history and saved snippets
• Add export options (PDF/Markdown)
• Improve accessibility and keyboard navigation
• Add multilingual UI support

Contributing

Contributions are welcome. Please open an issue first so we can align on scope and approach.

# 1) Fork the repo
# 2) Create your feature branch
git checkout -b feature/your-feature

# 3) Commit your changes
git commit -m "feat: add your feature"

# 4) Push and open a PR
git push origin feature/your-feature

License

Licensed under MIT.

Author

Built with care by Arnav Raj ✨
GitHub: arnav-1124