https://github.com/marcelosanchezdev/paginapeliculas
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.
https://github.com/marcelosanchezdev/paginapeliculas
authentication axios bootstrap express frontend-backend fullstack jwt movie-app nodejs react sqlite tmdb-api vite zod
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/marcelosanchezdev/paginapeliculas
- Owner: MarceloSanchezDev
- Created: 2024-12-13T04:28:25.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-03T20:26:21.000Z (over 1 year ago)
- Last Synced: 2025-02-03T20:31:30.303Z (over 1 year ago)
- Topics: authentication, axios, bootstrap, express, frontend-backend, fullstack, jwt, movie-app, nodejs, react, sqlite, tmdb-api, vite, zod
- Language: JavaScript
- Homepage: https://pagina-de-peliculas.onrender.com/
- Size: 6.02 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pagina de Peliculas
## **Descripción del Proyecto**
La 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.
El 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.
---
## **Estructura del Proyecto**
```
paginapeliculas/
├── .env
├── backend/
│ ├── app.js
│ ├── controllers/
│ ├── dist/
│ ├── index.js
│ ├── models/
│ ├── node_modules/
│ ├── package.json
│ ├── routes/
│ ├── schema/
│ ├── utilsBackend/
├── frontend/
│ ├── dist/
│ ├── eslint.config.js
│ ├── index.html
│ ├── node_modules/
│ ├── package.json
│ ├── public/
│ ├── src/
│ ├── vite.config.js
├── node_modules/
├── package.json
├── README.md
```
---
## **Funcionalidades Principales**
### **Frontend:**
- **Página de inicio:** Listado de películas populares.
- **Búsqueda:** Permite buscar películas por título.
- **Favoritos:** Los usuarios autenticados pueden agregar o eliminar películas de su lista de favoritos.
- **Autenticación:** Formulario de inicio de sesión y registro.
- **Detalles de películas:** Información detallada sobre cada película.
### **Backend:**
- **Autenticación de usuarios:**
- Registro de nuevos usuarios con contraseñas cifradas usando `bcrypt`.
- Inicio de sesión con generación de tokens JWT.
- **Gestión de favoritos:** CRUD para la lista de favoritos del usuario.
- **Intermediario con TMDb:** Proxy para interactuar con la API de TMDb desde el servidor.
---
## **Detalles Técnicos**
### **Frontend:**
- **Framework:** React
- **Estilo:** Bootstrap y SweetAlert2 para notificaciones.
- **Routing:** `react-router-dom` para la navegación entre páginas.
- **Validación:** Validación de formularios y datos con Zod.
### **Backend:**
- **Framework:** Express.js
- **Base de datos:** SQLite utilizando `@libsql/client` para almacenamiento ligero.
- **Seguridad:** Autenticación con JWT y cifrado de contraseñas con `bcrypt`.
- **Validación de datos:** Zod para validar entradas y salidas.
### **Dependencias comunes:**
- **HTTP Client:** Axios para solicitudes HTTP tanto en frontend como en backend.
- **Gestión de variables de entorno:** dotenv.
---
## **Flujo de Trabajo**
### **Frontend:**
1. El usuario accede a la página principal y visualiza películas populares obtenidas desde TMDb.
2. Puede registrarse o iniciar sesión.
3. Una vez autenticado, puede:
- Buscar películas por título.
- Agregar películas a su lista de favoritos.
- Visualizar la lista de favoritos en su perfil.
### **Backend:**
1. Al registrarse, la contraseña del usuario se cifra antes de almacenarse en la base de datos.
2. En el inicio de sesión, se verifica la contraseña y se genera un token JWT.
3. El backend interactúa con la API de TMDb para obtener datos de películas y los devuelve al cliente.
4. La lista de favoritos se almacena en la base de datos y está asociada al usuario autenticado.
---
## **Ejecución del Proyecto**
### **Requisitos Previos:**
- Node.js v16+ y npm.
- Configuración de las variables de entorno:
- API_KEY de TMDb.
- Secretos para JWT.
### **Comandos Principales:**
1. **Instalación de dependencias:**
```bash
npm install
```
2. **Ejecución en modo desarrollo:**
```bash
npm run dev
```
3. **Compilación del Frontend:**
```bash
cd ./frontend && npm run build
```
4. **Ejecución del Backend:**
```bash
cd ./backend && npm run dev
```
---
## **Mejoras Futuras**
- Implementar soporte para OAuth2 para autenticación con Google o Facebook.
- Agregar la funcionalidad de comentarios y calificaciones en las películas.
- Soporte multilingüe para la interfaz de usuario.