🚀 Projeto Final DBC-Dashboard: VS13 Trilha Frontend

Olá, nós somos o time 01 da trilha front-end da 13º edição do Vem Ser DBC. Este é o Projeto Final intitulado como DBC-Dashboard.

👤 Integrantes

• André Felipe - (Tech-Lead) ( github | linkedin )
• Ermeson Ribeiro ( github | linkedin )
• Matheus Medeiros ( github | linkedin )

📄 Descrição

O projeto DBC-Dashboard apresenta um site de um Painel Administrativo onde os gestores da empresa podem: criar, listar, atualizar e excluir dados de funcionários cadastrados no sistema(CRUD). Além disto, o sistema também apresenta a funcionalidade de buscar um funcionário cadastrado. Para a modelagem e desenvolvimento dele foram utilizadas as tecnologias como Figma, React, componentes do Material UI e styled components. Ademais, para acesso aos dados foi realizado o consumo da Api Pessoa. Em síntese, o painel é uma aplicação de uso exclusivo para gestores e contém a autenticação de usuário, para garantir a segurança e proteção dos dados dos funcionários, impedindo que uma pessoa não autorizada tenha acesso a dados sensíveis, exclusivos a gestores. Mais detalhes concernentes à organização do Projeto, assim como à divisão e à atrituição de tarefas, podem ser visualizados no Trello que criamos para este fim.

🖇️ Especificações

🖥️ Páginas

Nosso projeto possui as seguintes telas:

• Página de Login
• Página de Cadastro
• Página de DashBoard

🌐 Modais

Nosso projeto possui os seguintes modais:

• Modal de Detalhes (Onde é possível Visualizar e Editar os dados do Usuário)
• Modal de Deleção

🖼️ Layout

Para o layout utilizamos uma paleta de cores e um modelo de interface inspirados em um Figma Modelo que obtivemos.

⚙️ Como Executar na sua máquina

• 1 - Execute "npm i" para instalar as dependencias do package
• 2 - Abra o arquivo index.html em seu navegador
• 3 - Link do Projeto no vercel: https://dbc-dashboard.vercel.app/

💻 Tecnologias utilizadas

• HTML5

• React

• TypeScript

• Styled Components

• Material UI

• React Input Mask

• Yup

• React Hook Form

• React Query

• React Router Dom

• Phosphor Icons

• Dayjs

  ✨ Bibliotecas online

  Para a construção de interfaces amigáveis e aplicação de uma melhor experiência de usuário utilizamos Material Design. Já para os ícones, aplicamos Phospor icons e para as fontes Google Fonts.