Dashboard simple en NodeJS x ExpressJS ?

Este fue uno de mis primeros diseños enfocados en el aprovechamiento de un backend que gestionaba el envío masivo a través de un hosting basado en PHP para obtener un archivo CSV, transformarlo a JSON y luego decodificarlo.

Abajo te explico como u…

Portada del post

Este fue uno de mis primeros diseños enfocados en el aprovechamiento de un backend que gestionaba el envío masivo a través de un hosting basado en PHP para obtener un archivo CSV, transformarlo a JSON y luego decodificarlo.

Abajo te explico como utilizar este diseño en tu web o relacionarlo con otros mencionandote las clases principales.



Veamos como se ve el diseño final ?

Diseño UI de Dashboard



? Y también tiene un campo para introducción de datos

Esto lo puedes reciclar como un componente para un framework o simplemente usarlo como JS simple para gestionar peticiones para almacenar datos en una db, json o cualquier lugar donde lo utilices de forma recurrente.

Segunda imagen de Dashboard



¿Conocimiento importantes para el desarrollo?

  • CSS / Variables
:root {
    --main-bg-color: #0E0E0E;
    --secondary-bg-color: #161616;
    --blue-color: #4E54FF;
    --yellow-color: #F4E236;
    --bg-cards: rgba(255, 255, 255, 0.103);
}
}

  • CSS / Display grid
element {
    display: grid;
    grid-template-columns: 30% 70%;
}

  • CSS / Display Flex
.contenedorLogo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 20px;
}
  • CSS / Mixing CSS Hover Parent to Child
.contenedorPerfil img:hover~span {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translateX(7px);
    background: var(--blue-color);
    transition: 0.5s;
}
  • CSS / Postion Fixed
.pencil {
    position: fixed;
    width: 75px;
    height: 75px;
    background-color: var(--yellow-color);
    left: 50px;
    bottom: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
  • CSS / Postion reset styles (inputs)
.formularioArchivo input {
    width: 80%;
    height: 40px;
    border: none;
    border-bottom: 3px solid var(--yellow-color);
    margin: 20px;
    padding: 10px;
    background: transparent;
    outline: none;
    font-size: 1.3rem;
    color: #fff;
}
  • CSS / Microinteraction for close button
#closeOpen::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 2px;
    background-color: var(--yellow-color);
    transform: rotate(45deg);
    transition: .4s;
}

#closeOpen:hover::after {
    transform: rotate(0deg);
    transition: .4s;
}

#closeOpen::before {
    content: "";
    position: absolute;
    width: 25px;
    height: 2px;
    background-color: var(--yellow-color);
    transform: rotate(-45deg);
    transition: .4s;
}

#closeOpen:hover::before {
    transform: rotate(0deg);
    transition: .4s;
}

Sí no conoces CSS te costará mil veces .



El código en Javascript que permite mostrar/ocultar el formulario de carga de contenido

Este formulario solo contiene datos importantes para completar la funcionalidad de carga del elemento principal, este elemento permite que puedas enviar una petición, put, post, delete, get para renderizar los datos desde el servidor tienes el botón principal para procesar todos estos.

  • Código en js / Frontend
closeOpen.addEventListener('click', () => {
    contenedorPopUp.style.display = "none";
})

pencil.addEventListener('click', () => {
    contenedorPopUp.style.display = "grid";
})

Es el encarga de cambiar la propiedad de display none a block y viceversa, puedes animar la transición del elemento contenedor como práctica o simplemente dejarlo como está actualmente.

Este es mi correo profesional jose@joseamaya.tech, si me escribes te aseguro que tendrás una respuesta.

Atentamente,

Link al repo

Link a la demo

Siguemente en las redes como @syntaxter

Perfil

José A. Amaya


Print Share Comment Cite Upload Translate
APA
José Antonio Fernández | Sciencx (2024-03-28T12:57:19+00:00) » Dashboard simple en NodeJS x ExpressJS ?. Retrieved from https://www.scien.cx/2021/08/14/dashboard-simple-en-nodejs-x-expressjs-%f0%9f%8d%8b/.
MLA
" » Dashboard simple en NodeJS x ExpressJS ?." José Antonio Fernández | Sciencx - Saturday August 14, 2021, https://www.scien.cx/2021/08/14/dashboard-simple-en-nodejs-x-expressjs-%f0%9f%8d%8b/
HARVARD
José Antonio Fernández | Sciencx Saturday August 14, 2021 » Dashboard simple en NodeJS x ExpressJS ?., viewed 2024-03-28T12:57:19+00:00,<https://www.scien.cx/2021/08/14/dashboard-simple-en-nodejs-x-expressjs-%f0%9f%8d%8b/>
VANCOUVER
José Antonio Fernández | Sciencx - » Dashboard simple en NodeJS x ExpressJS ?. [Internet]. [Accessed 2024-03-28T12:57:19+00:00]. Available from: https://www.scien.cx/2021/08/14/dashboard-simple-en-nodejs-x-expressjs-%f0%9f%8d%8b/
CHICAGO
" » Dashboard simple en NodeJS x ExpressJS ?." José Antonio Fernández | Sciencx - Accessed 2024-03-28T12:57:19+00:00. https://www.scien.cx/2021/08/14/dashboard-simple-en-nodejs-x-expressjs-%f0%9f%8d%8b/
IEEE
" » Dashboard simple en NodeJS x ExpressJS ?." José Antonio Fernández | Sciencx [Online]. Available: https://www.scien.cx/2021/08/14/dashboard-simple-en-nodejs-x-expressjs-%f0%9f%8d%8b/. [Accessed: 2024-03-28T12:57:19+00:00]
rf:citation
» Dashboard simple en NodeJS x ExpressJS ? | José Antonio Fernández | Sciencx | https://www.scien.cx/2021/08/14/dashboard-simple-en-nodejs-x-expressjs-%f0%9f%8d%8b/ | 2024-03-28T12:57:19+00:00
https://github.com/addpipe/simple-recorderjs-demo