AIO Converter

AIO Converter is an all-in-one, privacy-friendly toolbox of everyday converters — built with React and Tailwind CSS. Everything runs locally in your browser: no accounts, no file uploads to a server, no tracking.

🇻🇳 Đọc bằng tiếng Việt: README.vi.md

Live features

• 9 conversion tools in one clean interface
• Bilingual — English and Vietnamese, switchable anytime
• Light / Dark / System theme, remembered per device
• Favorites — star the tools you use most, they show up on the home page
• Installable PWA — add it to your home screen and use it offline
• Fully responsive — polished on mobile, tablet and desktop
• No emoji, real icons — a consistent lucide-react icon set throughout
• Be Vietnam Pro typeface across the whole interface

Tools included

Tool	What it does
🖼 Image Converter	Convert PNG / JPG / WEBP / BMP, resize, adjust quality — all on-device via Canvas
📁 File Converter	File ⇄ Base64, and JSON ⇄ CSV
🎨 Color Converter	HEX, RGB, HSL, HSB, CMYK with live preview, picker and shade palette
💱 Currency Converter	160+ currencies with live exchange rates (cached for offline use)
🔤 Case Converter	UPPER, lower, Title, Sentence, camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, dot.case, aLtErNaTiNg
📏 Unit Converter	Length, weight, temperature, volume, area, speed
🔢 Number Base Converter	Binary, octal, decimal, hexadecimal, and any custom base 2–36
🔡 Text Encoder / Decoder	Base64, URL encoding, HTML entities
🕒 Timestamp Converter	Unix timestamp ⇄ human-readable date, ISO 8601, relative time

(Icons above are for readability in this document only — the app itself never uses emoji.)

Tech stack

• React 18 + React Router
• Tailwind CSS 3
• Vite 5 as the build tool
• vite-plugin-pwa for offline support & installability
• lucide-react for icons
• Currency rates from the free open.er-api.com API

No backend, no database — the entire app is static and can be hosted anywhere (Vercel, Netlify, GitHub Pages, your own server, etc.).

Getting started

# 1. Install dependencies
npm install

# 2. Start the dev server
npm run dev

# 3. Build for production
npm run build

# 4. Preview the production build locally
npm run preview

The dev server runs at http://localhost:5173 by default.

Project structure

src/
├── components/       # Shared UI: Header, Footer, ToolCard, CopyButton, etc.
├── context/           # Theme, Language and Toast providers (React Context)
├── hooks/             # useLocalStorage and other custom hooks
├── i18n/              # en.json / vi.json translation dictionaries
├── pages/             # Home and NotFound pages
├── tools/             # One component per converter tool
├── utils/             # Pure conversion logic, decoupled from UI
├── App.jsx            # Routes
└── main.jsx           # App entry point
public/
├── favicon.svg
├── icons/             # PWA / app icons (192, 512, maskable, apple-touch)
└── manifest is generated at build time by vite-plugin-pwa

User preferences & storage

Everything is remembered locally via localStorage, and nothing leaves your device:

• Selected theme (light / dark / system)
• Selected language (English / Vietnamese)
• Favorite tools
• Last-fetched currency exchange rates (used as an offline fallback)

Adding a new language

1. Duplicate src/i18n/en.json as src/i18n/xx.json and translate every value.
2. Register it in src/context/LanguageContext.jsx (dictionaries object).
3. Add the language code to LanguageSwitch.jsx.

Adding a new tool

1. Add its metadata (id, path, icon, category) to src/utils/toolsRegistry.js.
2. Add translation keys under tools.<id> (and any tool-specific keys) in both en.json and vi.json.
3. Create src/tools/<YourTool>.jsx using ToolPageLayout as a wrapper.
4. Register the route in src/App.jsx.

Credits

• Author: gnort67
• Built with the assistance of: Claude (Anthropic) — used for code generation and design guidance throughout this project.

License

Released under the MIT License. Free to use, modify and distribute.