SecureFiles - Aplicación de Cifrado de Archivos

Una aplicación web moderna para cifrar, subir y gestionar archivos de forma segura. Construida con Next.js 15, TypeScript, Tailwind CSS y una API backend para el cifrado AES-256-GCM.

🚀 Características

• Autenticación segura con JWT
• Cifrado de archivos con AES-256-GCM
• Interfaz moderna con dark mode
• Gestión completa de archivos (subir, descargar, eliminar)
• Responsive design optimizado para móviles
• Efectos glassmorphism para una UI moderna

🛠️ Tecnologías

• Frontend: Next.js 15, React 19, TypeScript
• Estilos: Tailwind CSS 4
• Iconos: Lucide React
• HTTP Client: Axios
• Autenticación: JWT con localStorage

📋 Requisitos Previos

• Node.js 18+
• npm o yarn
• API Backend funcionando (puerto 8080 por defecto)

🔧 Instalación

1. Clona el repositorio

   git clone <tu-repositorio>
   cd proyecto_teoria_informacion

2. Instala las dependencias

   npm install

3. Configura las variables de entorno

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

   NEXT_PUBLIC_API_URL=http://localhost:8080

4. Inicia el servidor de desarrollo

   npm run dev

5. Abre tu navegador

   Ve a http://localhost:3000

🎯 Uso

Autenticación

La aplicación incluye usuarios de prueba:

• Administrador: admin / admin123
• Usuario: user / user123

También puedes registrar nuevos usuarios desde la interfaz.

Gestión de Archivos

1. Subir archivos: Selecciona un archivo y proporciona una contraseña para cifrarlo
2. Descargar archivos: Ingresa la contraseña correcta para descifrar y descargar
3. Eliminar archivos: Elimina archivos que ya no necesites

Características de Seguridad

• Cada archivo se cifra con una contraseña única
• Las contraseñas no se almacenan en el servidor
• Autenticación JWT con expiración de 24 horas
• Cifrado AES-256-GCM con IV y salt únicos

🏗️ Estructura del Proyecto

src/
├── app/                    # App Router de Next.js
│   ├── globals.css        # Estilos globales y variables CSS
│   ├── layout.tsx         # Layout principal
│   └── page.tsx           # Página principal
├── components/            # Componentes React
│   ├── ui/               # Componentes UI reutilizables
│   │   ├── Button.tsx    # Componente Button
│   │   └── Input.tsx     # Componente Input
│   ├── AuthForm.tsx      # Formulario de autenticación
│   └── FileManager.tsx   # Gestor de archivos
├── contexts/             # Contextos de React
│   └── AuthContext.tsx   # Contexto de autenticación
├── services/             # Servicios y API
│   └── api.ts           # Cliente API con Axios
└── types/               # Tipos TypeScript
    └── api.ts           # Tipos para la API

🎨 Diseño

La aplicación utiliza un diseño moderno con:

• Dark mode por defecto
• Gradientes purple/pink para elementos destacados
• Glassmorphism para paneles y tarjetas
• Animaciones suaves y transiciones
• Iconos consistentes de Lucide React

🔌 API Endpoints

La aplicación se conecta a los siguientes endpoints:

Autenticación

• POST /auth/signup - Registro de usuario
• POST /auth/signin - Inicio de sesión

Archivos

• GET /files - Listar archivos del usuario
• POST /files/upload - Subir y cifrar archivo
• GET /files/download/{id} - Descargar y descifrar archivo
• DELETE /files/{id} - Eliminar archivo

🚀 Despliegue

Desarrollo

npm run dev

Producción

npm run build
npm start

Variables de Entorno para Producción

Asegúrate de configurar:

NEXT_PUBLIC_API_URL=https://tu-api-backend.com

🤝 Contribución

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

📝 Licencia

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

🐛 Problemas Conocidos

• Los archivos tienen un límite de 10MB
• La aplicación requiere JavaScript habilitado
• Compatible con navegadores modernos (Chrome 90+, Firefox 88+, Safari 14+)

📞 Soporte

Si encuentras algún problema o tienes preguntas:

1. Revisa la documentación de la API
2. Verifica que el backend esté funcionando
3. Comprueba la configuración de variables de entorno
4. Abre un issue en el repositorio