Desafio 02 - Upload de imagens

Confira o resultado do desafio em: upfi-rocketseat-vitor.vercel.app

💻 Sobre o desafio

---

Nesse desafio, você deverá criar uma aplicação para treinar o que aprendeu até agora no ReactJS

Essa será uma aplicação onde o seu principal objetivo é adicionar alguns trechos de código para que a aplicação de upload de imagens funcione corretamente. Você vai receber uma aplicação com muitas funcionalidades e estilizações já implementadas. Ela deve realizar requisições para sua própria API Next.js que vai retornar os dados do FaunaDB (banco de dados) e do ImgBB (serviço de hospedagem de imagens). A interface implementada deve seguir o layout do Figma. Você terá acesso a 4 arquivos para implementar:

• Infinite Queries e Mutations com React Query;
• Envio de formulário com React Hook Form;
• Exibição de Modal e Toast com Chakra UI;
• Entre outros.

A seguir veremos com mais detalhes o que e como precisa ser feito 🚀

Layout da Aplicação

Home

Form

Image

Imagens

Home

Form

Imagem

🚀 Techs

• ReactJS
• TypeScript
• Next.js
• Chakra-UI
• React Query
• React Hook Form
• ImgBB
• FaunaDB
• API do Next.js

Desenvolvimento

---

Pré-requisitos

• Instalar Node.js

• Instalar Yarn

Clone o repositório

$ [email protected]:vitorgaletti/ignite-reactjs-upfi.git

Executar Projeto

# Mudar para directório
$ cd ignite-reactjs-upfi/

• Instalar dependências

$ yarn

# Crie um arquivo .env.local e configure as váriaveis de ambiente
NEXT_PUBLIC_IMGBB_API_KEY=
FAUNA_API_KEY=

• Execute

$ yarn dev

$ yarn build

• Executar scripts

Ação	Utilização
Iniciar o servidor	yarn dev
Executar testes	yarn test
Compilar para produção	yarn build

Acesse http://localhost:3000 para ver o resultado.