Proyectos molones

🚧

Se trata de una web que nos permite crear una tarjeta para hablar sobre proyectos personales. En la página web podemos introducir los datos del proyecto y obtener una vista maquetada con esta información, y así tener guardados nuestros proyectos de forma fácil y sencilla.

✨ Diseño del proyecto

El diseño principal nos fue entregado por el Product Owner de Adalab a través de Zeplin, brindándonos la oportunidad de realizar modificaciones según nuestras necesidades.

En pleno desarrollo del sitio web, el Product Owner autorizó los cambios que propusimos. Esto ha permitido que el diseño experimentara una metamorfosis mágica con la incorporación de tonos granates, lilas y morados del fondo y los botones. También se ha cambiado por ejemplo, el icono a un gatito (fiel compañero de las brujas), el cual nos redirige a la página de inicio.

Sin embargo, lo más destacado es, sin duda, la estela de luz que acompaña al cursor durante la navegación, que le ortorga un aura verdaderamente embrujada.

🌠 Descripción del proyecto

Esta aplicación se compone de varias páginas. La principal, el Landing, donde se muestran las tarjetas de todos los proyectos creados y que están guardados en la base de datos. Desde aquí se puede acceder al detalle de cada una de las tarjetas, borrarlas e incluso organizarlas de forma alfabética.

Através del botón nuevo proyecto se accede a la siguiente página, en la que se encuentra estas áreas:

• Sección de formulario: Aquí, la usuaria debe completar obligatoriamente todos los campos con los datos del proyecto:
  • Nombre del proyecto
  • Eslogan
  • Repositorio
  • Enlace de la demostración del proyecto
  • Tecnologias usadas
  • Breve descripción del proyecto

También es necesario cumplementar los datos de la autora: - Nombre del autor - Puesto de trabajo.

• Sección de Preview: Para saber como va quedando, a medida que la usuaria escribe sus datos, se irán volcando en una Preview.

• Sección Tarjeta: Una vez que a la usuaria le gusta como ha quedado la tarjeta de su proyecto, puede generar un enlace con la vista maquetada de la información en una página detalle.

Además, si por algún motivo la usuaria necesita terminar de completar el formulario más tarde, no pasa nada, los datos se guardan en el Local Storage.

Si además necesita borrar estos datos también tiene disponible un botón de Reset en forma de basura para borrar todos los datos proporcionados, incluso en el Local Storage.

🛠️ Herramientas usadas

1. Visual Studio Code - Editor de código.
2. React - Framework de JavaScript.
3. HTML Lenguaje de marcado para la estructura.
4. SASS - Para añadir estilos.
5. Zeplin - Plantilla de diseño
6. Git - Para el control de versiones.
7. Github - Como repositorio remoto.
8. Github Pages - Para la publicación, sin base de datos.
9. MySQL Workbench - Sistema de gestión de bases de datos que funciona como cliente de MySQL
10. Freedb.tech - Servidor de base de datos en linea
11. Render - Para la publicación, con base de datos.

Equipo de desarrollo