DEV Community

Cover image for Dashboard simple en NodeJS x ExpressJS 🍋
José Antonio Fernández
José Antonio Fernández

Posted on

4

Dashboard simple en NodeJS x ExpressJS 🍋

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);
}
}

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

Enter fullscreen mode Exit fullscreen mode
  • CSS / Display Flex
.contenedorLogo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 20px;
}
Enter fullscreen mode Exit fullscreen mode
  • 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;
}
Enter fullscreen mode Exit fullscreen mode
  • 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;
}
Enter fullscreen mode Exit fullscreen mode
  • 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;
}
Enter fullscreen mode Exit fullscreen mode
  • 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;
}
Enter fullscreen mode Exit fullscreen mode

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";
})

Enter fullscreen mode Exit fullscreen mode

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay