DEV Community

Cover image for InvisioVault: Because Sometimes You Just Want to Hide Stuff 🤫
Rolan Lobo
Rolan Lobo

Posted on

InvisioVault: Because Sometimes You Just Want to Hide Stuff 🤫

#javascript #webdev #tutorial #python

You know that feeling when you’re learning to code and suddenly think,

“What if I could hide my files inside a cat picture?”

Yeah, that’s how InvisioVault was born.

This was my first ever project, and oh boy, it was beautifully disastrous.
Imagine one giant Python file doing everything — backend, frontend, emotional damage — all in one.

It somehow worked (occasionally). When the planets aligned. And my Wi-Fi didn’t.

Fast forward a bit — I learned how to actually write code like a functioning human being, gave the project a full glow-up, and now it looks like something an adult programmer might have made.

So… What Even Is InvisioVault? 🤔

Think of it as your digital secret vault that looks completely innocent.

It does two main things (and both are borderline wizardry):

🖼️ 1. Steganography Mode

You take an image. You take a file. You merge them.
Boom — your vacation photo now secretly holds your private notes or even another file inside it.

It’s like hiding your diary inside a meme.

🔗 2. Polyglot Mode (The “Wait, That’s Legal?” One)

This one’s wild. You create a single file that works as two formats at the same time.
A .jpg that’s also a .zip.

Open it as an image → pretty picture.
Rename it to .zip → surprise! There’s hidden data inside.

Basically, it’s file inception. 🌀

The Tech Behind the Madness 💻

Backend (a.k.a. The brain that holds everything together with duct tape):

  • 🐍 Flask – because I didn’t need Django yelling at me yet
  • 🖼️ Pillow – for all the image sorcery
  • 🔐 Cryptography – password encryption so strong even I forgot mine once
  • 🧩 Pyzipper – AES-256 encrypted zips (because 1990s ZIP security ain’t it)

Frontend (the part that pretends to be user-friendly):

  • ⚛️ React – because we’ve all agreed to use it at this point
  • ⚡ Vite – fast enough to make me feel like I know what I’m doing
  • 📡 Axios – API calls without the tears
  • 🎨 CSS3 – dark mode supremacy 😎

How the “Hide Stuff in Images” Thing Works 🎨

Every pixel in an image has three color values: Red, Green, and Blue.
Each number is from 0 to 255 — so we just tweak the last bit of each color to store data.

It’s like whispering secrets into pixels:

# Original pixel: (147, 89, 201)
# Binary:         (10010011, 01011001, 11001001)
Enter fullscreen mode Exit fullscreen mode

Then, to hide one byte (10110101), we mess with the last bit:

pixel[0] = (pixel[0] & ~1) | bit1
pixel[1] = (pixel[1] & ~1) | bit2
pixel[2] = (pixel[2] & ~1) | bit3
Enter fullscreen mode Exit fullscreen mode

The result: the picture looks exactly the same.
But it’s now holding secrets like a digital spy. 🕵️‍♂️

Polyglot Files — The Nerdy Magic 🧙‍♂️

ZIP files are read from the end.
So you can slap a full image before it, adjust a few offsets, and ZIP readers won’t care.

[IMAGE DATA][ZIP DATA]
Enter fullscreen mode Exit fullscreen mode

Open it as an image → works fine.
Rename it → extracts a whole hidden file.
Same bytes. Two personalities. Absolute chaos.

Cool Features I’m Weirdly Proud Of 🚀

🔒 Password Protection

  • Steganography mode → Fernet encryption
  • Polyglot mode → AES-256 (a.k.a. Fort Knox level)

Try the wrong password?
Nope. Nada. Zilch.

📝 Text Mode

Don’t want to create a file? Just type your secret directly into the app.
We’ll turn it into a hidden message. Lazy-friendly.

🧠 Smart Extraction

If you hide a text file, it’ll show right in the browser instead of forcing a download. Because convenience = happiness.

🌙 Dark Mode

White backgrounds are crimes against night owls.

The Code (aka: "It Works, I Swear") 💾

Everything’s open source and slightly chaotic here:
🔗 github.com/Mrtracker-new/InvisioVault

Quick Start (a.k.a. Summon the Beast):

git clone https://github.com/Mrtracker-new/InvisioVault.git
cd InvisioVault

# Backend
cd backend
python -m venv venv
venv\Scripts\activate  # Windows users, hi 👋
pip install -r requirements.txt
python app.py

# Frontend (new terminal)
cd frontend
npm install
npm run dev

# Then open http://localhost:5173 and pray.
Enter fullscreen mode Exit fullscreen mode

Things I Learned While Losing My Sanity 📚

  1. Split your code – one file does not rule them all
  2. Dark mode saves souls
  3. Type hints = future sanity insurance
  4. Polyglots are real – not just a myth from hacker forums
  5. Your first project will be trash – and that’s okay. Refactor it later. Shine it up. Show it off.

Future Plans (a.k.a. When I Recover from This) 🔮

  • Maybe a mobile app 📱
  • Hide files inside PDFs, videos, or even music (imagine a secret inside a song 🎶)
  • Batch processing
  • A CLI version for terminal nerds

Try It Out 🎮

Go ahead — upload an image, hide something, extract it again.
Watch your face go from 🤔 to 😲 in 3 seconds.

Found a bug? Cool, I call them “features in disguise.”
But feel free to open an issue or PR (kindly, please).

Fun Fact:
This entire project started at 3 A.M. when I randomly thought,

“Can I hide a file inside another file?”

Turns out… you can.
And now it’s an app with dark mode.

Drop a ⭐ if you think this is cool!
Or don’t. I’m not your manager. 😆

GitHub Repo

What’s the most ridiculous idea you’ve actually made work? Share it below — let’s normalize turning “stupid 3 A.M. ideas” into working projects. 💪

Top comments (0)