📗 Via Notes Frontend

Repositório criado com o propósito de mostrar minhas capacidades como desenvolvedor full-stack, utilizando o React para a criação de uma aplicação TODO LIST.

Você pode acessar o projeto clicando aqui!

📜 Informações do projeto frontend

Projeto criado através do comando npx create-react-app --template typescript utilizando o CRA. Toda a parte de codificação está dentro da pasta /via-notes-frontend/src, contendo:

• 📌 assets
• 📚 components
• 🔐 contexts
• 🚧 routes
• 📺 screens
• 📡 services
• 💡 utils

Cada pasta é responsável por alguma funcionalidade dentro da aplicação, deixando o minímo possível de responsábilidade para uma única tela. Um exemplo são os components que são partes de código estáticas que podem ser usadas em diferentes telas, como é o caso das telas de autenticação e a tela principal.

Os assets são responsáveis por armazenar as imagens que a aplicação utiliza.

Os contexts são responsáveis por armazenar os states globalmente na aplicação, sendo possível utilizá-los em qualquer lugar. Neles ficam armazenadas as informações do usuário, anotações, status e o tema da aplicação.

As routes são a parte da aplicação que juntamente com o arquivo UserContext.tsx fazem a autenticação do usuário, verificando se o usuário já está logado e qual rota deve ser renderizada.

As screens são as telas renderizadas pelo React, contendo apenas as telas de autenticação e a tela principal.

A pasta services contém um único arquivo que serve de instância para o axios que é responsável pelas requisição feitas no backend.

As utils são arquivos que ajudam de alguma forma a aplicação em seu processo, como é o caso das tipagens de dados presentes nos arquivos e funções reutilizaveis.

Foi utilizado o AWS Amplify como host para a aplicação.

🔑 Funcionalidades do projeto

• Autenticação de usuário

• Cadastro de usuário

• Exclusão de usuário

• Criação de anotações

• Listagem de anotações

• Atualização de anotações

• Exclusão de anotações

• Tema light e dark

🛠️ Como configurar o projeto

• Instale o Node na sua máquina e verifique a instalação pelo comando abaixo:

~ node --version

• Baixe o código do backend na sua máquina e siga as instruções para rodá-lo;

• Clone o repositório na sua máquina:

~ git clone https://github.com/NEVI0/via-notes-frontend.git

• Instale o Yarn como gerenciador de pacotes ou utilize o NPM. Verifique a instalação pelo comando abaixo:

~ npm --version

ou

~ yarn --version

• Na raíz do projeto /via-notes-frontend, instale as dependências necessárias pelo comando abaixo:

~ npm install

ou

~ yarn install

• Troque toda string https://via-notes-backend.herokuapp.com dentro da aplicação por http://localhost:4500 ou http://<SEU_IP>:4500 para poder rodar localmente.

⚡ Como rodar o projeto

• Comando para rodar em modo de desenvolvimento:

~ npm start

ou

~ yarn start

• Comando para gerar o build de produção:

~ npm run build

ou

~ yarn build

©️ Névio Costa Magagnin