{"id":23907444,"url":"https://github.com/marcelosanchezdev/paginapeliculas","last_synced_at":"2026-04-09T12:01:16.607Z","repository":{"id":267897185,"uuid":"902690608","full_name":"MarceloSanchezDev/PaginaPeliculas","owner":"MarceloSanchezDev","description":"Página de Películas Una aplicación web para explorar, buscar y gestionar películas favoritas. Utiliza la API de TMDb para obtener datos de películas y cuenta con un sistema de autenticación desarrollado en Node.js. Frontend creado con React y estilizado con Bootstrap.","archived":false,"fork":false,"pushed_at":"2025-02-03T20:26:21.000Z","size":6310,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-03T20:31:30.303Z","etag":null,"topics":["authentication","axios","bootstrap","express","frontend-backend","fullstack","jwt","movie-app","nodejs","react","sqlite","tmdb-api","vite","zod"],"latest_commit_sha":null,"homepage":"https://pagina-de-peliculas.onrender.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MarceloSanchezDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-13T04:28:25.000Z","updated_at":"2025-02-03T20:26:25.000Z","dependencies_parsed_at":"2025-01-04T04:17:37.944Z","dependency_job_id":"333f0acf-9eb3-4086-b36f-5f13eb28d695","html_url":"https://github.com/MarceloSanchezDev/PaginaPeliculas","commit_stats":null,"previous_names":["marcelosanchezdev/paginapeliculas"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarceloSanchezDev%2FPaginaPeliculas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarceloSanchezDev%2FPaginaPeliculas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarceloSanchezDev%2FPaginaPeliculas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarceloSanchezDev%2FPaginaPeliculas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MarceloSanchezDev","download_url":"https://codeload.github.com/MarceloSanchezDev/PaginaPeliculas/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240331317,"owners_count":19784643,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","axios","bootstrap","express","frontend-backend","fullstack","jwt","movie-app","nodejs","react","sqlite","tmdb-api","vite","zod"],"created_at":"2025-01-05T03:11:56.009Z","updated_at":"2025-12-30T19:40:45.020Z","avatar_url":"https://github.com/MarceloSanchezDev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pagina de Peliculas\n\n## **Descripción del Proyecto**\nLa aplicación es una plataforma que permite a los usuarios explorar, buscar y guardar películas favoritas utilizando la API de TMDb (The Movie Database). Incluye un sistema de autenticación desarrollado con Node.js y JWT (JSON Web Tokens) para gestionar usuarios y sesiones de manera segura.\n\nEl frontend está construido con React y estilizado con Bootstrap para garantizar una experiencia visual atractiva y responsiva. Además, se utilizan herramientas modernas como Vite para el desarrollo rápido del frontend y Zod para la validación de datos tanto en el cliente como en el servidor.\n\n---\n\n## **Estructura del Proyecto**\n\n```\npaginapeliculas/\n├── .env\n├── backend/\n│   ├── app.js\n│   ├── controllers/\n│   ├── dist/\n│   ├── index.js\n│   ├── models/\n│   ├── node_modules/\n│   ├── package.json\n│   ├── routes/\n│   ├── schema/\n│   ├── utilsBackend/\n├── frontend/\n│   ├── dist/\n│   ├── eslint.config.js\n│   ├── index.html\n│   ├── node_modules/\n│   ├── package.json\n│   ├── public/\n│   ├── src/\n│   ├── vite.config.js\n├── node_modules/\n├── package.json\n├── README.md\n```\n\n---\n\n## **Funcionalidades Principales**\n\n### **Frontend:**\n- **Página de inicio:** Listado de películas populares.\n- **Búsqueda:** Permite buscar películas por título.\n- **Favoritos:** Los usuarios autenticados pueden agregar o eliminar películas de su lista de favoritos.\n- **Autenticación:** Formulario de inicio de sesión y registro.\n- **Detalles de películas:** Información detallada sobre cada película.\n\n### **Backend:**\n- **Autenticación de usuarios:**\n  - Registro de nuevos usuarios con contraseñas cifradas usando `bcrypt`.\n  - Inicio de sesión con generación de tokens JWT.\n- **Gestión de favoritos:** CRUD para la lista de favoritos del usuario.\n- **Intermediario con TMDb:** Proxy para interactuar con la API de TMDb desde el servidor.\n\n---\n\n## **Detalles Técnicos**\n\n### **Frontend:**\n- **Framework:** React\n- **Estilo:** Bootstrap y SweetAlert2 para notificaciones.\n- **Routing:** `react-router-dom` para la navegación entre páginas.\n- **Validación:** Validación de formularios y datos con Zod.\n\n### **Backend:**\n- **Framework:** Express.js\n- **Base de datos:** SQLite utilizando `@libsql/client` para almacenamiento ligero.\n- **Seguridad:** Autenticación con JWT y cifrado de contraseñas con `bcrypt`.\n- **Validación de datos:** Zod para validar entradas y salidas.\n\n### **Dependencias comunes:**\n- **HTTP Client:** Axios para solicitudes HTTP tanto en frontend como en backend.\n- **Gestión de variables de entorno:** dotenv.\n\n---\n\n## **Flujo de Trabajo**\n\n### **Frontend:**\n1. El usuario accede a la página principal y visualiza películas populares obtenidas desde TMDb.\n2. Puede registrarse o iniciar sesión.\n3. Una vez autenticado, puede:\n   - Buscar películas por título.\n   - Agregar películas a su lista de favoritos.\n   - Visualizar la lista de favoritos en su perfil.\n\n### **Backend:**\n1. Al registrarse, la contraseña del usuario se cifra antes de almacenarse en la base de datos.\n2. En el inicio de sesión, se verifica la contraseña y se genera un token JWT.\n3. El backend interactúa con la API de TMDb para obtener datos de películas y los devuelve al cliente.\n4. La lista de favoritos se almacena en la base de datos y está asociada al usuario autenticado.\n\n---\n\n## **Ejecución del Proyecto**\n\n### **Requisitos Previos:**\n- Node.js v16+ y npm.\n- Configuración de las variables de entorno:\n  - API_KEY de TMDb.\n  - Secretos para JWT.\n\n### **Comandos Principales:**\n\n1. **Instalación de dependencias:**\n   ```bash\n   npm install\n   ```\n\n2. **Ejecución en modo desarrollo:**\n   ```bash\n   npm run dev\n   ```\n\n3. **Compilación del Frontend:**\n   ```bash\n   cd ./frontend \u0026\u0026 npm run build\n   ```\n\n4. **Ejecución del Backend:**\n   ```bash\n   cd ./backend \u0026\u0026 npm run dev\n   ```\n\n---\n\n## **Mejoras Futuras**\n\n- Implementar soporte para OAuth2 para autenticación con Google o Facebook.\n- Agregar la funcionalidad de comentarios y calificaciones en las películas.\n- Soporte multilingüe para la interfaz de usuario.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcelosanchezdev%2Fpaginapeliculas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcelosanchezdev%2Fpaginapeliculas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcelosanchezdev%2Fpaginapeliculas/lists"}