Una plataforma web comunitaria para descubrir y compartir información sobre películas y series
- Sobre el Proyecto
- Características
- Tecnologías
- Instalación y Configuración
- Uso
- Estructura del Proyecto
- Licencia
- Autor
Fliverse es una aplicación web desarrollada como Proyecto de Fin de Grado (TFG) que funciona como una plataforma comunitaria para la gestión y descubrimiento de contenido audiovisual.
Crear una experiencia de usuario moderna e intuitiva donde los usuarios puedan:
- Buscar y descubrir películas y series
- Contribuir añadiendo nueva información
- Interactuar con la comunidad mediante comentarios
- Organizar su contenido en listas personalizadas
- Gestionar su perfil y preferencias
-
Sistema de Autenticación
- Registro e inicio de sesión tradicional
- Integración con Google OAuth
- Gestión segura de sesiones
-
Gestión de Contenido
- Búsqueda avanzada de películas y series
- Páginas detalladas con información completa
- Reproductor de tráilers integrado con YouTube
- Sistema de valoraciones y comentarios
-
Listas Personalizadas
- Creación y gestión de listas personalizadas
- Marcado de contenido como visto/por ver
- Seguimiento del progreso de visualización
-
Funciones Sociales
- Sistema de comentarios y valoraciones
- Perfiles de usuario personalizables
- Interacción comunitaria
- Diseño Responsivo: Optimizado para todos los dispositivos
- Carga Rápida: Optimizaciones de rendimiento y lazy loading
- Animaciones Fluidas: Transiciones suaves con GSAP
- Accesibilidad: Cumple con estándares de accesibilidad web
- Angular 19.2.8 - Framework principal
- TypeScript - Lenguaje de programación
- Angular Material - Componentes UI
- Tailwind CSS - Framework de utilidades CSS
- GSAP - Animaciones avanzadas
- Axios - Cliente HTTP
- Moment.js - Manejo de fechas
- YouTube Player - Reproductor de videos
- Vercel Analytics - Análisis de rendimiento
- Angular CLI - Herramientas de desarrollo
Asegúrate de tener instalado:
- Node.js (versión 18 o superior)
- npm (viene con Node.js)
- Angular CLI (versión 19)
# Verificar versiones
node --version
npm --version
# Instalar Angular CLI globalmente (opcional)
npm install -g @angular/cli-
Clonar el repositorio
git clone https://github.com/BetaGun03/fliverse-frontend.git cd fliverse-frontend -
Instalar dependencias
npm install
-
Configurar variables de entorno (si es necesario)
# Crear archivo de configuración cp src/environments/environment.example.ts src/environments/environment.ts -
Iniciar el servidor de desarrollo
npm start # o usando Angular CLI ng serve -
Abrir en el navegador
http://localhost:4200
| Comando | Descripción |
|---|---|
ng s -o |
Inicia el servidor de desarrollo y abre el navegador |
ng build |
Construye la aplicación para producción |
- Inicio (
/) - Página principal con contenido destacado - Búsqueda (
/search) - Búsqueda avanzada de contenido - Mis Listas (
/lists) - Gestión de listas personalizadas - Perfil (
/profile) - Información del usuario - Auth (
/login,/register) - Sistema de autenticación
src/
├── 📁 app/
│ ├── 📁 components/ # Componentes reutilizables
│ │ ├── 📁 header/ # Barra de navegación
│ │ ├── 📁 footer/ # Pie de página
│ │ ├── 📁 home/ # Página principal
│ │ ├── 📁 search/ # Búsqueda
│ │ ├── 📁 content/ # Detalles de contenido
│ │ ├── 📁 lists/ # Gestión de listas
│ │ ├── 📁 login/ # Autenticación
│ │ └── 📁 ... # Otros componentes
│ ├── 📁 services/ # Servicios de la aplicación
│ │ ├── 📁 auth/ # Servicio de autenticación
│ │ ├── 📁 content/ # Servicio de contenido
│ │ ├── 📁 list/ # Servicio de listas
│ │ └── 📁 comment/ # Servicio de comentarios
│ ├── 📁 guards/ # Guards de rutas
│ ├── 📁 interfaces/ # Interfaces TypeScript
│ ├── 📁 enums/ # Enumeraciones
│ └── 📁 ... # Configuración de la app
└── 📄 ... # Archivos de configuración
Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.
Jaime Hedrera Rosa - Desarrollador Full Stack
- Portafolio: jaimehedrera.es
- LinkedIn: Jaime Hedrera Rosa
- Email: business@jaimehedrera.es
- GitHub: @BetaGun03
Desarrollado como TFG por Jaime Hedrera Rosa.