Sobre • Upfi • Instalação • Tecnologias • Autor
Projeto desenvolvido durante o Ignite, um bootcamp criado pela Rocketseat com diversas trilhas de variadas tecnologias. O projeto foi criado durante o módulo IV do bootcamp na trilha de ReactJS.
Upfi é uma aplicação cujo objetivo é fazer o upload de arquivos de imagem da máquina local para uma CDN, que nesse caso é utilizado o serviço da ImgBB. A aplicação é bem objetiva e tem como página principal a tela abaixo, onde serão listadas as imagens que já foram enviadas para o ImgBB:
Além da lista de imagens (que no caso acima está vazia) temos um botão para realizar os nossos uploads. Ao clicar no botão Adicionar imagem será exibido o formulário abaixo:
Após escolher a imagem desejada, adicionar um titulo e uma descrição a imagem é enviada para a CDN e listada na home do usuário, conforme exemplificado a seguir:
E pronto, imagem foi para a CDN, foi registrada no nosso banco no FaunaDB e já está sendo listada na nossa aplicação.
Interface simples e objetiva para fazer nossos uploads para a CDN do ImgBB. Abaixo um GIF do fluxo completo desde o carregamento da nossa home até o upload da imagem:
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js. Além disto é bom ter um editor para trabalhar com o código como VSCode.
Antes de executar o projeto será necessário criar e adicionar duas variáveis de ambiente no arquivo .env na raiz do projeto, conforme o .env.example, onde:
NEXT_PUBLIC_IMGBB_API_KEYcorresponde a key da sua conta no ImgBB.FAUNA_API_KEYcorresponde a key do banco que precisa ser criando no FaunaDB. Por padrão o banco e coleção deve ser criado com o nomeimages, caso contrário deverá haver a alteração no código para que tudo funcione corretamente.
# Clone este repositório
$ git@github.com:MrRioja/uploaderImageReact.git
# Acesse a pasta do projeto no terminal/cmd
$ cd uploaderImageReact
# Instale as dependências
$ npm install
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn
# Por fim, basta executar o projeto em React com o comando abaixo em outro terminal
$ yarn dev
# A aplicação estará disponível localmente e conectada com a nossa API - acesse <http://localhost:3000>
