ClickMail 📧

Revoluciona tu Email Marketing con Inteligencia Artificial

🚀 Demo en Vivo • 📖 Documentación • 🐛 Reportar Bug • 💡 Solicitar Feature

ClickMail es la plataforma de email marketing del futuro. Utiliza inteligencia artificial avanzada para crear campañas de correo electrónico profesionales, personalizadas y altamente efectivas en minutos, no en horas.

¿Por qué conformarse con emails genéricos cuando puedes crear campañas que realmente conecten con tu audiencia?

✨ Características Principales

🤖 IA Avanzada Genera contenido de email personalizado usando OpenAI GPT-4, adaptado a tu audiencia y objetivos específicos	📊 Analytics Completo Dashboard intuitivo con métricas en tiempo real, tasas de apertura, clics y conversiones	⚡ Flujo Optimizado Crea campañas profesionales en 3 simples pasos: describe, genera y envía
🔐 Seguridad Avanzada Autenticación JWT robusta con encriptación de extremo a extremo	📱 Diseño Responsivo Interfaz adaptable con modo claro/oscuro, optimizada para todos los dispositivos	🎨 Templates Pro Biblioteca extensiva de plantillas profesionales y personalizables

🎯 Características Detalladas

🎨 Editor Visual Avanzado: Interfaz drag-and-drop para personalizar tus emails
📈 Análisis Predictivo: IA que predice el rendimiento de tus campañas
🔄 Automatización Inteligente: Secuencias de email automáticas basadas en comportamiento
👥 Segmentación Avanzada: Divide tu audiencia automáticamente usando IA
📋 A/B Testing: Optimiza tus campañas con pruebas automáticas
🌍 Localización: Soporte para múltiples idiomas y zonas horarias
📊 Reporting Avanzado: Exporta informes detallados en PDF/Excel
🔗 Integraciones: Conecta con CRM, e-commerce y herramientas populares

🎯 ¿Por Qué ClickMail?

Problema Tradicional	Solución ClickMail
⏰ Horas creando contenido	⚡ Contenido generado en segundos
📝 Emails genéricos	🎯 Mensajes personalizados por IA
📊 Métricas básicas	📈 Analytics predictivo avanzado
🔧 Configuración compleja	🚀 Setup en 3 pasos
💰 Costos elevados	💡 Precio justo y transparente

🚀 Inicio Rápido

Opción 1: Usar la Demo

# Visita nuestra demo en línea
https://click-mail.netlify.app

Opción 2: Docker (Recomendado)

# Clona y ejecuta con Docker
git clone https://github.com/joseorteha/ClickMail.git
cd ClickMail
docker-compose up -d

Opción 3: Desarrollo Local

Sigue las instrucciones detalladas en Instalación para Desarrollo.

💻 Instalación para Desarrollo

Prerrequisitos

Node.js >= 18.0.0
npm >= 8.0.0 o yarn >= 1.22.0
Git

Pasos de Instalación

Clona el repositorio

git clone https://github.com/joseorteha/ClickMail.git
cd ClickMail

Instala las dependencias
```
npm install
# o
yarn install
```

Configura las variables de entorno

cp .env.example .env

Edita el archivo .env con tus credenciales:

VITE_OPENAI_KEY=sk-tu_clave_openai_aqui
VITE_API_URL=http://localhost:3000/api
VITE_ENVIRONMENT=development

Inicia el servidor de desarrollo
```
npm run dev
# o
yarn dev
```
¡Listo! 🎉 Abre http://localhost:5173 en tu navegador.

🔧 Configuración

Variables de Entorno

Variable	Descripción	Requerida	Ejemplo
`VITE_OPENAI_KEY`	API Key de OpenAI	✅	`sk-...`
`VITE_API_URL`	URL del backend	✅	`https://api.clickmail.com`
`VITE_ENVIRONMENT`	Entorno de ejecución	❌	`development/production`
`VITE_ANALYTICS_ID`	Google Analytics ID	❌	`GA_MEASUREMENT_ID`

Scripts Disponibles

npm run dev          # Servidor de desarrollo
npm run build        # Build para producción
npm run preview      # Preview del build
npm run lint         # Linter ESLint
npm run type-check   # Verificación de tipos TypeScript
npm test             # Ejecutar tests
npm run test:coverage # Tests con cobertura

📱 Uso de la Aplicación

1. Registro y Autenticación

📧 Crea tu cuenta → ✉️ Verifica email → 🔐 Configura perfil

2. Crear Primera Campaña

📝 Describe tu producto → 🤖 IA genera contenido → 👀 Preview → 🚀 Enviar

3. Gestión de Campañas

Dashboard: Vista general de todas tus campañas
Editor: Personaliza templates y contenido
Analytics: Métricas detalladas de rendimiento
Audiencia: Gestiona y segmenta tus contactos

4. Funciones Avanzadas

Automatización: Configura secuencias de email
A/B Testing: Optimiza subject lines y contenido
Integraciones: Conecta con tus herramientas favoritas

🏗️ Arquitectura del Proyecto

ClickMail/
├── 📁 public/                 # Archivos estáticos
│   ├── 🖼️ logo1.svg
│   └── 📄 favicon.ico
├── 📁 src/
│   ├── 📁 components/         # Componentes React
│   │   ├── 📁 campaign/       # 🎯 Gestión de campañas
│   │   ├── 📁 common/         # 🔄 Componentes reutilizables
│   │   ├── 📁 dashboard/      # 📊 Visualización de datos
│   │   └── 📁 ui/             # 🎨 Componentes de interfaz
│   ├── 📁 context/           # ⚡ Estado global
│   │   ├── 🔐 AuthContext.tsx
│   │   ├── 🎨 ThemeContext.tsx
│   │   └── 🔔 ToastContext.tsx
│   ├── 📁 hooks/             # 🪝 Custom hooks
│   ├── 📁 pages/             # 📄 Páginas principales
│   │   ├── 📁 auth/          # 🔐 Autenticación
│   │   ├── 📁 campaign/      # 📧 Campañas
│   │   ├── 📁 dashboard/     # 📊 Panel principal
│   │   └── 📁 settings/      # ⚙️ Configuración
│   ├── 📁 services/          # 🌐 APIs y servicios
│   │   ├── 🤖 openai.ts
│   │   └── 📡 api.ts
│   ├── 📁 types/             # 📝 Definiciones TypeScript
│   ├── 📁 utils/             # 🛠️ Utilidades
│   └── 📁 styles/            # 🎨 Estilos globales
├── 📄 package.json
├── 📄 tsconfig.json
├── 📄 vite.config.ts
└── 📄 tailwind.config.js

🛠️ Stack Tecnológico

Frontend Core

⚛️ React 18 - Biblioteca de interfaces de usuario
📘 TypeScript 5 - Tipado estático y mejor DX
⚡ Vite 5 - Build tool ultrarrápido
🎨 Tailwind CSS 3 - Framework CSS utility-first

Estado y Navegación

🗂️ Context API - Gestión de estado global
🛣️ React Router 6 - Enrutamiento SPA
🪝 Custom Hooks - Lógica reutilizable

APIs y Servicios

🤖 OpenAI GPT-4 - Generación de contenido IA
🔐 JWT - Autenticación segura
📡 Fetch API - Comunicación HTTP

Desarrollo y Build

📋 ESLint - Linting de código
🎯 Prettier - Formateo automático
🧪 Vitest - Testing framework
📦 Netlify - Despliegue automático

🌐 Despliegue

Netlify (Automático)

El proyecto se despliega automáticamente en Netlify desde la rama development:

Configuración automática via netlify.toml
Variables de entorno configuradas en panel de Netlify
Deploy preview para cada PR
SSL automático y CDN global

Manual (Otros Proveedores)

# Build para producción
npm run build

# Los archivos se generan en /dist
# Sube el contenido de /dist a tu proveedor

Docker

# Dockerfile incluido para containerización
docker build -t clickmail-frontend .
docker run -p 80:80 clickmail-frontend

🤝 Contribuir

¡Las contribuciones son muy bienvenidas! 🎉

Proceso de Contribución

Fork el repositorio
Crea una rama para tu feature (git checkout -b feature/amazing-feature)
Commit tus cambios (git commit -m 'Add amazing feature')
Push a la rama (git push origin feature/amazing-feature)
Abre un Pull Request

Convenciones

Commits: Usa Conventional Commits
Código: Sigue las reglas de ESLint y Prettier
Tests: Añade tests para nuevas funcionalidades
Documentación: Actualiza README si es necesario

Areas de Contribución

Área	Descripción	Dificultad
🐛 Bug Fixes	Corregir errores existentes	🟢 Fácil
✨ Features	Nuevas funcionalidades	🟡 Medio
📚 Docs	Mejorar documentación	🟢 Fácil
🎨 UI/UX	Mejoras de diseño	🟡 Medio
⚡ Performance	Optimizaciones	🔴 Difícil
🧪 Testing	Añadir tests	🟡 Medio

📄 Licencia

Este proyecto está licenciado bajo la Licencia MIT. Ver LICENSE para más detalles.

MIT License - Puedes usarlo, modificarlo y distribuirlo libremente.

🆘 Soporte

📞 Contacto

🐛 Bug Reports: GitHub Issues
💡 Feature Requests: GitHub Discussions
📧 Email: soporte@clickmail.com
💬 Discord: Únete a nuestra comunidad

📚 Recursos

🏷️ Status del Proyecto

¿Te gusta ClickMail? ⭐ ¡Dale una estrella en GitHub!

¿Quieres contribuir? 🤝 ¡Lee nuestra guía de contribución!

¿Necesitas ayuda? 💬 ¡Únete a nuestra comunidad!

Hecho con ❤️ por el equipo de ClickMail

⬆️ Volver al inicio

Name		Name	Last commit message	Last commit date
Latest commit History 20 Commits
public		public
src		src
.gitignore		.gitignore
README.md		README.md
clikmail.md		clikmail.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.cjs		postcss.config.cjs
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.app.tsbuildinfo		tsconfig.app.tsbuildinfo
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

joseorteha/ClickMail

Folders and files

Latest commit

History

Repository files navigation

ClickMail 📧

Revoluciona tu Email Marketing con Inteligencia Artificial

📑 Tabla de Contenidos

✨ Características Principales

🤖 IA Avanzada

📊 Analytics Completo

⚡ Flujo Optimizado

🔐 Seguridad Avanzada

📱 Diseño Responsivo

🎨 Templates Pro

🎯 Características Detalladas

🎯 ¿Por Qué ClickMail?

🚀 Inicio Rápido

Opción 1: Usar la Demo

Opción 2: Docker (Recomendado)

Opción 3: Desarrollo Local

💻 Instalación para Desarrollo

Prerrequisitos

Pasos de Instalación

🔧 Configuración

Variables de Entorno

Scripts Disponibles

📱 Uso de la Aplicación

1. Registro y Autenticación

2. Crear Primera Campaña

3. Gestión de Campañas

4. Funciones Avanzadas

🏗️ Arquitectura del Proyecto

🛠️ Stack Tecnológico

Frontend Core

Estado y Navegación

APIs y Servicios

Desarrollo y Build

🌐 Despliegue

Netlify (Automático)

Manual (Otros Proveedores)

Docker

🤝 Contribuir

Proceso de Contribución

Convenciones

Areas de Contribución

📄 Licencia

🆘 Soporte

📞 Contacto

📚 Recursos

🏷️ Status del Proyecto

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 2

Uh oh!

Languages

Packages