Noter!

Suas Notas em qualquer lugar, a qualquer hora! 🗒️

✅ Noter! 🚀 Versão 1.0 ✅

Visão geral • Features • Demonstração • Pré-requisitos • Tecnologias • Autor • Licença

🔎 Visão geral

Noter é um sistema web de criação e gestão de notas e textos. Utilizando o que há de melhor no back-end com Node Js e Express, e no front-end com React JS, o Noter permite que você manipule do seu jeito os textos e assuntos que quiser armazenar online, a qualquer hora e em qualquer lugar!

⚙️ Features

✅ Cadastro de usuário
✅ Cadastro de notas
✅ Gestão de usuário (edição, exclusão)
✅ Gestão de notas (edição, exclusão)

📌 Demonstração da API

Veremos melhor agora como a aplicação funciona. Utilizando uma ferramenta de testes de serviços RESTful, o Postman, irei apresentar como nossa API está funcionando no back-end.

Registrando o Usuário

Nesse momento, passamos no formato JSON o nome, e-mail e senha de nosso usuário fictício "Luis User" para que fosse registrado em nosso banco de dados não-relacional, o Mongo. O retorno, como você pode ver no screenshot abaixo, são as informações passadas acima e algumas complementadas pelo próprio back-end da aplicação, como id e a data da criação e atualização do usuário.

Note que a senha retorna em hash para maior segurança do usuário, utilizando a lib Bcrypt do Node para fazer isso.

Registrando uma nota

O próximo teste que faremos é a criação de uma nota por parte desse novo usuário que criamos. Para que funcione, teremos que passar o título e o corpo da nota que desejamos criar, junto com o token de acesso do usuário logado no header de nossa aplicação para que não apresente um erro de autenticação que impeça a criação da nota.

Cada nota recebe, além das configurações criadas, uma id que pertence apenas àquela nota, o id do autor, e assim como no usuário, uma data de criação e atualização de dados da nota.

Gestão de notas

O APP nos permite manipular nossas notas e dados de várias maneiras, de acordo com cada uma das rotas criadas e previamente estabelecidas. Caso desejemos realizar algum tipo de alteração nas notas, ou excluí-las, exibí-las, pesquisá-las, dentre muitas outras, podemos fazer isso passando os parâmetros corretos em formato JSON ou na URL, como pode ser visto nos prints abaixo!

📌 Demonstração do APP

Agora chegou a hora de vermos o nosso cliente React em ação! Desenvolvido todo em React JS, utilizando a RBX, uma implementação do React que nos permite utilizar os componentes do Bulma, o sistema ficou com o layout responsivo abaixo!

Vamos testar as funcionalidades dele? Veja no gif abaixo o registro e edição de notas e usuários no decorrer da aplicação!

Caso deseje ver e utilizar o APP, basta clicar no link abaixo e conferir no Heroku!
Veja o Noter Online!

🎲 Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js, Express, Mongo Db, Postman (ou outra ferramenta de testes de rotas) e React. Além disto é bom ter um editor para trabalhar bem o código. Recomendamos o VS Code.

Clone este repositório
$ git clone https://github.com/tluis9/noter.git

Acesse a pasta do projeto no terminal/cmd
$ cd Noter

Instale as dependências (veremos todas no tópico seguinte)

Execute a API e o client React
$ npx nodemon start
$ npm start

Recomendamos a API iniciar na porta:3001 - acesse http://localhost:3001
Recomendamos o cliente iniciar na porta:3000 - acesse http://localhost:3000