📄 CV Builder

Plataforma para crear, gestionar y compartir currículums vitae de manera fácil y elegante.

✨ Características

🎨 Diseño Profesional

Diseño responsive optimizado para todos los dispositivos
Tema elegante con tipografía profesional
Optimizado para impresión con formato A4 perfecto
Interfaz intuitiva y fácil de usar

🔗 Enlaces Compartibles

Genera enlaces únicos para compartir tu CV
URLs personalizables con IDs cortos y memorables
Control de expiración configurable
Contador de visualizaciones automático
SEO optimizado para redes sociales

💾 Gestión de Datos

Almacenamiento local con Zustand para edición rápida
Sincronización con MongoDB para enlaces compartidos
Backup automático de tus datos
Exportación en múltiples formatos

🛠️ Panel de Administración

Editor visual con vista previa en tiempo real
Secciones modulares: Personal, Contacto, Experiencia, Educación, Habilidades, Proyectos
Carga de imágenes para avatar y proyectos
Datos de ejemplo para comenzar rápidamente

🚀 Instalación y Ejecución

📋 Prerrequisitos

Antes de comenzar, asegúrate de tener instalado:

Node.js 18.0 o superior → Descargar
pnpm 8.0 o superior → Instalar pnpm
MongoDB (local o Atlas) → MongoDB Community o MongoDB Atlas
Git → Descargar Git

🔧 Instalación Paso a Paso

1. Clonar el Repositorio

# Clonar desde GitHub
git clone https://github.com/tu-usuario/cv-builder.git

# Entrar al directorio
cd cv-builder

# Verificar que estás en la rama correcta
git branch

2. Instalar Dependencias

# Instalar todas las dependencias del monorepo
pnpm install

# Verificar que se instalaron correctamente
pnpm list --depth=0

3. Configurar Variables de Entorno

# Copiar el archivo de ejemplo
cp .env.example .env

# Editar el archivo .env con tu editor favorito
# Windows:
notepad .env

# macOS/Linux:
nano .env
# o
code .env

4. Configurar MongoDB

Opción A: MongoDB Local

# Instalar MongoDB Community Server
# Windows: Descargar desde https://www.mongodb.com/try/download/community
# macOS: brew install mongodb-community
# Ubuntu: sudo apt install mongodb

# Iniciar MongoDB
# Windows: net start MongoDB
# macOS/Linux: sudo systemctl start mongod

# Verificar que MongoDB está corriendo
# Debería conectarse sin errores
mongosh

Opción B: MongoDB Atlas (Recomendado)

# 1. Crear cuenta en https://www.mongodb.com/atlas
# 2. Crear un cluster gratuito
# 3. Obtener la connection string
# 4. Agregar tu IP a la whitelist
# 5. Crear un usuario de base de datos

5. Configurar el Archivo .env

# Editar .env con tus configuraciones:

# Para MongoDB Local:
MONGODB_URI=mongodb://localhost:27017/cv-database

# Para MongoDB Atlas:
MONGODB_URI=mongodb+srv://usuario:password@cluster.mongodb.net/cv-database?retryWrites=true&w=majority

# URL de la aplicación
NEXT_PUBLIC_URL=http://localhost:3000

# Opcional: Telegram (para notificaciones)
TELEGRAM_BOT=tu_bot_token_aqui
TELEGRAM_CHAT=tu_chat_id_aqui

🚀 Ejecutar la Aplicación

Modo Desarrollo

# Iniciar el servidor de desarrollo
pnpm web:dev

# La aplicación estará disponible en:
# http://localhost:3000

Verificar que Todo Funciona

# 1. Abrir navegador en http://localhost:3000
# 2. Deberías ver la página principal del CV
# 3. Ir a http://localhost:3000/admin para el panel de administración
# 4. Completar tu información personal
# 5. Ir a la pestaña "🔗 Generar Enlace" para probar la funcionalidad

🔍 Solución de Problemas Comunes

Error: "Cannot connect to MongoDB"

# Verificar que MongoDB está corriendo
# Local:
mongosh

# Atlas: Verificar connection string y whitelist de IP
# Ir a MongoDB Atlas → Network Access → Add IP Address

Error: "pnpm command not found"

# Instalar pnpm globalmente
npm install -g pnpm

# O usar npx
npx pnpm install

Error: "Port 3000 is already in use"

# Usar un puerto diferente
PORT=3001 pnpm web:dev

# O matar el proceso que usa el puerto 3000
# Windows:
netstat -ano | findstr :3000
taskkill /PID <PID> /F

# macOS/Linux:
lsof -ti:3000 | xargs kill -9

Error: "Module not found"

# Limpiar cache y reinstalar
rm -rf node_modules
rm pnpm-lock.yaml
pnpm install

# O limpiar cache de Next.js
rm -rf .next
pnpm web:dev

🏗️ Comandos de Desarrollo

# Desarrollo
pnpm web:dev              # Servidor de desarrollo
pnpm web:build            # Build de producción
pnpm web:start            # Servidor de producción

# Calidad de código
pnpm lint                 # Verificar código con ESLint
pnpm lint:fix             # Arreglar errores automáticamente
pnpm type                 # Verificar tipos TypeScript
pnpm format               # Formatear con Prettier

# Monorepo
pnpm build                # Build de todos los packages
pnpm clean                # Limpiar builds y cache
pnpm dev                  # Desarrollo de todos los packages

📱 Acceder a la Aplicación

Una vez que el servidor esté corriendo:

# Página principal (CV público)
http://localhost:3000

# Panel de administración
http://localhost:3000/admin

# Página de login (si implementas autenticación)
http://localhost:3000/login

# Ejemplo de CV compartido
http://localhost:3000/share/abc123def456

Variables de Entorno

# MongoDB
MONGODB_URI=mongodb://localhost:27017/cv-database
# o para MongoDB Atlas:
# MONGODB_URI=mongodb+srv://usuario:password@cluster.mongodb.net/cv-database

# Next.js
NEXT_PUBLIC_URL=http://localhost:3000

# Opcional: Telegram Bot (para notificaciones)
TELEGRAM_BOT=tu_bot_token
TELEGRAM_CHAT=tu_chat_id

📖 Uso

1. Crear tu CV

# Ir al panel de administración
http://localhost:3000/admin

# Completar las secciones:
# - Información Personal
# - Contacto  
# - Acerca de Mí
# - Experiencia Laboral
# - Educación
# - Habilidades
# - Proyectos

2. Generar Enlace Compartible

# En el panel de admin, ir a "🔗 Generar Enlace"
# Configurar título, descripción y expiración
# Obtener enlace único: https://tu-dominio.com/share/abc123

3. Compartir tu CV

# El enlace se puede compartir en:
# - LinkedIn (sección de contacto)
# - Email (firma profesional)  
# - Redes sociales (bio)
# - Aplicaciones de trabajo
# - Tarjetas de presentación (QR)

🏗️ Arquitectura

Monorepo con Turbo

cv-builder/
├── apps/
│   └── web/                 # Aplicación Next.js principal
├── packages/
│   ├── config/             # Configuraciones compartidas
│   ├── lib/                # Utilidades compartidas
│   ├── mongodb/            # Modelos y conexión a DB
│   ├── trpc/               # API con tRPC
│   ├── types/              # Tipos TypeScript
│   └── tsconfig/           # Configuraciones TS

Stack Tecnológico

Frontend

Next.js 15 - Framework React con SSR
TypeScript - Tipado estático
Tailwind CSS - Estilos utilitarios
Zustand - Gestión de estado
React Hook Form - Manejo de formularios

Backend

tRPC - API type-safe
MongoDB - Base de datos NoSQL
Mongoose - ODM para MongoDB
Zod - Validación de esquemas

DevOps

Turbo - Monorepo y build system
ESLint - Linting de código
Prettier - Formateo de código
Husky - Git hooks

📁 Estructura del Proyecto

Aplicación Web (`apps/web/`)

apps/web/
├── components/
│   ├── atoms/              # Componentes básicos
│   ├── molecules/          # Componentes compuestos
│   └── organism/           # Componentes complejos
├── pages/
│   ├── admin.tsx           # Panel de administración
│   ├── share/[shareId].tsx # Visualización de CVs compartidos
│   └── index.tsx           # Página principal
├── store/                  # Estado global con Zustand
├── types/                  # Tipos específicos de la app
└── utils/                  # Utilidades y helpers

Packages

packages/
├── mongodb/
│   ├── models/             # Modelos de Mongoose
│   └── dbConnect.ts        # Conexión a MongoDB
├── trpc/
│   ├── server/             # Configuración del servidor
│   └── react/              # Cliente React
└── types/                  # Tipos compartidos

🔧 Scripts Disponibles

# Desarrollo
pnpm web:dev              # Iniciar app en desarrollo
pnpm web:build            # Build de producción
pnpm web:start            # Iniciar app en producción

# Calidad de código
pnpm lint                 # Ejecutar ESLint
pnpm type                 # Verificar tipos TypeScript
pnpm format               # Formatear código con Prettier

# Base de datos
pnpm db:seed              # Poblar DB con datos de ejemplo
pnpm db:reset             # Resetear base de datos

🌐 Despliegue

Vercel (Recomendado)

# Conectar con Vercel
vercel

# Configurar variables de entorno en Vercel dashboard
# Desplegar
vercel --prod

Docker

# Build de la imagen
docker build -t cv-builder .

# Ejecutar contenedor
docker run -p 3000:3000 cv-builder

Variables de Entorno en Producción

MONGODB_URI=mongodb+srv://...
NEXT_PUBLIC_URL=https://tu-dominio.com
NODE_ENV=production

🤝 Contribuir

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

Guías de Contribución

Seguir las convenciones de código existentes
Agregar tests para nuevas funcionalidades
Actualizar documentación cuando sea necesario
Usar commits descriptivos

📝 Roadmap

v1.1 - Próximas Funcionalidades

Temas personalizables para CVs
Exportación a PDF nativa
Múltiples idiomas de interfaz
Dashboard de analytics detallado
API pública para integraciones

v1.2 - Funcionalidades Avanzadas

📄 Licencia

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

🙏 Agradecimientos

Next.js por el excelente framework
Vercel por el hosting gratuito
MongoDB por la base de datos
Tailwind CSS por los estilos
tRPC por la API type-safe

¿Te gusta el proyecto? ¡Dale una ⭐ en GitHub!

🌐 Demo en Vivo • 📖 Documentación • 🐛 Reportar Bug

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
.husky		.husky
apps		apps
packages		packages
.env.example		.env.example
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.ncurc.json		.ncurc.json
.npmrc		.npmrc
.nvmrc		.nvmrc
.prettierignore		.prettierignore
BACKEND.md		BACKEND.md
LICENSE		LICENSE
README.md		README.md
SOURCE.md		SOURCE.md
next.config.js		next.config.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
prettier.config.js		prettier.config.js
turbo.json		turbo.json
vercel.json		vercel.json

Uh oh!

License

Uh oh!

4lexxe/cv-editor-web

Folders and files

Latest commit

History

Repository files navigation

📄 CV Builder

✨ Características

🎨 Diseño Profesional

🔗 Enlaces Compartibles

💾 Gestión de Datos

🛠️ Panel de Administración

🚀 Instalación y Ejecución

📋 Prerrequisitos

🔧 Instalación Paso a Paso

1. Clonar el Repositorio

2. Instalar Dependencias

3. Configurar Variables de Entorno

4. Configurar MongoDB

5. Configurar el Archivo .env

🚀 Ejecutar la Aplicación

Modo Desarrollo

Verificar que Todo Funciona

🔍 Solución de Problemas Comunes

Error: "Cannot connect to MongoDB"

Error: "pnpm command not found"

Error: "Port 3000 is already in use"

Error: "Module not found"

🏗️ Comandos de Desarrollo

📱 Acceder a la Aplicación

Variables de Entorno

📖 Uso

1. Crear tu CV

2. Generar Enlace Compartible

3. Compartir tu CV

🏗️ Arquitectura

Monorepo con Turbo

Stack Tecnológico

Frontend

Backend

DevOps

📁 Estructura del Proyecto

Aplicación Web (apps/web/)

Packages

🔧 Scripts Disponibles

🌐 Despliegue

Vercel (Recomendado)

Docker

Variables de Entorno en Producción

🤝 Contribuir

Guías de Contribución

📝 Roadmap

v1.1 - Próximas Funcionalidades

v1.2 - Funcionalidades Avanzadas

📄 Licencia

🙏 Agradecimientos

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Aplicación Web (`apps/web/`)

Packages