Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 98 additions & 0 deletions README.es-ES.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@


<div align="center">
<h2>
Una herramienta sencilla para animaciones de video de diffs de código para visualizar cambios en el código
</h2>
</div>

<div align="center">
<figure>
<a href="https://code-motion.vercel.app/" target="_blank" rel="noopener">
<img alt="Code-Motion" src='./src/assets/studio.webp'>
</a>
<figcaption>
<p align="center">
Presenta tu código como nunca antes.
</p>
</figcaption>
</figure>
</div>

## 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! ⭐️