Free Admin Dashboard

Panel de administración gratuito desarrollado en React.js, Tailwind CSS y TypeScript

El panel de administración gratuito es una plantilla de administración de código abierto diseñada en Figma y desarrollada en React.js, Tailwind CSS y TypeScript. Mi objetivo en este proyecto es ofrecer una plantilla de panel de diseño premium y de alta calidad siguiendo las mejores prácticas de React.js. Este panel de administración de React se crea utilizando patrones de diseño avanzados de React.js, como patrones de diseño de componentes controlados y no controlados, patrones de ganchos personalizados, patrones de componentes de diseño, patrones de composición de componentes, patrones de diseño de componentes compuestos y muchos más... Esta es principalmente una plantilla de panel de comercio electrónico, pero En el futuro, si el repositorio se vuelve popular, lo expandiré a más nichos. El panel responde completamente y está disponible para descarga gratuita .

Diseño del panel de administración

El diseño del panel de administración está diseñado en Figma siguiendo las mejores prácticas fundamentales para el diseño de la interfaz de usuario del panel de comercio electrónico. Mi objetivo es crearlo lo más simple posible y con una interfaz de usuario premium. El diseño completo se crea pensando en el usuario final. Puede utilizar la plantilla del panel de administración para cualquier tipo de sitio web de comercio electrónico, solo necesita conectarlo con el back-end y todo funcionará sin problemas. El panel de administración del sitio web de comercio electrónico es completamente de código abierto , lo que significa que puedes agregar fácilmente más funciones si lo deseas. El código fuente de la plantilla del panel de administración se escribe siguiendo las mejores prácticas, por lo que no tendrá problemas con él. El panel de reacción es completamente personalizable y flexible, por lo que puedes personalizarlo fácilmente. El diseño del panel de administración está diseñado siguiendo las mejores prácticas de diseño como jerarquía visual, proximidad, espacios en blanco, coherencia, contraste y muchos más...

Características

• Diseño de alta calidad: Diseño de alta calidad creado pensando en el usuario final.
• Diseño responsivo: diseño totalmente responsivo que funciona perfectamente en computadoras de escritorio, tabletas y dispositivos móviles.
• Cuadros y gráficos dinámicos: visualización de datos interactiva utilizando las bibliotecas Chart.js
• Componentes modulares: componentes reutilizables y personalizables para diferentes secciones del tablero.
• Personalización de temas: compatibilidad con modos claro y oscuro con temas personalizables.
• Tablas de datos: tablas de datos avanzadas con clasificación, filtrado y paginación.

Tecnologías utilizadas

• React.js: biblioteca JavaScript para crear interfaces de usuario.
• Redux Toolkit: Biblioteca de gestión de estado para aplicaciones React.
• React Router: Biblioteca para enrutamiento en aplicaciones React.
• Chart.js: biblioteca de gráficos JavaScript simple pero flexible.
• Tailwind CSS: un marco CSS de utilidad para crear rápidamente interfaces de usuario personalizadas.
• TypeScript: un lenguaje para JavaScript a escala de aplicación.
• Nanoid: un generador de ID de cadena único, pequeño, seguro y compatible con URL
• Íconos de reacción: biblioteca de íconos con muchos íconos
• Figma: Potente herramienta de diseño web.

Si te gusta el proyecto del panel de administración gratuito, dale una estrella en GitHub para respaldar el proyecto y motivarme para agregar muchas más funciones excelentes.

Instrucciones en vídeo para ejecutar la aplicación.

Aquí hay un enlace de YouTube para ver las instrucciones en video para ejecutar la aplicación: https://www.youtube.com/watch?v=cydXOmMhbtQ

Instrucciones

1. Para ejecutar la aplicación, primero debe descargar e instalar Node.js y npm en su computadora. Aquí hay un enlace al tutorial que explica cómo instalarlos: https://www.youtube.com/watch?v=4FAtFwKVhn0. También aquí tenéis el enlace donde podéis descargarlos: https://nodejs.org/en

2. Cuando instales todos los programas que necesitas en tu computadora, deberás descargar el proyecto. Cuando descargas el proyecto, necesitas extraerlo.

3. Después de extraer el proyecto, debe abrir la carpeta del proyecto en su terminal de elección y escribir:

 npm install

4. Para ejecutar el proyecto escriba:

 npm run dev

5. Para ver tu aplicación ve al navegador de tu elección y en la URL escribe: http://localhost:5173