Aplicación web moderna para la gestión centralizada de variables de entorno (.env) construida con React, TypeScript, Vite y PrimeReact.

• ✅ Gestión completa de entornos - Crear, editar, eliminar y visualizar entornos
• ✅ Comparador visual - Compara múltiples entornos para detectar diferencias
• ✅ Historial de cambios - Timeline completo de todas las modificaciones
• ✅ Exportación/Importación - Descarga archivos .env o copia al portapapeles
• ✅ Sincronización - Sincroniza variables entre múltiples entornos
• ✅ Dashboard con estadísticas - Visualiza métricas importantes
• ✅ Autenticación JWT - Sistema seguro de autenticación
• ✅ Diseño responsive - Optimizado para móviles, tablets y desktop
• ✅ Interfaz moderna - UI profesional con PrimeReact

• Node.js v22 o superior
• npm v10 o superior
• Backend de ENV Manager corriendo en http://localhost:5000

git clone <tu-repositorio>
cd env-manager-frontend

npm install

Crea un archivo .env en la raíz del proyecto:

VITE_API_URL=http://localhost:5000/api

npm run dev

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

# Desarrollo
npm run dev              # Inicia el servidor de desarrollo

# Producción
npm run build            # Compila el proyecto para producción
npm run preview          # Previsualiza el build de producción

# Linting
npm run lint             # Ejecuta ESLint

env-manager-frontend/
├── public/                          # Archivos estáticos
├── src/
│   ├── api/                        # Configuración de Axios
│   │   └── axios.ts
│   ├── components/                 # Componentes reutilizables
│   │   ├── auth/
│   │   │   ├── Login.tsx          # Componente de login
│   │   │   └── Register.tsx       # Componente de registro
│   │   ├── environments/
│   │   │   ├── EnvironmentList.tsx    # Lista de entornos
│   │   │   ├── EnvironmentForm.tsx    # Formulario crear/editar
│   │   │   ├── EnvironmentDetail.tsx  # Detalles del entorno
│   │   │   └── EnvironmentCompare.tsx # Comparador
│   │   └── layout/
│   │       ├── Navbar.tsx         # Barra de navegación
│   │       └── Layout.tsx         # Layout principal
│   ├── context/                    # Context API
│   │   └── AuthContext.tsx        # Contexto de autenticación
│   ├── hooks/                      # Custom hooks
│   │   └── useAuth.ts             # Hook de autenticación
│   ├── pages/                      # Páginas principales
│   │   ├── Dashboard.tsx          # Dashboard con estadísticas
│   │   ├── Environments.tsx       # Gestión de entornos
│   │   ├── Compare.tsx            # Comparador de entornos
│   │   └── History.tsx            # Historial de cambios
│   ├── types/                      # Definiciones de TypeScript
│   │   └── index.ts
│   ├── utils/                      # Utilidades
│   │   └── helpers.ts             # Funciones auxiliares
│   ├── App.tsx                     # Componente raíz
│   ├── main.tsx                    # Punto de entrada
│   └── index.css                   # Estilos globales
├── .env                            # Variables de entorno
├── index.html                      # HTML principal
├── package.json                    # Dependencias y scripts
├── tsconfig.json                   # Configuración TypeScript
├── vite.config.ts                  # Configuración Vite
└── README.md                       # Este archivo

• React 18.2 - Biblioteca de UI
• TypeScript 5.2 - Tipado estático
• Vite 5.0 - Build tool y dev server
• React Router 6.20 - Enrutamiento

• PrimeReact 10.2 - Biblioteca de componentes UI
• PrimeIcons 6.0 - Iconos
• CSS3 - Estilos personalizados

• Context API - Gestión de estado global
• Axios 1.6 - Cliente HTTP
• JWT - Autenticación

La aplicación utiliza JWT (JSON Web Tokens) para la autenticación:

1. El usuario inicia sesión con email y contraseña
2. El backend devuelve un token JWT
3. El token se almacena en localStorage
4. Todas las peticiones incluyen el token en el header Authorization

Usuario → Login → Backend → JWT Token → LocalStorage → Requests autenticadas

• Estadísticas generales
• Total de entornos, variables y secretos
• Gráficos de variables por entorno
• Lista de entornos recientes

• Lista completa de entornos
• Crear nuevo entorno desde archivo .env
• Editar entornos existentes
• Ver detalles de variables
• Copiar contenido al portapapeles
• Exportar a archivo .env
• Eliminar entornos

• Seleccionar múltiples entornos
• Comparación visual lado a lado
• Destacar diferencias
• Detectar variables faltantes

• Timeline de cambios
• Filtrar por entorno
• Ver qué variables cambiaron
• Quién realizó los cambios
• Fecha y hora de modificaciones

// Crear entorno
POST /api/environments
{
  "name": "production",
  "description": "Entorno de producción",
  "content": "KEY=value\nANOTHER_KEY=value"
}

// Actualizar entorno
PUT /api/environments/:id
{
  "variables": [
    { "key": "KEY", "value": "new_value", "isSecret": false }
  ]
}

// Comparar entornos
POST /api/environments/compare
{
  "environmentIds": ["id1", "id2", "id3"]
}

// Sincronizar variable
POST /api/environments/sync-variable
{
  "key": "API_KEY",
  "value": "new-value",
  "environmentIds": ["id1", "id2"]
}

Edita src/index.css:

/* Tema actual (azul) */
@import 'primereact/resources/themes/lara-light-blue/theme.css';

/* Otros temas disponibles */
/* @import 'https://redirect.github.com/primereact/resources/themes/lara-light-indigo/theme.css'; */
/* @import 'https://redirect.github.com/primereact/resources/themes/lara-light-purple/theme.css'; */
/* @import 'https://redirect.github.com/primereact/resources/themes/lara-light-teal/theme.css'; */
/* @import 'https://redirect.github.com/primereact/resources/themes/lara-dark-blue/theme.css'; */
/* @import 'https://redirect.github.com/primereact/resources/themes/bootstrap4-light-blue/theme.css'; */

Edita las variables CSS en src/index.css:

:root {
  --primary-color: #2196F3;
  --success-color: #4CAF50;
  --warning-color: #FFC107;
  --danger-color: #F44336;
}

npm run build

Los archivos compilados estarán en la carpeta dist/

npm run preview

Puedes desplegar la carpeta dist/ en cualquier servidor web estático:

• Vercel: vercel deploy
• Netlify: netlify deploy --prod --dir=dist
• GitHub Pages: Configurar GitHub Actions
• Nginx/Apache: Copiar contenido de dist/ al directorio web

# Verificar que el backend esté corriendo
curl http://localhost:5000

# Verificar la variable de entorno
cat .env

# Reinstalar dependencias
rm -rf node_modules package-lock.json
npm install

# Cambiar puerto en vite.config.ts
server: {
  port: 3001
}

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

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

1. Registrar usuario:

   • Ir a /register
   • Completar formulario
   • Click en "Registrarse"

2. Iniciar sesión:

   • Ir a /login
   • Ingresar credenciales
   • Click en "Iniciar Sesión"

3. Crear entorno:

   • Ir a "Entornos"
   • Click en "Nuevo Entorno"
   • Pegar contenido .env
   • Click en "Crear"

4. Comparar entornos:

   • Ir a "Comparar"
   • Seleccionar 2+ entornos
   • Click en "Comparar"

• Componentes: PascalCase (EnvironmentList.tsx)
• Funciones: camelCase (loadEnvironments)
• Constantes: UPPER_SNAKE_CASE (API_URL)
• Tipos: PascalCase con prefijo I (IEnvironment)

import React, { useState, useEffect } from 'react';
import { Component } from 'primereact/component';
import { Type } from '@/types';

interface Props {
  prop1: string;
  prop2: number;
}

export const ComponentName: React.FC<Props> = ({ prop1, prop2 }) => {
  const [state, setState] = useState<Type>(initialValue);

  useEffect(() => {
    // Effects
  }, []);

  const handleAction = () => {
    // Handler
  };

  return (
    <div>
      {/* JSX */}
    </div>
  );
};

En vite.config.ts:

import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@pages': path.resolve(__dirname, './src/pages'),
    },
  },
});

# .env.development
VITE_API_URL=http://localhost:5000/api

# .env.production
VITE_API_URL=https://api.production.com/api

# .env.staging
VITE_API_URL=https://api.staging.com/api

• React Documentation
• TypeScript Documentation
• Vite Documentation
• PrimeReact Documentation
• React Router Documentation

MIT

Las contribuciones son bienvenidas. Por favor:

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

Para preguntas o soporte, contacta a: [[email protected]]

• Tests unitarios con Vitest
• Tests E2E con Playwright
• Modo oscuro
• Internacionalización (i18n)
• PWA (Progressive Web App)
• Notificaciones en tiempo real
• Búsqueda avanzada de variables
• Filtros y ordenamiento mejorados
• Exportación a múltiples formatos
• Atajos de teclado
• Modo offline

Desarrollado con ❤️ usando React, TypeScript y PrimeReact