/notepad

:heavy_check_mark: Uma aplicação de bloco de notas para persistir anotações em um banco de dados. Possui sistema de autenticação de usuários.

Primary LanguageVue

Notepad

Sobre

Com essa aplicação, cada usuário pode se cadastrar no banco de dados (criptografado) e acessar a suas anotações em um banco de dados. Usuários admin têm acesso ao painel de administração, onde podem sobrescrever alguns dados simples de usuários, como o apelido e email.

Tecnologias

Bootstrap JavaScript HTML5 CSS3 Express.js NPM NodeJS Vue.js Vuex Postman

JWT Webpack Postgres Babel ESlint Axios

Componentes

Cadastro de usuário:

Opção de troca entre o componente de login e logout. A validação do formulário acontece no backend.

notepadLogin


Página home da aplicação.

notepadHome


Possui um menu de categorias e um espaço para as anotações salvas. À direita existe um menu de edição dinâmico que pode ser acessado ao acionar o botão do canto superior direito da tela ou o card de 'adicionar nota':

Quando não há anotações na categoria:

notepadAddNoteCard


Menu de edição ou adição:

EditMenu

Página de administração

Quando a o usuário for admin haverá uma opção de navegação no header para a página de administração do sistema:

Aqui podemos vizualizar os usuários cadastradas e seus dados não sensíveis

notepadAdmin


No banco de dados as senhas são corretamente criptografadas:

notepadPassword

Aprendizado

Aprendi muito sobre validação de dados e requisições, tokens de usuários, e lógica de banco de dados. E, sobretudo, conheci bastante sobre o Vuejs.