@atifmatloob007 on Frictionless
1-What did you make?
answer- I built Flux Toolkit, an offline-first developer toolkit designed to replace 14 common, ad-riddled online utilities (like JSON formatters, JWT decoders, Base64 encoders, and Hash generators). It runs entirely locally in the browser with zero dependencies, ensuring that developers' sensitive data and production secrets never leave their machine.
2-What was challenging?
Answer-Implementing the three major quality-of-life (QoL) features in a purely vanilla JS environment (no frameworks) was tricky.
1. Smart Input Auto-Detect: I had to write custom regex patterns and global event listeners to instantly identify data formats (like JWT, JSON, Base64, or hex colors) whenever a user pastes content anywhere on the page, without conflicting with focused inputs.
2. State Persistence & History: Saving the state of every tool's text inputs to sessionStorage and restoring it instantly on navigation required a robust debounced saving mechanism to ensure developers never lose their work when switching tools.
3. Drag & Drop API: Handling nested element drag events for the full-screen drop zone and mapping file extensions to the correct tool required careful state management.
3-What are you proud of?
Answer- I am really proud of the premium user experience I managed to achieve using just vanilla HTML, CSS, and JS (zero dependencies, no build step). The app features a beautiful glassmorphism dark theme, command palette navigation (Ctrl+K), and micro-animations. I'm also proud that it genuinely solves a real developer friction point no more wading through pop-up ads or worrying about privacy when decoding a production JWT.
4- What should people know so they can test your project? Answer-Because Flux has zero dependencies, testing it is incredibly easy:
You can simply open index.html in any browser, or visit the live demo link in the repository. No installation or build steps are required.
To test the Auto-Detect: Copy a JWT token or some JSON, and press Ctrl+V anywhere in the app (while no input is focused). A toast will offer to switch you to the right tool instantly.
To test Drag & Drop: Drag any .json, .txt, .md, or .csv file directly onto the app window to see it auto-load into the correct utility.
To test State Persistence: Type something into the JSON Formatter, switch to the Password Generator, and then switch back. Your text will still be there.
- 1 devlog
- 0h
- Frictionless