📱 View App — Mini Red Social

Aplicación web híbrida tipo red social profesional, desarrollada con React en el frontend y Node.js/Express en el backend. Utiliza un modelo de base de datos híbrido: PostgreSQL para autenticación de usuarios y MongoDB Atlas para el registro de clientes con operaciones CRUD.

---

🏗️ Arquitectura del Proyecto

03-View/ ├── Frontend/ ← App React + Vite + Tailwind └── Backend/ ← API REST con Node.js + Express

Tecnologías usadas

Capa	Tecnología
Frontend	React 19, Vite, Tailwind CSS, React Router
Backend	Node.js, Express
BD Relacional	PostgreSQL (login y usuarios)
BD NoSQL	MongoDB Atlas (clientes CRUD)
Autenticación	JWT (JSON Web Tokens)
PDF Export	jsPDF

---

📸 Vista previa

Pantalla de Login

Home — Directorio de usuarios

Mi Perfil

Panel Admin — Usuarios

Panel Admin — Clientes (MongoDB)

---

📋 Funcionalidades

• 🔐 Login y Registro de usuarios con contraseña encriptada (bcrypt)
• 👤 Perfil editable — nombre, correo, descripción y foto de perfil
• 🏠 Home / Directorio — lista de todos los usuarios registrados
• 👁️ Perfil público — vista pública de cada usuario
• 🛡️ Panel Admin — gestión de usuarios y generación de PDF por usuario
• 📄 Exportación a PDF desde el panel admin
• 🗂️ CRUD de Clientes en MongoDB Atlas (colección NoSQL)
• 🔒 Rutas protegidas — solo usuarios autenticados pueden acceder

---

⚙️ Requisitos previos

• Node.js LTS instalado
• PostgreSQL instalado y corriendo localmente
• Cuenta en MongoDB Atlas (gratuita)
• Git instalado

---

🚀 Instalación y configuración

1. Clonar el repositorio

git clone https://github.com/AlejaR522/View.git
cd 03-View

2. Configurar el Backend

cd Backend
npm install

Crear .env en Backend/:

PORT=5000
MONGODB_URI=mongodb+srv://ViewApp:TU_PASSWORD@cluster0.iejmew7.mongodb.net/viewapp?appName=Cluster0
PG_HOST=localhost
PG_PORT=5432
PG_DATABASE=nombre_de_tu_base_de_datos
PG_USER=postgres
PG_PASSWORD=tu_password_postgres
JWT_SECRET=miAppView2024SuperSecreta

⚠️ El archivo .env nunca se sube a Git.

3. Crear la tabla en PostgreSQL

CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    nombre VARCHAR(100) NOT NULL,
    email VARCHAR(150) UNIQUE,
    password_hash TEXT,
    rol VARCHAR(20) DEFAULT 'user',
    avatar_url TEXT,
    descripcion TEXT,
    create_at TIMESTAMP DEFAULT NOW()
);

4. Configurar el Frontend

cd ../Frontend
npm install

Crear .env en Frontend/:

VITE_API_URL=http://localhost:5000/api

---

▶️ Ejecutar el proyecto

Terminal 1 — Backend:

cd Backend
nodemon server

Terminal 2 — Frontend:

cd Frontend
npm run dev

Abre: http://localhost:5173

---

👤 Crear usuario administrador

1. Regístrate desde la app
2. Ejecuta en pgAdmin:

UPDATE users SET rol = 'admin' WHERE email = 'tu-correo@ejemplo.com';

3. Vuelve a hacer login

---

📁 Estructura del Proyecto

Frontend/src/ ├── components/ ← AuthForm, Navbar, ProtectedRoute, UserCard ├── lib/ ← api.js, auth.js ├── pages/ ← Login, Register, Home, Profile, MyProfile, Admin └── services/ ← userService.jsx Backend/ ├── config/ ← mongodb.js, postgres.js ├── middleware/ ← authMiddleware.js ├── models/ ← Cliente.js (Mongoose) ├── routes/ ← auth.js, clientes.js └── server.js

---

🔌 Endpoints del Backend

Método	Ruta	Descripción
POST	/api/auth/register	Registrar usuario
POST	/api/auth/login	Iniciar sesión
GET	/api/auth/usuarios	Listar usuarios
GET	/api/auth/usuarios/:id	Ver usuario por ID
PUT	/api/auth/usuarios/:id	Editar usuario
DELETE	/api/auth/usuarios/:id	Eliminar usuario
GET	/api/clientes	Listar clientes (MongoDB)
POST	/api/clientes	Crear cliente
PUT	/api/clientes/:id	Editar cliente
DELETE	/api/clientes/:id	Eliminar cliente

---

🔒 Seguridad

• Contraseñas encriptadas con bcrypt
• Tokens JWT con expiración de 8 horas
• .env en .gitignore
• MongoDB Atlas con IP 0.0.0.0/0 para desarrollo

---

👩‍💻 Desarrollado por

Alejandra Ruiz y Raquel Martinez — Proyecto académico