Free Admin Dashboard

Painel de administração gratuito desenvolvido em React.js, Tailwind CSS e TypeScript

O painel de administração gratuito é um modelo de administração de código aberto projetado em Figma e desenvolvido em React.js, Tailwind CSS e TypeScript. Meu objetivo neste projeto é entregar um modelo de painel de design premium e de alta qualidade, seguindo as melhores práticas do React.js. Este painel de administração React é criado usando padrões de design React.js avançados, como padrões de design de componentes controlados e não controlados, padrões de ganchos personalizados, padrões de componentes de layout, padrões de composição de componentes, padrões de design de componentes compostos e muito mais… Este é principalmente um modelo de painel de comércio eletrônico, mas no futuro, se o repositório se tornar popular, irei expandi-lo para mais nichos. O painel é totalmente responsivo e está disponível para download gratuito .

Design do painel de administração

O design do painel de administração é projetado no Figma seguindo as práticas básicas e recomendadas para o design da interface do usuário do painel de comércio eletrônico. Meu objetivo é criá-lo o mais simples possível e com uma interface de usuário premium. O design completo é criado pensando no usuário final. Você pode usar o modelo de painel de administração para qualquer tipo de site de comércio eletrônico, você só precisa conectá-lo ao back-end e tudo funcionará perfeitamente. O painel de administração do site de comércio eletrônico é totalmente de código aberto , o que significa que você pode adicionar facilmente mais recursos se desejar. O código-fonte do modelo do painel de administração foi escrito seguindo as práticas recomendadas, para que você não tenha problemas com ele. O painel de reação é totalmente personalizável e flexível, para que você possa personalizá-lo facilmente. O design do painel de administração é projetado seguindo as melhores práticas de design, como hierarquia visual, proximidade, espaço em branco, consistência, contraste e muito mais…

Características

• Design de alta qualidade: Design de alta qualidade criado pensando no usuário final.
• Design Responsivo: Layout totalmente responsivo que funciona perfeitamente em desktops, tablets e dispositivos móveis.
• Gráficos e tabelas dinâmicas: visualização interativa de dados usando bibliotecas Chart.js
• Componentes Modulares: Componentes reutilizáveis ​​e personalizáveis ​​para diferentes seções do painel.
• Personalização do tema: Suporte ao modo claro e escuro com temas personalizáveis.
• Tabelas de dados: tabelas de dados avançadas com classificação, filtragem e paginação.

Tecnologias Utilizadas

• React.js: biblioteca JavaScript para construção de interfaces de usuário.
• Redux Toolkit: biblioteca de gerenciamento de estado para aplicativos React.
• React Router: Biblioteca para roteamento em aplicações React.
• Chart.js: biblioteca de gráficos JavaScript simples, mas flexível.
• Tailwind CSS: uma estrutura CSS utilitária para construir rapidamente interfaces de usuário personalizadas.
• TypeScript: uma linguagem para JavaScript em escala de aplicativo.
• Nanoid: um gerador de ID de string exclusivo, pequeno, seguro, compatível com URL
• Ícones React: biblioteca de ícones com muitos ícones
• Figma: Poderosa ferramenta de web design.

Se você gosta do projeto de painel de administração gratuito, dê uma estrela no GitHub para apoiar o projeto e me dar motivação para adicionar muitos outros recursos excelentes.

Instruções em vídeo para executar o aplicativo

Aqui está um link do YouTube para o vídeo de instruções para executar o aplicativo: https://www.youtube.com/watch?v=cydXOmMhbtQ

Instruções

1. Para executar o aplicativo, primeiro você precisa baixar e instalar o Node.js e o npm em seu computador. Aqui está um link para o tutorial que explica como instalá-los: https://www.youtube.com/watch?v=4FAtFwKVhn0. Também aqui está o link onde você pode baixá-los: https://nodejs.org/en

2. Ao instalar todos os programas necessários em seu computador, você precisa baixar o projeto. Ao baixar o projeto, você precisa extraí-lo.

3. Depois de extrair o projeto você precisa abrir a pasta do projeto no terminal de sua preferência e escrever:

 npm install

4. Para executar o projeto escreva:

 npm run dev

5. Para ver seu aplicativo acesse o navegador de sua preferência e na URL escreva: http://localhost:5173