diff --git a/README.es-ES.md b/README.es-ES.md new file mode 100644 index 0000000..307fdf6 --- /dev/null +++ b/README.es-ES.md @@ -0,0 +1,98 @@ + + +
+

+ Una herramienta sencilla para animaciones de video de diffs de código para visualizar cambios en el código +

+
+ +
+
+ + Code-Motion + +
+

+ Presenta tu código como nunca antes. +

+
+
+
+ +## Características + +- 💯 Gratis y de código abierto +- 🤩 Animación de diffs ([ejemplo](https://code-motion.vercel.app/assets/diff-anim-example-CQZ8pw7x.webm)) +- 🏗️ Video basado en canvas +- 🎬 Reproductor de vista previa +- 🖼️ Exportar video a WebM +- ✍️ Editor de código en el navegador +- 🎨 Personalizable +- 📷 Capturar capturas de pantalla +- 🌓 Modo oscuro + +## Casos de uso + +- Creación de tutoriales en video de programación (YouTube, Udemy, etc.). +- Ayudar a los instructores a explicar soluciones de código de manera efectiva. +- Estudiantes mostrando fragmentos de código específicos durante una presentación. + ... + +## Desarrollo + +Clona el repositorio y luego puedes ejecutarlo localmente o en un contenedor de Docker + +### Localmente + +> [!TIP] +> Instala pnpm [`npm i -g pnpm`] si aún no lo tienes instalado + +1. Instala las dependencias + + ```sh + pnpm run install + ``` + +2. Ejecuta la aplicación localmente + + ```sh + pnpm run dev + ``` + +### Docker + +1. Ejecútalo en un contenedor + + ```sh + docker-compose up + ``` + +Después de ejecutar la aplicación, ya sea localmente o en Docker, navega a http://localhost:5173. + +## Stack Tecnológico + +- TypeScript : Un superconjunto de JavaScript con tipado estático, para una mejor experiencia de desarrollo (DX) +- React : Una biblioteca para construir interfaces de usuario utilizando componentes +- Tailwind : Un framework CSS basado en utilidades para un desarrollo web rápido +- Zustand : Una biblioteca ligera de gestión de estado para React +- Framer-Motion : Una biblioteca de animaciones lista para producción para React +- Shadcn : Un conjunto de componentes de interfaz de usuario predefinidos, accesibles y personalizables. +- CodeMirror : Un componente de editor de código para la web. +- DiffJs : Una implementación de diferencias de texto basada en el algoritmo O(ND). +- PrismJs : Una biblioteca de resaltado de sintaxis para bloques de código + +## Privacidad + +La aplicación está diseñada para funcionar primero sin conexión, lo que significa que no depende de ningún servidor externo ni de puertas traseras, + +Sin embargo, Code Motion utiliza Vercel Basic Analytics: +pero solo almacena datos anonimizados y no utiliza cookies [más información](https://vercel.com/docs/analytics#how-visitors-are-determined) + +## Contribuir + +- ¿Encontraste un error? [Repórtalo aquí](https://github.com/amasin76/code-motion/issues/new/choose). +- ¿Falta una función? [Solicítala aquí](https://github.com/amasin76/code-motion/issues/new/choose). + +## ¿Te gusta Code Motion? + +¡No olvides darle estrella al repositorio! ⭐️