Una aplicación Next.js que te permite gestionar tu repositorio de GitHub como si fuera un drive en la nube (Google Drive, Dropbox, etc.). Incluye un explorador de archivos visual y un editor de markdown con preview en tiempo real.
- Navegación visual por carpetas y archivos
- Iconos diferenciados por tipo de archivo
- Breadcrumbs para navegación rápida
- Drag & drop para subir archivos fácilmente
- Crear nuevos documentos markdown directamente
- Ver tamaño de archivos
- Editor de texto con vista dividida (edit/preview/split)
- Preview en tiempo real del markdown
- Soporte para GitHub Flavored Markdown (tablas, checklists, etc.)
- Guardar cambios con mensajes de commit personalizados
- Ver historial de commits del archivo
- Detección automática de cambios sin guardar
- Autenticación OAuth - Login seguro con tu cuenta de GitHub
- Selector de repositorios - Elige visualmente de tus repos
- Commits automáticos con cada guardado
- Control de versiones completo usando Git
- Todos los cambios se sincronizan con tu repositorio
-
Clonar el repositorio:
git clone <tu-repositorio> cd github-as-a-drive
-
Instalar dependencias:
npm install
-
Configurar variables de entorno:
cp .env.example .env.local
Luego edita
.env.localcon tus credenciales (ver sección de Configuración) -
Ejecutar en modo desarrollo:
npm run dev
-
Abrir en el navegador:
http://localhost:3000
Tienes 2 opciones para autenticarte:
La forma más profesional y segura. Ideal si quieres la mejor experiencia de usuario.
- Ve a GitHub Settings → Developer settings → OAuth Apps
- O usa este link directo: https://github.com/settings/developers
- Haz clic en "New OAuth App"
- Completa el formulario:
- Application name:
GitHub Drive(o el nombre que prefieras) - Homepage URL:
http://localhost:3000 - Authorization callback URL:
http://localhost:3000/api/auth/callback/github
- Application name:
- Haz clic en "Register application"
- Copia el Client ID que aparece
- Haz clic en "Generate a new client secret" y cópialo también
-
Copia el archivo
.env.examplea.env.local:cp .env.example .env.local
-
Edita
.env.localcon tus credenciales:GITHUB_CLIENT_ID=tu_client_id_aqui GITHUB_CLIENT_SECRET=tu_client_secret_aqui NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=genera_uno_con_el_comando_abajo
-
Genera un
NEXTAUTH_SECRET:openssl rand -base64 32
-
Primera vez:
- Haz clic en "Iniciar sesión con GitHub"
- Autoriza la aplicación en GitHub
- Selecciona un repositorio de tu lista
- ¡Listo! Ya estás conectado
-
Siguientes veces:
- La sesión se mantiene activa
- Si cierras sesión, simplemente vuelve a hacer login con GitHub
Si quieres empezar a usar la app inmediatamente sin configurar OAuth, usa esta opción.
- Ve a: https://github.com/settings/tokens/new?scopes=repo
- Dale un nombre (ej: "GitHub Drive")
- Selecciona el scope
repo(acceso a repositorios) - Haz clic en "Generate token"
- Copia el token (solo se muestra una vez)
- Ejecuta
npm run devy abre http://localhost:3000 - En la pantalla de login, haz clic en "O usa un Personal Access Token (método alternativo)"
- Ingresa tu token y el repositorio (formato:
owner/repo) - Haz clic en "Connect Repository"
Ventajas:
- ✅ No requiere configuración de OAuth App
- ✅ Empiezas a usar la app en menos de 1 minuto
- ✅ Funciona sin variables de entorno
Desventajas:
- ❌ Tienes que copiar/pegar el token manualmente
- ❌ No hay selector visual de repositorios
- Después de iniciar sesión, verás una lista de todos tus repositorios
- Usa la barra de búsqueda para filtrar repositorios
- Haz clic en el repositorio con el que quieras trabajar
- La información incluye: descripción, estrellas, forks y última actualización
- Haz clic en las carpetas para navegar
- Haz clic en archivos para abrirlos en el editor
- Usa los breadcrumbs en la parte superior para volver atrás rápidamente
- Método 1: Arrastra y suelta archivos en la zona de drop
- Método 2: Haz clic en la zona de drop para seleccionar archivos
Los archivos se subirán automáticamente al repositorio con un commit.
- Haz clic en "New Markdown File"
- Ingresa el nombre del archivo (se agregará
.mdautomáticamente) - El archivo se creará con contenido plantilla
- Haz clic en un archivo markdown para abrirlo
- Elige el modo de vista:
- Edit: Solo editor
- Split: Editor y preview lado a lado
- Preview: Solo preview
- Escribe tu contenido en markdown
- Haz clic en "Save" cuando termines
- Ingresa un mensaje de commit descriptivo
- Los cambios se guardarán en GitHub
- Haz clic en "History" para ver los commits del archivo actual
- Verás el mensaje, autor, fecha y SHA de cada commit
- Next.js 14 - Framework de React
- TypeScript - Tipado estático
- Tailwind CSS - Estilos
- NextAuth.js - Autenticación OAuth
- Octokit - Cliente de GitHub API
- react-markdown - Renderizado de markdown
- react-dropzone - Drag & drop de archivos
- lucide-react - Iconos
# Desarrollo
npm run dev
# Construir para producción
npm run build
# Ejecutar en producción
npm start
# Linting
npm run lint- Autenticación mediante GitHub OAuth (estándar de la industria)
- Tu access token se maneja de forma segura mediante NextAuth.js
- Solo solicitamos permisos de
repo(lectura/escritura de repositorios) - Todos los requests van directamente de tu navegador a GitHub API
- Las credenciales OAuth nunca se almacenan en texto plano
- Variables de entorno protegidas por
.env.local(no se suben a Git)
Para desplegar en Vercel, Railway, o cualquier plataforma:
- Configura las variables de entorno en tu plataforma
- Importante: Actualiza la Authorization callback URL en tu GitHub OAuth App:
- Si es Vercel:
https://tu-dominio.vercel.app/api/auth/callback/github - Actualiza también
NEXTAUTH_URLen las variables de entorno
- Si es Vercel:
Las contribuciones son bienvenidas! Si encuentras algún bug o tienes ideas para mejorar la app, no dudes en abrir un issue o pull request.
MIT
Nota: Esta aplicación requiere conexión a internet para comunicarse con la API de GitHub.