Sobre • Tecnologias • Roadmap • Instalação • Layout • Visão do projeto • Agradecimento • Licença • Autor

Sobre

Upfi é uma aplicação web para vc armazenar e gerenciar suas imagens.

Esta aplicação é o resultado da realização do desafio obrigatório Upload com imagens do módulo quatro na trilha ReactJS do treinamento Ignite da Rocketseat 💜. O desafio consiste em:

• Implementar a interface da aplicação utilizando Chakra UI;
• Utilizar o React Query para buscar, armazenar em cache e atualizar os dados.
• Trabalhar com formulários usando o React Hook Form.

Outros pontos também foram trabalhados como scroll infinito e obervadores, troca de temas, imagens favoritas, gerenciamento de imagens e responsividade.

Todas as imagens na aplicação podem ser encontradas em Unsplash.

Tecnologias

• TypeScript
• Next.js
• Figma
• Chakra-UI
• React Query
• React Hook Form
• React Intersection Observer
• React Icons
• Imgbb
• supabase

Roadmap

• Renderizar um componente de carregamento enquanto os dados estão sendo buscados do supabase;
• Renderizar um componente de erro se houve erro ao carregar os dados do supabase;
• Renderizar imagens em grid;
• Ver imagem;
• Abrir imagem original em outra aba do navegador;
• Adicionar imagens;
• Tema claro/escuro;
• Scroll infinito;
• Excluir imagens;
• Atualizar imagens;
• Favoritar/Desfavoritar imagem;
• Criar álbum de favoritos;
• Adicionar responsividade:
  • 320px
  • 480px
  • 768px
  • 1024px
  • 1440px
  • Para telas maiores que 1440px, largura máxima fixada em 1440px.

Instalação

• Pré-requisitos

  • É necessário possuir o Git instalado e configurado no computador.
  • É necessário ter um gerenciador de pacotes seja o NPM ou Yarn.
  • É necessário ter uma conta no imgbb.
  • É necessário ter uma conta no supabase.

• Próximo passo

1. Faça um clone deste repositório:

   $ git clone https://github.com/die-goncalves/ignite-reactjs-modulo04-desafio02-upfi

2. Instale as depêndencias:

   # Entre no diretório do repositório clonado
   $ cd ignite-reactjs-modulo04-desafio02-upfi
   # Instale as dependências do projeto.
   $ yarn #ou $ npm install

3. Crie na raiz do projeto o arquivo .env.local.
   

   # .env.local
   NEXT_PUBLIC_IMGBB_API_KEY=
   NEXT_PUBLIC_SUPABASE_URL=
   NEXT_PUBLIC_SUPABASE_ANON_KEY=

   Para preencher a chave da API do imgbb clique neste link crie sua chave e a coloque no arquivo .env.local. Para preencher as chaves do supabase siga este guia.

4. Execute a aplicação

   $ yarn dev #ou $ npm run dev
   # A aplicação inciará na porta:3000 - acesse <http://localhost:3000>

Layout

A interface da aplicação foi baseada no layout fornecido a seguir. Para observar o layout no Figma acesse:

Visão do projeto

O GIF abaixo mostra como a aplicação responde para larguras de 320px, 480px, 768px, 1024px e 1440px. Para cada largura as seguintes operações são realizadas: ver, adicionar, favoritar, atualizar e excluir imagem.

Agradecimento

Rocketseat	Ignite	diego3g (Diego Fernandes)

Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

Autor

Feito por Diego Gonçalves, contato: