Skip to content

I'm developing a real-time Google Docs clone using Next.js15, React 19, Bun, and Tailwind CSS. This project enables collaborative document editing with instant updates for a smooth user experience.

Notifications You must be signed in to change notification settings

Lostovayne/Real-time-google-docs-clone

Repository files navigation

🚀 Real Time Google Docs Clone

Un clon moderno y en tiempo real de Google Docs que permite la edición colaborativa de documentos. Este proyecto combina tecnologías de vanguardia para ofrecer una experiencia de edición fluida y en tiempo real.

📋 Tabla de Contenidos

✨ Características

  • Editor Rico en Tiempo Real

    • Edición colaborativa en tiempo real
    • Formateo de texto completo
    • Soporte para imágenes y tablas
    • Sistema de comentarios
    • Listas y listas de tareas
    • Resaltado de código
    • Cambio de color de texto
    • Cambio de familia de fuentes
    • Subrayado y estilos de texto
    • Tablas redimensionables
    • Imágenes redimensionables
  • Interfaz de Usuario Moderna

    • Diseño responsivo
    • Tema claro/oscuro
    • Barra de herramientas personalizable
    • Interfaz intuitiva tipo Google Docs
    • Visualización de datos interactiva
    • Componentes UI modernos con Radix
    • Sistema de notificaciones con Sonner
    • Carruseles y navegación avanzada
  • Gestión de Documentos

    • Guardado automático
    • Control de versiones
    • Exportación a diferentes formatos
    • Organización de documentos
    • Compartir documentos

🛠 Tecnologías Utilizadas

Frontend

  • Next.js 15
  • React 19
  • TypeScript
  • TipTap Editor con extensiones:
    • Code Block con sintaxis highlighting
    • Tablas
    • Listas de tareas
    • Imágenes redimensionables
    • Colores y resaltado
  • Zustand para gestión de estado
  • Tailwind CSS
  • ShadcN UI
  • Radix UI Components:
    • Accordion
    • Alert Dialog
    • Avatar
    • Context Menu
    • Dialog
    • Dropdown Menu
    • Navigation Menu
    • y más...
  • Lucide Icons
  • Sonner para notificaciones
  • React Hook Form
  • Zod para validación
  • Recharts para gráficos
  • Embla Carousel

Backend

  • Cloudflare Workers
  • Node.js
  • WebSocket para tiempo real

Testing

  • Jest
  • React Testing Library
  • Cypress

DevOps

  • GitHub Actions
  • Cloudflare
  • Wrangler CLI

🚀 Comenzando

Prerrequisitos

  • Node.js (v16 o superior)
  • npm o yarn
  • Wrangler CLI (para desarrollo con Cloudflare Workers)

Instalación

  1. Clonar el repositorio
git clone https://github.com/usuario/real-time-google-docs-clone.git
cd real-time-google-docs-clone
  1. Instalar dependencias
npm install
  1. Configurar variables de entorno
cp .env.example .env.local
  1. Iniciar el servidor de desarrollo
npm run dev
  1. Para desarrollo con Cloudflare Workers
npm run dev:worker

El proyecto estará disponible en http://localhost:3000

Scripts Disponibles

{
	"dev": "next dev",
	"build": "next build",
	"start": "next start",
	"lint": "next lint",
	"build:worker": "cloudflare",
	"dev:worker": "wrangler dev --port 8771",
	"preview:worker": "npm run build:worker && npm run dev:worker",
	"deploy:worker": "npm run build:worker && wrangler deploy"
}

🧪 Pruebas

# Ejecutar pruebas unitarias
npm run test

# Ejecutar pruebas e2e
npm run test:e2e

📦 Despliegue

# Construir para producción
npm run build

# Desplegar en Cloudflare Workers
npm run deploy:worker

📄 Licencia

Este proyecto está bajo la Licencia MIT - ver el archivo LICENSE.md para más detalles.

About

I'm developing a real-time Google Docs clone using Next.js15, React 19, Bun, and Tailwind CSS. This project enables collaborative document editing with instant updates for a smooth user experience.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published