Skip to content

christianpasinrey/tools

BranchesTags

Repository files navigation

🛠️ Web Tools

Vue 3.5 Vite 7.2 Tailwind 4.1 Three.js

License Stars Forks Issues PRs Welcome

Suite de herramientas profesionales con cifrado zero-knowledge.
Cifrado en cliente • Sync entre dispositivos • Open Source • Privacidad total

Inicio Rápido • Herramientas • Contribuir • English

🌐 Idioma / Language

🇪🇸 Español

🇬🇧 English

Español

📖 Descripción

Web Tools es una colección de herramientas de edición y productividad con cifrado zero-knowledge. Tus datos se cifran con AES-256-GCM directamente en el navegador antes de guardarse o sincronizarse.

🔒 Zero-Knowledge Cifrado AES-256-GCM en cliente. El servidor solo almacena blobs cifrados
🔄 Sync Cross-Device Sincroniza datos cifrados entre dispositivos via API REST
🚀 Sin Instalación Accede desde cualquier dispositivo con navegador
🌐 Open Source Código abierto, transparente y auditable
🎨 UI Moderna Interfaz Liquid Glass inspirada en macOS

🧰 Herramientas

📸 Multimedia

Herramienta Descripción Tecnología
🖼️ Image Editor Filtros, recortes, ajustes de color, rotación, volteo y herramientas de dibujo Canvas API
🎵 Audio Editor Corta, une y aplica efectos. Visualización de ondas en tiempo real WaveSurfer.js
🎮 3D Playground Escenas 3D interactivas, shaders personalizados, controles orbitales Three.js
✏️ SVG Editor Crea y edita gráficos vectoriales con herramientas profesionales SVG API

📄 Documentos

Herramienta Descripción Tecnología
📕 PDF Editor Combina, divide, rota, reordena y anota documentos PDF pdf-lib, PDF.js
📊 Spreadsheet Editor Hojas de cálculo con fórmulas, estilos y exportación a Excel ExcelJS
📝 Markdown Editor Editor con preview en vivo, syntax highlighting y exportación Marked, DOMPurify

💻 Technology

Herramienta Descripción Tecnología
🔧 Dev Tools Formatea JSON/YAML, playground HTML/CSS/JS con preview en vivo CodeMirror 6, js-yaml
📱 Phone Tester Prueba llamadas SIP WebRTC, genera código para Vue y React @tbisoftware/phone
🔐 CyberSecurity JWT Debugger, Base64 Encoder/Decoder, Hash Generator Web Crypto API

🛠️ Tools

Herramienta Descripción Tecnología
📏 Unit Converter Convierte longitud, peso, temperatura, tiempo y monedas en tiempo real Frankfurter API
🎨 Color Picker Rueda de colores, armonías cromáticas, gradientes, múltiples formatos Canvas API

📚 Reference

Herramienta Descripción
📖 CheatSheets +50 guías rápidas: macOS, Windows, Linux, Bash, Git, Python, TypeScript, Docker, Kubernetes, Laravel, Vue, React, Tailwind, Photoshop, y más

🚀 Inicio Rápido

# Clonar el repositorio
git clone https://github.com/christianpasinrey/tools.git

# Entrar al directorio
cd tools

# Instalar dependencias
npm install

# Iniciar servidor de desarrollo
npm run dev

Tip

El servidor estará disponible en http://localhost:5173

Scripts Disponibles

Comando Descripción
npm run dev Servidor de desarrollo con HMR
npm run build Build de producción en /dist
npm run preview Preview de la build localmente
npm test Ejecuta tests en modo watch
npm run test:run Ejecuta todos los tests una vez

🏗️ Stack Tecnológico

📦 Ver todas las dependencias

Frontend Framework

Paquete Versión Descripción
Vue 3.5.24 Framework progresivo para UI
Vue Router 4.6.4 Enrutamiento oficial para Vue
VueUse 14.1.0 Colección de utilidades para Composition API

Build & Styling

Paquete Versión Descripción
Vite 7.2.4 Build tool ultrarrápido
Tailwind CSS 4.1.18 Framework CSS utility-first

Editores & Media

Paquete Versión Descripción
CodeMirror 6.x Editor de código extensible
WaveSurfer.js 7.12.1 Visualización de audio
Three.js 0.182.0 Gráficos 3D con WebGL

Documentos

Paquete Versión Descripción
pdf-lib 1.17.1 Crear y modificar PDFs
PDF.js 5.4.530 Renderizar PDFs
ExcelJS 4.4.0 Leer y escribir Excel
Marked 17.0.1 Parser de Markdown
DOMPurify 3.3.1 Sanitización de HTML

Utilidades

Paquete Versión Descripción
js-yaml 4.1.1 Parser YAML
@tbisoftware/phone 2.0.6 Componente teléfono SIP

📁 Estructura del Proyecto

tools/
├── 📂 public/
│   └── .htaccess                 # Config Apache para SPA
├── 📂 src/
│   ├── 📂 components/
│   │   ├── 📂 audio/             # Editor de audio
│   │   ├── 📂 image/             # Editor de imagen
│   │   ├── 📂 pdf/               # Editor de PDF
│   │   ├── 📂 three/             # Playground 3D
│   │   ├── 📂 common/            # Componentes compartidos
│   │   │   ├── SyncAccountButton.vue   # Botón cloud sync
│   │   │   ├── AuthForm.vue            # Login/registro
│   │   │   └── SyncStatusPanel.vue     # Estado de sync
│   │   ├── Dock.vue              # Navegación principal
│   │   ├── DockButton.vue        # Botones del dock
│   │   ├── DockSubmenu.vue       # Submenús interactivos
│   │   └── BentoGrid.vue         # Grid estilo bento
│   ├── 📂 composables/
│   │   ├── useAppCrypto.js       # Cifrado AES-256-GCM
│   │   ├── useAuth.js            # Autenticación JWT
│   │   ├── useCloudSync.js       # Sync zero-knowledge
│   │   ├── useVault.js           # IndexedDB + sync hooks
│   │   ├── useCheatsheets.js     # Lógica de cheatsheets
│   │   ├── useMultimedia.js      # Navegación multimedia
│   │   ├── useTechnology.js      # Navegación technology
│   │   └── useTools.js           # Navegación tools
│   ├── 📂 data/
│   │   └── 📂 cheatsheets/       # +50 archivos JSON
│   ├── 📂 views/                 # Páginas principales
│   │   ├── ForgotPassword.vue        # Solicitar reset
│   │   └── ResetAccount.vue          # Nuevo password + wipe
│   ├── 📂 router/                # Configuración rutas
│   ├── App.vue
│   ├── main.js
│   └── style.css
├── index.html
├── package.json
├── vite.config.js
└── README.md

🚢 Deployment

Apache (con .htaccess)

El proyecto incluye .htaccess en /public que se copia a /dist durante el build.

npm run build
# Subir contenido de /dist al servidor
Nginx 
server {
    listen 80;
    server_name tu-dominio.com;
    root /var/www/tools/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
Vercel / Netlify

vercel.json:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

netlify.toml:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

🔐 Cifrado y Sync

Arquitectura Zero-Knowledge

Los datos se cifran en el navegador con AES-256-GCM antes de guardarse en IndexedDB o sincronizarse con el backend. El servidor nunca tiene acceso a los datos en claro.

Password del usuario
  ├─ PBKDF2 (salt fijo) ──→ authKey ──→ servidor (autenticación)
  └─ PBKDF2 (salt aleatorio/item) ──→ AES key ──→ cifra datos localmente
Concepto Detalle
Cifrado AES-256-GCM con PBKDF2 (100k iteraciones)
Auth JWT access 15min (memory-only) + refresh 7d (HttpOnly cookie)
Sync Last-Write-Wins basado en timestamps del cliente
Offline Cola de cambios en localStorage, flush al reconectar
Cambiar password Re-cifra todos los items con la nueva clave
Reset account Email con token (1h), borra vault, nuevo password
Backend Node.js + Express + MongoDB (tools-sync-api)

Note

El servidor solo almacena blobs { salt, iv, data } en Base64. La clave de cifrado nunca sale del navegador.

Warning

Si pierdes tu password, tus datos cifrados son irrecuperables. Puedes restablecer tu cuenta (via email), pero esto elimina permanentemente todos los datos anteriores. Esto es inherente al diseño zero-knowledge.

🤝 Contribuir

Note

¡Las contribuciones son bienvenidas! Este proyecto crece gracias a la comunidad.

Cómo Contribuir

  1. Fork el repositorio
  2. Crea una rama para tu feature (git checkout -b feature/nueva-herramienta)
  3. Commit tus cambios (git commit -m 'feat: añadir nueva herramienta')
  4. Push a la rama (git push origin feature/nueva-herramienta)
  5. Verifica que los tests pasan (npm run test:run)
  6. Abre un Pull Request

Important

Todos los Pull Requests deben pasar la suite de tests antes de ser mergeados. Si tu PR añade nueva funcionalidad, incluye tests que la cubran. Ejecuta npm run test:run antes de abrir tu PR para verificar que todo funciona correctamente.

Tipos de Contribución

Tipo Descripción
🐛 Bug Fix Corrige errores existentes
✨ Feature Añade nueva funcionalidad
📝 Docs Mejora la documentación
🌐 i18n Traducciones y localización
🎨 UI/UX Mejoras de interfaz
⚡ Performance Optimizaciones de rendimiento
🧪 Tests Añade o mejora tests

Convención de Commits

feat: nueva funcionalidad
fix: corrección de bug
docs: cambios en documentación
style: formato, sin cambios de código
refactor: refactorización de código
perf: mejoras de rendimiento
test: añadir o corregir tests
chore: tareas de mantenimiento

📄 Licencia

Este proyecto está bajo la licencia MIT. Ver el archivo LICENSE para más detalles.

English

📖 Description

Web Tools is a collection of editing and productivity tools with zero-knowledge encryption. Your data is encrypted with AES-256-GCM directly in the browser before being stored or synced.

🔒 Zero-Knowledge Client-side AES-256-GCM encryption. The server only stores encrypted blobs
🔄 Cross-Device Sync Sync encrypted data across devices via REST API
🚀 No Installation Access from any device with a browser
🌐 Open Source Open, transparent and auditable code
🎨 Modern UI Liquid Glass interface inspired by macOS

🧰 Tools

📸 Multimedia

Tool Description Technology
🖼️ Image Editor Filters, cropping, color adjustments, rotation, flip and drawing tools Canvas API
🎵 Audio Editor Cut, merge and apply effects. Real-time waveform visualization WaveSurfer.js
🎮 3D Playground Interactive 3D scenes, custom shaders, orbital controls Three.js
✏️ SVG Editor Create and edit vector graphics with professional tools SVG API

📄 Documents

Tool Description Technology
📕 PDF Editor Merge, split, rotate, reorder and annotate PDF documents pdf-lib, PDF.js
📊 Spreadsheet Editor Spreadsheets with formulas, styles and Excel export ExcelJS
📝 Markdown Editor Editor with live preview, syntax highlighting and export Marked, DOMPurify

💻 Technology

Tool Description Technology
🔧 Dev Tools Format JSON/YAML, HTML/CSS/JS playground with live preview CodeMirror 6, js-yaml
📱 Phone Tester Test SIP WebRTC calls, generate code for Vue and React @tbisoftware/phone
🔐 CyberSecurity JWT Debugger, Base64 Encoder/Decoder, Hash Generator Web Crypto API

🛠️ Tools

Tool Description Technology
📏 Unit Converter Convert length, weight, temperature, time and currencies in real-time Frankfurter API
🎨 Color Picker Color wheel, chromatic harmonies, gradients, multiple formats Canvas API

📚 Reference

Tool Description
📖 CheatSheets +50 quick guides: macOS, Windows, Linux, Bash, Git, Python, TypeScript, Docker, Kubernetes, Laravel, Vue, React, Tailwind, Photoshop, and more

🚀 Quick Start

# Clone the repository
git clone https://github.com/christianpasinrey/tools.git

# Enter the directory
cd tools

# Install dependencies
npm install

# Start development server
npm run dev

Tip

Server will be available at http://localhost:5173

Available Scripts

Command Description
npm run dev Development server with HMR
npm run build Production build to /dist
npm run preview Preview build locally
npm test Run tests in watch mode
npm run test:run Run all tests once

🏗️ Tech Stack

📦 View all dependencies

Frontend Framework

Package Version Description
Vue 3.5.24 Progressive framework for UI
Vue Router 4.6.4 Official router for Vue
VueUse 14.1.0 Collection of Composition API utilities

Build & Styling

Package Version Description
Vite 7.2.4 Ultrafast build tool
Tailwind CSS 4.1.18 Utility-first CSS framework

Editors & Media

Package Version Description
CodeMirror 6.x Extensible code editor
WaveSurfer.js 7.12.1 Audio visualization
Three.js 0.182.0 3D graphics with WebGL

Documents

Package Version Description
pdf-lib 1.17.1 Create and modify PDFs
PDF.js 5.4.530 Render PDFs
ExcelJS 4.4.0 Read and write Excel
Marked 17.0.1 Markdown parser
DOMPurify 3.3.1 HTML sanitization

Utilities

Package Version Description
js-yaml 4.1.1 YAML parser
@tbisoftware/phone 2.0.6 SIP phone component

📁 Project Structure

tools/
├── 📂 public/
│   └── .htaccess                 # Apache config for SPA
├── 📂 src/
│   ├── 📂 components/
│   │   ├── 📂 audio/             # Audio editor
│   │   ├── 📂 image/             # Image editor
│   │   ├── 📂 pdf/               # PDF editor
│   │   ├── 📂 three/             # 3D playground
│   │   ├── 📂 common/            # Shared components
│   │   │   ├── SyncAccountButton.vue   # Cloud sync button
│   │   │   ├── AuthForm.vue            # Login/register
│   │   │   └── SyncStatusPanel.vue     # Sync status
│   │   ├── Dock.vue              # Main navigation
│   │   ├── DockButton.vue        # Dock buttons
│   │   ├── DockSubmenu.vue       # Interactive submenus
│   │   └── BentoGrid.vue         # Bento-style grid
│   ├── 📂 composables/
│   │   ├── useAppCrypto.js       # AES-256-GCM encryption
│   │   ├── useAuth.js            # JWT authentication
│   │   ├── useCloudSync.js       # Zero-knowledge sync
│   │   ├── useVault.js           # IndexedDB + sync hooks
│   │   ├── useCheatsheets.js     # Cheatsheets logic
│   │   ├── useMultimedia.js      # Multimedia navigation
│   │   ├── useTechnology.js      # Technology navigation
│   │   └── useTools.js           # Tools navigation
│   ├── 📂 data/
│   │   └── 📂 cheatsheets/       # +50 JSON files
│   ├── 📂 views/                 # Main pages
│   │   ├── ForgotPassword.vue        # Request reset
│   │   └── ResetAccount.vue          # New password + wipe
│   ├── 📂 router/                # Route configuration
│   ├── App.vue
│   ├── main.js
│   └── style.css
├── index.html
├── package.json
├── vite.config.js
└── README.md

🚢 Deployment

Apache (with .htaccess)

The project includes .htaccess in /public that gets copied to /dist during build.

npm run build
# Upload /dist contents to server
Nginx 
server {
    listen 80;
    server_name your-domain.com;
    root /var/www/tools/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
Vercel / Netlify

vercel.json:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

netlify.toml:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

🔐 Encryption & Sync

Zero-Knowledge Architecture

Data is encrypted in the browser with AES-256-GCM before being stored in IndexedDB or synced to the backend. The server never has access to plaintext data.

User password
  ├─ PBKDF2 (fixed salt) ──→ authKey ──→ server (authentication)
  └─ PBKDF2 (random salt/item) ──→ AES key ──→ encrypts data locally
Concept Detail
Encryption AES-256-GCM with PBKDF2 (100k iterations)
Auth JWT access 15min (memory-only) + refresh 7d (HttpOnly cookie)
Sync Last-Write-Wins based on client timestamps
Offline Change queue in localStorage, flush on reconnect
Change password Re-encrypts all items with the new key
Reset account Email with token (1h), wipes vault, new password
Backend Node.js + Express + MongoDB (tools-sync-api)

Note

The server only stores { salt, iv, data } blobs in Base64. The encryption key never leaves the browser.

Warning

If you lose your password, your encrypted data is unrecoverable. You can reset your account (via email), but this permanently deletes all previous data. This is inherent to the zero-knowledge design.

🤝 Contributing

Note

Contributions are welcome! This project grows thanks to the community.

How to Contribute

  1. Fork the repository
  2. Create a branch for your feature (git checkout -b feature/new-tool)
  3. Commit your changes (git commit -m 'feat: add new tool')
  4. Push to the branch (git push origin feature/new-tool)
  5. Verify that tests pass (npm run test:run)
  6. Open a Pull Request

Important

All Pull Requests must pass the test suite before being merged. If your PR adds new functionality, include tests covering it. Run npm run test:run before opening your PR to verify everything works correctly.

Contribution Types

Type Description
🐛 Bug Fix Fix existing bugs
✨ Feature Add new functionality
📝 Docs Improve documentation
🌐 i18n Translations and localization
🎨 UI/UX Interface improvements
⚡ Performance Performance optimizations
🧪 Tests Add or improve tests

Commit Convention

feat: new feature
fix: bug fix
docs: documentation changes
style: formatting, no code changes
refactor: code refactoring
perf: performance improvements
test: add or fix tests
chore: maintenance tasks

� Open Source Libraries

Este proyecto está construido con las siguientes librerías open source:

Frontend Framework

  • Vue.js - Progressive JavaScript Framework
  • Vue Router - Official router for Vue.js
  • @vueuse/core - Collection of essential Vue.js composition utilities

Build Tools & Styling

Code Editing

Media & Graphics

Data Processing

  • ExcelJS - Excel workbook/spreadsheet manipulation
  • Marked - Markdown parser and compiler
  • js-yaml - JavaScript YAML parser
  • DOMPurify - XSS sanitizer for HTML, MathML and SVG

Other

�📄 License

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

🙏 Agradecimientos

Agradecemos sinceramente a:

  • GitHub - Por proporcionar un excelente servicio de alojamiento de repositorios y herramientas colaborativas
  • La comunidad open source - Por mantener y contribuir a las librerías que hacen este proyecto posible
  • Todos los contribuidores que han ayudado a mejorar este proyecto

⭐ Star this repo if you find it useful!


Built with ❤️ by Christian Pasin Rey


Made with Vue.js Styled with Tailwind Built with Vite

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases 1

1.0 Latest
Jan 24, 2026

Packages

 
 
 

Contributors

Languages