📒 Notas App — CRUD Full Stack

Aplicación web Full Stack para la gestión de notas personales. Permite crear, leer, actualizar, eliminar y buscar notas en tiempo real.

Autor: Pereyra Roman, Ramiro

---

🛠️ Tecnologías

Capa	Stack
Frontend	React + Vite + TypeScript
Backend	Express + TypeScript
Base de Datos	MongoDB (Mongoose)

---

📁 Estructura del Proyecto

tp-react-native/
├── backend/
│   └── src/
│       ├── config/         # Conexión a MongoDB
│       ├── controllers/    # Lógica de los endpoints
│       ├── models/         # Esquema de Mongoose (Nota)
│       ├── routes/         # Definición de rutas
│       └── app.ts          # Punto de entrada del servidor
├── frontend/
│   └── src/
│       ├── components/     # NotaForm, NotaList, NotaItem, FiltroNotas
│       ├── services/       # Consumo de la API (fetch + async/await)
│       ├── types/          # Interfaces TypeScript
│       └── App.tsx         # Componente principal
└── README.md

---

🚀 Instalación

Requisitos previos

• Node.js (v18 o superior)
• MongoDB (local o Atlas)

1. Clonar el repositorio

git clone https://github.com/ramirorn/tp2-react-native.git
cd tp2-react-native

2. Configurar el Backend

cd backend
npm install

Crear un archivo .env en la carpeta backend/ con el siguiente contenido:

MONGODB_URI=tu_cadena_de_conexion_a_mongodb

Iniciar el servidor:

npm run build
npm run dev

El backend estará disponible en http://localhost:3000.

3. Configurar el Frontend

cd frontend
npm install
npm run dev

El frontend estará disponible en http://localhost:5173.

---

📡 Operaciones CRUD — API REST

Base URL: http://localhost:3000/api/notas

Obtener todas las notas

GET /api/notas

Respuesta exitosa (200):

[
  {
    "_id": "663f...",
    "titulo": "Mi primera nota",
    "contenido": "Contenido de ejemplo",
    "createdAt": "2026-04-11T...",
    "updatedAt": "2026-04-11T..."
  }
]

---

Obtener una nota por ID

GET /api/notas/:id

Respuesta exitosa (200):

{
  "_id": "663f...",
  "titulo": "Mi primera nota",
  "contenido": "Contenido de ejemplo",
  "createdAt": "2026-04-11T...",
  "updatedAt": "2026-04-11T..."
}

Error (404):

{ "mensaje": "Nota no encontrada" }

---

Crear una nota

POST /api/notas
Content-Type: application/json

Body:

{
  "titulo": "Nueva nota",
  "contenido": "Descripción de la nota"
}

Respuesta exitosa (201): Retorna la nota creada.

Error (400): Si faltan campos obligatorios:

{ "mensaje": "Faltan campos obligatorios" }

---

Actualizar una nota

PUT /api/notas/:id
Content-Type: application/json

Body:

{
  "titulo": "Título actualizado",
  "contenido": "Contenido actualizado"
}

Respuesta exitosa (200): Retorna la nota actualizada.

Error (400): Si faltan campos obligatorios.
Error (404): Si la nota no existe.

---

Eliminar una nota

DELETE /api/notas/:id

Respuesta exitosa (200):

{ "mensaje": "Nota eliminada" }

Error (404): Si la nota no existe:

{ "mensaje": "Nota no encontrada" }

---

✅ Funcionalidades del Frontend

• Visualización de todas las notas
• Creación de notas con validación de campos
• Edición de notas existentes
• Eliminación de notas
• Búsqueda/filtrado en tiempo real por título o contenido
• Estados de carga y manejo de errores

---

🪝 Uso de Hooks de React

useState

useState es un hook que permite declarar variables de estado dentro de un componente funcional. Cada vez que el estado cambia, React vuelve a renderizar el componente para reflejar los nuevos datos en la interfaz.

¿Dónde se usa y por qué?

Componente	Estado	Justificación
App.tsx	notas	Almacena el arreglo de notas obtenidas desde la API. Es el estado central de la aplicación; al modificarlo (crear, editar, eliminar), la lista se actualiza automáticamente.
App.tsx	cargando	Controla si se muestra el indicador de carga mientras se espera la respuesta del servidor. Mejora la experiencia del usuario al dar feedback visual.
App.tsx	error	Almacena mensajes de error provenientes de la API o de fallos de red. Permite mostrar un banner informativo cuando algo sale mal.
App.tsx	busqueda	Guarda el texto ingresado en el campo de búsqueda. Se usa para filtrar las notas en tiempo real sin necesidad de hacer una nueva consulta al servidor.
App.tsx	notaEditar	Indica si se está editando una nota existente (Nota) o creando una nueva (null). Permite que el formulario cambie dinámicamente entre modo creación y modo edición.
NotaForm.tsx	titulo, contenido	Controlan los valores de los campos del formulario de manera individual, permitiendo validación en tiempo real y limpieza al enviar.
NotaForm.tsx	enviando	Deshabilita el botón de envío y muestra "Guardando..." mientras la petición está en curso, evitando envíos duplicados.

Ejemplo de uso en el proyecto:

const [notas, setNotas] = useState<Nota[]>([]);
const [cargando, setCargando] = useState(true);
const [error, setError] = useState<string | null>(null);

---

useEffect

useEffect es un hook que permite ejecutar efectos secundarios en componentes funcionales. Se utiliza para operaciones que no forman parte del renderizado, como llamadas a APIs, suscripciones o manipulación del DOM.

¿Dónde se usa y por qué?

Se utiliza en App.tsx para cargar las notas desde la API al montar el componente por primera vez:

useEffect(() => {
    cargarNotas();
}, []);

Justificación:

• El arreglo de dependencias vacío ([]) asegura que la función cargarNotas() se ejecute una sola vez cuando el componente se monta en el DOM.
• Sin useEffect, la llamada a la API se ejecutaría en cada renderizado, generando un bucle infinito de peticiones.
• Este patrón es el estándar en React para la carga inicial de datos desde un servidor.

Flujo completo:

1. El componente App se monta → useEffect se dispara.
2. Se llama a cargarNotas() que establece cargando = true.
3. Se hace fetch a GET /api/notas.
4. Se reciben los datos y se guardan en el estado notas con setNotas(data).
5. Se establece cargando = false → la interfaz muestra la lista de notas.
6. Si ocurre un error, se captura y se guarda en el estado error para mostrarlo al usuario.