🔐 Steganography Studio

A modern, secure web application for hiding secret messages within images using advanced steganographic techniques. Built with React, Vite, and Tailwind CSS.

✨ Features

🔒 Secure Message Hiding

Password Protection: All messages are encrypted using XOR cipher before being hidden
LSB Steganography: Uses Least Significant Bit technique for invisible message embedding
Multiple Image Formats: Supports PNG, JPG, JPEG, and other common image formats

🎨 Modern UI/UX

Glassmorphism Design: Beautiful glass-like interface with backdrop blur effects
Tab-Based Navigation: Clean separation between "Hide Message" and "Reveal Message" workflows
Responsive Layout: Works perfectly on desktop, tablet, and mobile devices
Real-time Feedback: Smart notifications and loading states for better user experience

🛡️ Security Features

Client-Side Processing: All encryption/decryption happens in your browser - no data sent to servers
Password Validation: Intelligent detection of incorrect passwords during decoding
Secure Download: Encoded images are processed locally and downloaded directly

🚀 Quick Start

Prerequisites

Node.js (version 16 or higher)
npm or yarn package manager

Installation

Clone the repository

git clone https://github.com/atharvabaodhankar/Steganography-Tool.git
cd stego-app

Install dependencies
```
npm install
# or
yarn install
```
Start the development server
```
npm run dev
# or
yarn dev
```
Open your browser
Navigate to http://localhost:5173 to see the application

📖 How to Use

🔒 Hiding a Message

Switch to "Hide Message" tab
Upload an image - Click the upload area and select your image file
Enter your secret message - Type the message you want to hide
Set a strong password - This will encrypt your message for security
Click "Hide Message in Image" - The app will process and encode your message
Download the result - Save the encoded image (looks identical to the original!)

🔓 Revealing a Message

Switch to "Reveal Message" tab
Upload the encoded image - Select the image containing the hidden message
Enter the correct password - Must match the password used when hiding the message
Click "Reveal Hidden Message" - The secret message will be decrypted and displayed

🛠️ Technical Details

Architecture

Frontend: React 19.1.1 with modern hooks and functional components
Styling: Tailwind CSS 4.1.11 with custom glassmorphism effects
Build Tool: Vite 7.1.0 for fast development and optimized builds
Routing: React Router DOM for navigation (if needed for future features)

Steganography Implementation

Algorithm: LSB (Least Significant Bit) steganography
Encryption: XOR cipher for message security
Canvas API: HTML5 Canvas for image manipulation
Binary Encoding: UTF-8 text to binary conversion with null terminators

Security Considerations

Messages are encrypted before being hidden in images
Password-based encryption prevents unauthorized access
All processing happens client-side for maximum privacy
No data is transmitted to external servers

📁 Project Structure

stego-app/
├── public/                 # Static assets
├── src/
│   ├── components/        # Reusable React components
│   ├── pages/            # Page components (if using routing)
│   ├── utils/            # Utility functions
│   ├── App.jsx           # Main application component
│   ├── App.css           # Custom styles and animations
│   ├── index.css         # Global styles and Tailwind imports
│   └── main.jsx          # Application entry point
├── index.html            # HTML template
├── package.json          # Dependencies and scripts
├── tailwind.config.js    # Tailwind CSS configuration
├── vite.config.js        # Vite configuration
└── README.md            # This file

🎨 Customization

Styling

The app uses Tailwind CSS with custom glassmorphism effects. You can customize:

Colors: Modify gradient colors in App.jsx
Animations: Edit custom animations in App.css
Layout: Adjust responsive breakpoints and spacing

Encryption

The current implementation uses XOR cipher. You can enhance security by:

Implementing AES encryption
Adding key derivation functions (PBKDF2)
Supporting different encryption algorithms

🔧 Available Scripts

npm run dev - Start development server with hot reload
npm run build - Build for production
npm run preview - Preview production build locally
npm run lint - Run ESLint for code quality checks

🌟 Browser Support

Chrome/Edge: Full support (recommended)
Firefox: Full support
Safari: Full support
Mobile browsers: Responsive design works on all modern mobile browsers

🔒 Privacy & Security

No Server Communication: All processing happens in your browser
Local Storage Only: No data is stored remotely
Password Protection: Messages are encrypted before hiding
Open Source: Code is transparent and auditable

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📝 License

This project is open source and available under the MIT License.

⚠️ Disclaimer

This tool is for educational and legitimate privacy purposes only. Users are responsible for complying with applicable laws and regulations in their jurisdiction.

🆘 Support

If you encounter any issues or have questions:

Check the Issues section
Create a new issue with detailed information
Include browser version and steps to reproduce

Made with ❤️ using React, Vite, and Tailwind CSS

atharvabaodhankar/Steganography-Tool