cagatayuresin
← All projects

simple-base64-encoder

This application provides a simple and intuitive interface to encode and decode text using Base64 encoding.

● JavaScript ★ 3 ⑂ 0 Last updated: September 9, 2025
Open on GitHub → Live demo →

Simple Base64 Encoder 🚀

GitHub Pages
License: MIT Version Security Policy

🔗 Live Demo: https://cagatayuresin.github.io/simple-base64-encoder/

Welcome to the Simple Base64 Encoder - a professional, feature-rich multi-format converter that goes beyond basic Base64 encoding. Built with modern web technologies and designed for developers, content creators, and anyone who needs reliable format conversion tools.

Preview

✨ Features

🔄 Multi-Format Support

  • Standard Base64 - RFC 4648 compliant encoding/decoding
  • URL-Safe Base64 - Web-safe Base64 without padding characters
  • Hexadecimal - Binary data representation in hex format
  • Binary - Binary string representation of data
  • URL Encoding - Percent-encoding for web URLs
  • JSON Formatter - Pretty-print and minify JSON data

📱 Progressive Web App (PWA)

  • Install as App - Install directly to your device for native app experience
  • Offline Functionality - Works without internet connection after installation
  • App Shortcuts - Quick access from your device's app drawer
  • Automatic Updates - Always get the latest features automatically
  • Mobile Optimized - Perfect experience on phones and tablets

📦 Advanced File Processing

  • Drag & Drop Interface - Simply drag files onto the upload area
  • Binary File Support - Handle images, documents, executables, and more
  • Multiple File Upload - Process multiple files simultaneously
  • File Information Display - See file size, type, and processing details
  • Real-time Progress - Visual feedback during file processing

🎨 Modern User Experience

  • Professional Typography - Inter font family for clean, modern look
  • Gradient Logo Design - Beautiful animated gradient title
  • Responsive Layout - Perfect on desktop, tablet, and mobile
  • Dark Mode Support - Toggle between light and dark themes
  • Custom Modals - Elegant confirmation and error dialogs
  • Visual Feedback - Success/error notifications and progress indicators

🧮 Converter Interface

  • Dynamic Rows - Start with 5 rows, add unlimited more
  • Real-Time Conversion - Instant bidirectional format conversion
  • Auto-Resize Textareas - Textareas grow with your content
  • Copy Buttons - One-click copying to clipboard
  • Clear Functions - Individual field clearing and bulk clear-all
  • Auto-Save - Your work is preserved in localStorage

🔧 Developer Features

  • Modular Architecture - Clean, maintainable code structure
  • Error Handling - Comprehensive error management system
  • SEO Optimized - Rich meta tags and structured data
  • Performance Optimized - Efficient processing and minimal dependencies

📁 Project Structure

simple-base64-encoder/
├── index.html                 # Main application page with SEO optimization
├── src/
│   ├── css/
│   │   └── style.css         # Custom styles with dark mode support
│   ├── js/                   # Modular JavaScript architecture
│   │   ├── main.js          # Core application logic
│   │   ├── converters.js    # Format conversion utilities
│   │   ├── fileHandler.js   # File processing operations
│   │   ├── visualFeedback.js # UI feedback systems
│   │   └── errorHandler.js   # Error management & modals
│   └── img/
│       ├── preview.png       # Application screenshot
│       ├── cagatayuresin-logo.png # Brand logo (dark theme)
│       └── cagatayuresin-logo-w.png # Brand logo (light theme)
├── CHANGELOG.md             # Version history and updates
├── CONTRIBUTING.md          # Contribution guidelines
├── LICENSE                  # MIT License
└── README.md               # This file

🚀 Quick Start

  1. Visit the Live Demo: https://cagatayuresin.github.io/simple-base64-encoder/

  2. Or run locally:

    git clone https://github.com/cagatayuresin/simple-base64-encoder.git
cd simple-base64-encoder
# Open index.html in your browser or serve with any HTTP server
python -m http.server 8080  # Python 3
# or
npx serve .                 # Node.js

  3. Start Converting:

    • Select your desired format from the dropdown
    • Type or paste content in any textarea
    • Upload files by dragging them to the upload area
    • Toggle between light/dark mode as needed

🧠 Technologies Used

  • Frontend Framework: Pure HTML5, CSS3, JavaScript (ES6+)
  • CSS Framework: Bulma - Modern CSS framework
  • Icons: Tabler Icons - Beautiful SVG icons
  • Typography: Inter - Professional font family
  • Architecture: Modular JavaScript with separation of concerns
  • Storage: LocalStorage for data persistence
  • APIs: FileReader API, Clipboard API, Drag & Drop API

🌟 What's New in v2.2.0

  • 📱 Progressive Web App (PWA) - Install as native app
  • 🔄 Offline functionality - Works without internet
  • 📲 Mobile app experience - Perfect on phones and tablets
  • ⚡ Automatic updates - Always get the latest features
  • 🎯 App shortcuts - Quick access from device

🌟 What's New in v2.1.0

  • UTF‑8 safe encoding/decoding for Base64/URL‑safe/Hex/Binary
  • File results: Download and Collapse actions
  • Clipboard fallback when native API is unavailable
  • Accessibility improvements (aria-live, roles, labels)
  • Footer logo (light/dark) and Security Policy badge
  • Respect system theme on first load

🌟 What's New in v2.0.0

  • ✅ Multi-format support beyond Base64
  • ✅ File upload with drag & drop
  • ✅ Binary file processing
  • ✅ Modular code architecture
  • ✅ Enhanced error handling
  • ✅ Professional typography
  • ✅ SEO optimization
  • ✅ Visual feedback system

See CHANGELOG.md for complete version history.

🤝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for detailed guidelines.

Quick ways to contribute:

  • 🐛 Report bugs via GitHub Issues
  • 💡 Suggest features or improvements
  • 🔧 Submit pull requests for bug fixes or new features
  • 📖 Improve documentation
  • 🌍 Help with translations

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

  • Bulma CSS for the excellent CSS framework
  • Tabler Icons for beautiful, consistent icons
  • Google Fonts for the Inter typeface
  • The open-source community for inspiration and feedback

📬 Contact

Çağatay Üresin

Built with ❤️ and modern web technologies
Perfect for developers, content creators, and anyone who needs reliable format conversion

Happy Converting! 🎯✨