Skip to content

Latest commit

 

History

History
112 lines (77 loc) · 5.14 KB

README.md

File metadata and controls

112 lines (77 loc) · 5.14 KB

DashGO

GitHub top language GitHub last commit


SobreDashGOInstalaçãoTecnologiasAutor


Sobre

Projeto desenvolvido durante o bootcamp Ignite de React da RocketSeat cujo objetivo foi construir uma interface moderna, utilizando tecnologias atuais e em alta no mercado e, claro, seguindo as melhores praticas do desenvolvimento frontend. O projeto foi desenvolvido utilizando NextJS e ChakraUI, além de diversas outras bibliotecas modernas. A aplicação é um dashboard de administração e será apresentada em detalhes no proximo tópico.

DashGO

O DashGO é um painel web administrativo que permite o gerenciamento de usuários, formulários e automações. Para realizar o gerenciamento, os usuários devem realizar o login através da tela abaixo para que suas permissões e identidade sejam validados e o acesso seja concedido:

Tela de login

O formulário de login, assim como os demais formulários da aplicação, possuem validações em todos os campos e, havendo algum problema, mensagens de erros serão adicionadas abaixo dos campos para deixar explicito para os usuários que o dado inserido está incorreto e por que, conforme vemos abaixo:

Validações da tela de login

Após realizar o login o usuário será direcionado para a tela de dashboard, aonde poderá acompanhar alguns indicadores e terá acesso rápido à um menu lateral contendo opções para gerenciar usuários, formulários e automações:

Dashboard

Das opções presentes no menu lateral apenas a tela de usuários foi implementada pois trata-se de um projeto fictício com finalidade estudantil. Dada essa observação, vamos conhecer o painel de gerenciamento de usuários:

Lista de usuários

Como podemos ver acima, ao acessar a página teremos uma tabela que listará todos os usuários cadastrados na aplicação. Nessa tela o usuário pode navegar pelos registros dos usuários através dos botões de paginação, pode visualizar o cadastro de um usuário e pode cadastrar um novo usuário ao clicar no botão no canto superior direito.

Ao clicar no botão de cadastro o usuário será direcionado para o formulário abaixo para inserir os dados do novo usuário e, não havendo nenhuma irregularidade como abaixo, salva-lo no banco de dados:

Formulário de cadastro de usuários

Instalação

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js. Além disto é bom ter um editor para trabalhar com o código como VSCode.

🖥️ Rodando o Front End (Web)

# Clone este repositório
$ git clone [email protected]:MrRioja/dashgo.git

# Acesse a pasta do projeto no terminal/cmd
$ cd dashgo

# Instale as dependências
$ npm install
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn

# Execute a aplicação em modo de desenvolvimento
$ npm run dev
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn dev

# O servidor inciará na porta 3000 - acesse <http://localhost:3000>

Tecnologias

My Skills

Autor

Luiz Rioja

Backend Developer

LinkedIn GitHub Gmail WhatsApp Skype