Con el objetivo de unir a entusiastas de los viajes, proponemos una aplicación web diseñada para crear un espacio interactivo donde los usuarios puedan intercambiar vivencias únicas. Esta plataforma permite a los participantes registrarse, iniciar sesión, compartir sus experiencias de viaje a través de publicaciones y participar activamente mediante comentarios en las contribuciones de otros viajeros.
La tarea central del proyecto consiste en la implementación de tecnologías de vanguardia en programación web, como Node.js, Express, MongoDb y Mongoose, para lograr una interfaz que sea intuitiva y funcional. La utilización de React garantiza un desarrollo ágil, asegurando la eficiente persistencia de los datos y proporcionando una experiencia de usuario atractiva.
Para asegurar una experiencia se utilizó la herramientas Tailwind CSS, que permite una adaptación precisa del diseño del espacio digital a los requisitos y preferencias específicas de la comunidad de viajeros. Esta metodología ágil de desarrollo CSS facilitará una personalización eficiente y flexible, garantizando que la plataforma refleje de manera única la diversidad y el estilo de cada usuario.
- MongoDB: Sistema de gestión de bases de datos NoSQL (No relacional) que ofrece una solución flexible y escalable para almacenar y recuperar datos de manera eficiente.
- Express: Framework web robusto y minimalista diseñado para Node.js, facilitando la construcción de aplicaciones web y APIs.
- Node.js: Entorno de ejecución del lado del servidor que permite ejecutar JavaScript de manera eficiente y escalable, proporcionando un ambiente ideal para construir aplicaciones web y servicios backend.
- Cors: Middleware que habilita el intercambio de recursos entre diferentes dominios, mejorando la interoperabilidad en entornos de desarrollo web distribuidos.
- Dotenv: Herramienta que facilita la carga de variables de entorno desde un archivo .env, mejorando la configuración y seguridad en el manejo de configuraciones sensibles.
- Helmet: Middleware diseñado para Express que establece headers HTTP de manera segura, mejorando la protección y seguridad de la aplicación.
- Morgan: Middleware que registra de manera detallada las solicitudes HTTP, proporcionando información valiosa para el monitoreo y depuración de la aplicación.
- Express Validator: Middleware que simplifica la validación de datos en aplicaciones Express, asegurando la integridad de la información procesada.
- JSON Web Token (JWT): Herramienta utilizada para autenticación y autorización, proporcionando un método seguro para transmitir información entre partes confiables en forma de tokens codificados.
- Instalacion de Node.js
- Instalar MongoDB Compas
- Ejecutar los servicios
mongodymongocompass.
-
Cambia el nombre del archivo
.example.envpor.env. -
En la terminal, navega a la carpeta backend:
cd backend -
Instala las dependencias con el siguiente comando:
npm i -y
-
Ejecuta la aplicación en la carpeta /backend con el siguiente comando:
npm run dev
-
Abre MongoDB Compass y asegúrate de que el servicio
mongod.exeesté en ejecución.
- Agregar un Comentario a un Post Específico
POST localhost:3000/api/comments/:postId
Descripción: Agrega un comentario a un post específico. Parámetros: :postId es el ID del post al que se quiere agregar el comentario. Uso: Envia una solicitud POST a esta ruta con el cuerpo de la solicitud que contiene la información del comentario.
- Crear un Nuevo Comentario Independiente
POST localhost:3000/api/comments
Descripción: Crea un nuevo comentario independiente. Uso: Envia una solicitud POST a esta ruta con el cuerpo de la solicitud que contiene la información del comentario.
- Crear un Nuevo Post
POST localhost:3000/api/post
Descripción: Crea un nuevo post. Uso: Envia una solicitud POST a esta ruta con el cuerpo de la solicitud que contiene la información del nuevo post.
- Iniciar Sesión de un Usuario Existente
POST localhost:3000/api/login
Descripción: Inicia sesión de un usuario existente. Uso: Envia una solicitud POST a esta ruta con las credenciales del usuario (por ejemplo, nombre de usuario y contraseña) en el cuerpo de la solicitud.
- Obtener el Perfil del Usuario Autenticado
GET localhost:3000/api/profile
Descripción: Obtiene el perfil del usuario autenticado. Uso: Realiza una solicitud GET a esta ruta para obtener información sobre el perfil del usuario autenticado.
- Registrar un Nuevo Usuario
POST localhost:3000/api/register
Descripción: Registra un nuevo usuario. Uso: Envia una solicitud POST a esta ruta con la información necesaria para registrar un nuevo usuario.
- Cerrar Sesión del Usuario Autenticado
POST localhost:3000/api/logout
Descripción: Cierra sesión del usuario autenticado. Uso: Envia una solicitud POST a esta ruta para cerrar sesión del usuario autenticado.
- React: Biblioteca de JavaScript para la creación eficiente de interfaces de usuario interactivas y dinámicas.
- Vite: Bundler rápido diseñado específicamente para proyectos React, optimizando la velocidad de desarrollo.
- React-DOM: Facilita la manipulación eficaz del Modelo de Objetos del Documento (DOM) en aplicaciones construidas con React.
- React-Router-DOM: Proporciona herramientas poderosas para gestionar la navegación de manera declarativa en aplicaciones React.
- Tailwind CSS: Framework de utilidades de diseño que ofrece un enfoque altamente modular y personalizable mediante la asignación directa de clases predefinidas para construir estilos y componentes de manera eficiente en aplicaciones web.
1 - Creamos el proyecto Vite
npm create viteSeleccionamos React y javascript
2 - Ingresamos al directorio
cd frontend- Ejecuta la aplicación en la carpeta /frontend con el siguiente comando:
npm run dev
- Instala la biblioteca de tailwindcss para Vite
npm create vite@latest my-project -- --template react
cd my-project