Base64 Studio

Base64 Studio is a static Next.js web application with browser-based Base64 encoder and decoder tools.

Live website: https://dhebe.com

Features

• Text, Image, URL, Hex, PDF, HTML, CSS, File, and Audio to Base64 encoders
• Base64 to ASCII decoder, with dedicated static routes prepared for the remaining decoder tools
• Client-side processing for privacy-friendly conversions
• SEO-ready metadata, sitemap, robots, manifest, and structured data
• Static export support for Hostinger deployment through the out/ folder
• Responsive workbench layout for desktop and mobile

Tech Stack

• Next.js 16+ with App Router
• TypeScript
• Tailwind CSS
• npm

Installation

cd base64-convertor
npm install

Development

npm run dev

Open http://localhost:3000.

Production Build

npm run build

This project is configured for static export. After the build completes, upload the contents of the generated out/ folder to your hosting.

Hostinger Deployment

This app is deployed as a static site and can be updated on Hostinger by replacing the website root with the generated export.

1. Install dependencies.
2. Run npm run build.
3. Open the generated out/ folder.
4. In Hostinger File Manager, open public_html.
5. Upload the contents of out/ into public_html.

Important:

• Do not upload the whole project folder.
• Do not upload the out folder as a nested folder.
• Do not upload .next/, node_modules/, app/, components/, or other source files.
• Upload only the generated files and folders inside out/.

Expected upload result:

• index.html
• _next/
• generated tools/ pages
• other static assets exported by Next.js

Project Structure

base64-convertor/
|-- app/
|   |-- layout.tsx
|   |-- page.tsx
|   |-- sitemap.ts
|   |-- robots.ts
|   |-- manifest.ts
|   `-- tools/[slug]/page.tsx
|-- components/
|-- lib/
|-- public/
|-- next.config.js
|-- tsconfig.json
|-- tailwind.config.ts
|-- postcss.config.js
`-- package.json

How to Use

1. Open the main workbench or a dedicated /tools/... page.
2. Pick the encoder or decoder you want.
3. Upload content or paste text/Base64 input.
4. Copy, preview, or download the result.

SEO Notes

• Canonical metadata targets https://dhebe.com
• sitemap.xml and robots.txt are generated by the app
• Structured data is included on the homepage and tool pages
• Google Analytics is enabled with measurement ID G-D9BJ344ZDV

Browser Support

• Chrome / Edge 90+
• Firefox 88+
• Safari 14+

License

See LICENSE for the project license terms.