For README in English click here.
Kenziehub é uma simulação de "rede social" para desenvolvedores onde o usuário pode criar uma conta, logar, ter acesso a dashboard e adicionar suas tecnologias favoritas de acordo com seu nível de experiência. Originalmente feita com React/JS e refatorada para React/TS, kenziehub é uma aplicação Front-end CRUD (Create, Read, Update, Delete) que utiliza o endpoint (https://kenziehub.herokuapp.com/) para consumir e enviar dados.
Neste projeto foram utilizados conceitos de Consumo de Api, React Hooks, React Context, SPA, CRUD, React Lazy, React Suspense, Fallback, Renderização Condicional.
- Axios
- Bootstrap (Button & Modal)
- React Context
- React Hook Form
- React Loader Spinner
- React Router Dom
- React Toastify
- React-ts
- Styled-Components
- TypeScript
- yup
 |
Na página de registro temos um formulário básico para capturar as informações do usuário. Todos os campos devem ser preenchicos. |
|
Quando os dados enviados tiverem algum erro de validação, será mostrada uma tooltip que ao passar o mouse em cima, mostrará o que não satisfez as condições do campo. |
|
Caso todos os dados sejam validados com sucesso, uma notificação na parte superiora da página irá mostrar o status da requisição e você será redirecionado em alguns segundos para a página de login. |
|
|
Para entrar na sua conta basta digitar o email e a senha de sua conta nos respectivos campos. |
|
Semelhante a página de registo, a validação de dados é feita na página de login, porém, os erros são mostrados na parte superior da página. Aqui estão os possíveis erros: |
|
Se os dados enviados combinarem com as informações do banco de dados, você será redirecionado para a Dashboard!
Nota: A aplicação conta com a funcionalidade de Auto-login. Clique em "sair" na Dashboard para remover esta funcionalidade na próxima vez que entrar na aplicação.
Na Dashboard você encontra algumas informações como seu nome e suas tecnologias favoritas. Se não houver tecnologias adicionadas você pode clicar no botão de adicionar tecnologia para popular seu perfil.
|
|
Ao clicar no botão, um formulário irá abrir no centro da tela. Basta inserir o nome da tecnologia, seu nível de experiência e clicar em Cadastrar Tecnologia.
|
Caso algo dê errado, uma notificação irá aparecer na parte superior da tela. |
|
Se tudo der certo, a tecnologia adicionada irá aparecer no centro da tela!
Num cenário em que você tenha adicionado uma tecnologia errada ou que não utiliza mais e queira excluir do seu perfil, existe a opção de excluir apertando no botão da lixeira da respectiva tecnologia.
|
|
|
Caso algo dê errado, semelhantemente as outras funcionalidades, uma notificação irá aparecer na parte superior da tela. |
|
|
Se tudo der certo, você não verá mais a tecnologia em seu Dashboard! |
Link do Projeto: Kenziehub
- Clone o repositório no seu computador.
- Abra o terminal no diretório do projeto.
- Digite "yarn install" ou "npm install" para instalar as dependências.
- Digite "yarn start" ou "npm run start" para rodar o app localmente.