Backend-BicycleMuseum 🚲

Jessica Noguera Fatima Cosme Saray Rodriguez Elena López Triana Soler Martín

¡Bienvenido al Museo de Bicicletas!

Descripción

El Museo de Bicicletas es una aplicación web desarrollada con React que te permite sumergirte en el fascinante mundo de las bicicletas. Con una interfaz intuitiva y atractiva, podrás explorar diferentes modelos, agregar nuevos ejemplares, editar detalles y eliminar modelos existentes. Además, podrás disfrutar de una galería de imágenes relacionadas con el ciclismo que te inspirarán a rodar.

Instalación

Para comenzar a explorar el Museo de Bicicletas en tu propio entorno, sigue estos sencillos pasos:

Clona el Repositorio:

git clone https://github.com/SarayAnta/proyecto05-museo

Instala las Dependencias:

npm init -y ```

Inicia la Aplicación:

npm i express bash npm i mysql2 ```

La aplicación estará disponible en [http://localhost:5173/](http://localhost:5173/)

Uso

Una vez que la aplicación esté instalada y ejecutándose, puedes hacer lo siguiente:

Explorar modelos de bicicletas: Navega por la página de inicio para ver todos los modelos de bicicletas disponibles.
Agregar una nueva bicicleta: Haz clic en el botón "Añadir Bicicleta" para agregar un nuevo modelo de bicicleta al museo.
Editar una bicicleta existente: Haz clic en el botón "Editar" junto a un modelo de bicicleta para editar sus detalles.
Eliminar una bicicleta: Haz clic en el botón "Eliminar" junto a un modelo de bicicleta para eliminarlo del museo.
Explorar la galería de imágenes: Visita la sección de la galería para ver imágenes relacionadas con el ciclismo.

Tecnologías Utilizadas

Las tecnologías principales que hemos utilizado para desarrollar esta aplicación web:

React - React Router - Styled Components - Fetch API - Vite - Jest

Organización del Proyecto

El proyecto está estructurado de la siguiente manera:

Estructurado:

El proyecto esta estructurado de la siguiente manera:

src/: Contiene todos los archivos fuente de la aplicación.
components/: Contiene los componentes de React utilizados en la aplicación, como Home, NewItem, Edit, Footer, Gallery, Card, etc.
services/: Contiene los archivos que gestionan las llamadas a la API para obtener, añadir, editar y eliminar bicicletas. como getBicycles, addBicycle, deleteBicycle, updateItem, etc.
assets/: Contiene archivos estáticos como imágenes, fuentes, y sonidos utilizados en la aplicación.
router/: Contiene el enrutador de la aplicación que mapea las rutas a los componentes correspondientes.

Código

El código proporcionado se refiere a la configuración y desarrollo de una aplicación web utilizando React.js y Vite.js. Aquí está la lógica general del código:

Configuración del entorno y herramientas: Se utilizan diversas herramientas y tecnologías para desarrollar la aplicación, incluidos React.js para la creación de interfaces de usuario, Vite.js como herramienta de construcción y servidor de desarrollo, y otras dependencias como react-router-dom y styled-components para estilos.
Estructura del proyecto: El proyecto se organiza en diferentes carpetas según la función de los archivos, como componentes para los componentes de React, servicios para funciones de servicio como la comunicación con la API, router para definir las rutas de la aplicación, entre otras.
Componentes React: Se definen varios componentes de React que componen la interfaz de usuario de la aplicación, como Home, NewItem, Edit, Gallery, Card, Nav, Footer, etc. Cada componente tiene su propio propósito y funcionalidad dentro de la aplicación.
Estilos: Los estilos se definen utilizando styled-components para crear estilos CSS en línea dentro de los componentes de React. Esto permite un desarrollo más modular y mantenible de los estilos.
Gestión de rutas: Se utiliza react-router-dom para gestionar la navegación y las rutas de la aplicación. Esto permite que la aplicación tenga diferentes vistas y páginas que se renderizan según la URL actual.
Comunicación con la API: Se definen funciones en el directorio de servicios para realizar operaciones CRUD (Crear, Leer, Actualizar, Eliminar) en la base de datos o en algún backend externo. Estas funciones utilizan fetch para realizar solicitudes HTTP a la API.
Integración de sonidos: Se integra un archivo de audio para reproducir un sonido cuando se realiza una acción en la aplicación, como agregar un nuevo elemento.

Cloudinary: Gestión de Imágenes

Hemos integrado la funcionalidad de almacenamiento y gestión de imágenes utilizando Cloudinary. Esto nos permite ofrecer una experiencia óptima a nuestros usuarios al optimizar la carga, almacenamiento, gestión y entrega de los medios.

¿Qué es Cloudinary?

Cloudinary es una solución de Software como Servicio (SaaS) que proporciona una solución completa para las necesidades de imágenes y videos en aplicaciones web o móviles.

Configuración para Nuestro Proyecto

Para integrar Cloudinary en nuestro proyecto de Market Place, hemos seguido estos pasos:

Crea una Cuenta en Cloudinary:

Regístrate en Cloudinary de forma gratuita a través del siguiente enlace: https://cloudinary.com/.
Obtén Credenciales de Acceso:

Asegúrate de obtener las credenciales necesarias, incluyendo el Cloudname, Api Key y Api Secret.
Configura Cloudinary en el Proyecto:

Sigue las instrucciones proporcionadas en la documentación oficial de Cloudinary para configurar la integración en tu proyecto.

Contribuciones

¡Las contribuciones son bienvenidas! Si quieres contribuir al proyecto, sigue estos pasos:

Haz un fork del repositorio.
Crea una nueva rama para tu función o corrección de errores.
Realiza tus cambios y haz commits.
Sube tus cambios a tu repositorio.
Envía un pull request con tus cambios.

Contacto

Si tienes alguna pregunta o sugerencia sobre el proyecto, no dudes en ponerte en contacto con nosotros por correo electrónico o a través de nuestras redes sociales. ¡Esperamos que disfrutes explorando el Museo de Bicicletas!

¡Gracias por tu interés y apoyo! Pedalea con nosotros hacia un futuro lleno de aventuras en dos ruedas. 🚲✨

Instalación:

npm init -y npm i express npm i mysql2

Posteriormente modificamos nuestro Package.json

{ "name": "bicyclesmuseum-api", "version": "1.0.0", "description": "Backend-BicycleMuseum", --> "main": "App.js", --> "type":"module", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "express": "^4.18.3", "mysql2": "^3.9.2", "sequelize": "^6.37.1" } }

Para ocultar los datos sensibles como las credenciales de la base de datos y otros detalles de configuración, puedes usar un archivo .env. Este archivo contendrá variables de entorno que pueden ser cargadas en tu aplicación Node.js utilizando la librería dotenv. Aquí tienes los pasos para hacerlo:

Instalar dotenv: Primero, asegúrate de tener instalada la librería dotenv. Puedes instalarla utilizando npm:

npm install dotenv

BeatrizCPerez / BicyclesMuseum-api