Finaliza projeto

Author: niveaabreu

README.md

@@ -1,2 +1,55 @@
 # S3-Management-Tool
-Management tool for create S3 buckets and alerts of new objects
+
+## Sobre
+
+Ferramenta de gerenciamento do S3, que permite a criação da infraestrutura abaixo, provisionando diferentes buckets para armazenamento de objetos, e notificação para o email cadastrado de novos itens adicionados nesses buckets:
+
+<div align="center">
+  <img  style="width:500px" src="./fotos/arq.png"/>
+</div>
+
+Encontra-se também no projeto a criação de uma interface que gerencia usuários e seus respectivos arquivos nos Buckets criados:
+<div align="center">
+  <img  style="width:500px" src="./fotos/interface1.png"/>
+</div>
+
+## Documentação
+
+Você pode conferir a documentação de construção desse projeto pelo seguinte [link](https://niveaabreu.github.io/S3-Management-Tool/)
+
+## Para executar o projeto
+
+Para executar este projeto, siga as etapas a seguir:
+
+* Projeto é baseado em sistemas operacionais Unix, logo execute-o em um, ou no caso de Windows, execute-o via WSL2;
+* Clone o repositório:
+```bash
+git clone https://github.com/niveaabreu/S3-Management-Tool
+cd S3-Management-Tool
+```
+* Exporte suas credenciais da AWS como variavéis de ambiente:
+```bash
+export AWS_ACCESS_KEY_ID=<ID_CHAVE_DE_ACESSO>
+export AWS_SECRET_ACCESS_KEY=<CHAVE_SECRETA_DE_ACESSO>
+```
+
+* Execute o provisionamento da arquitetura passando os parâmetros desejados:
+```bash
+terraform init
+terraform plan
+terraform apply -var="<email>" \ 
+                -var="<nome_bucket>"   \
+                -var="<nome_bucket>"\ 
+                -var="<nome_bucket>" \
+                -auto-approve
+
+```
+* Após a criação da infraestrutura, entre na pasta **interface**, instale as dependências e execute-a:
+```bash
+cd interface
+npm install
+npm start
+```
+
+Você verá a interface na porta local 3000. Faça bom uso da plataforma :)
+

fotos/arq.png

@@ -8,13 +8,38 @@
 }
 
 .bar{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   background-color: white;
   top: 0;
   z-index: 100;
   background-color: rgb(2, 65, 124);
 }
 
+.log{
+  position: absolute;
+  right:0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.blocks {
+  display: flex;
+  flex-direction: row;
+}
+.block{
+  background-image: linear-gradient(rgb(244, 138, 138), rgb(193, 4, 11));
+  margin: 30px;
+  border-radius: 40px;
+  padding: 30px;
+  min-width: 30rem;
+  min-height: 10rem;
+}
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;
@@ -96,4 +121,13 @@
 .modal-buttons button:hover{
   transform: scale(1.03);
   color:rgb(7, 88, 227);
-}
+}
+
+.buttons{
+  display: flex;
+  flex-direction: column;
+}
+
+.font{
+  font-size: 2rem;
+}