Image Gallery

App de galeria de imagens desenvolvido com Next.js/React, consumindo imagens da API do Pixabay.

Visão geral

• Fonte das imagens: Pixabay (https://pixabay.com/api/docs/)
• UI: Tailwind CSS + componentes do shadcn/ui (Radix)
• Galeria: grid responsivo + modal para visualizar a imagem em destaque
• Ações no modal:
  • abrir a imagem original em uma nova aba
  • baixar a imagem
  • navegar entre imagens (anterior/próxima)

Como o projeto está organizado

• Página inicial: app/page.tsx
• Componente da galeria/modal: components/MainPage/ShowImages.tsx
• Busca de dados: api/GetPixabayData.ts
  • getData() chama a API do Pixabay
  • getDataInJson() lê um arquivo local em public/dados/pixabayImages.json

Observação: no momento, a home está usando JSON local por padrão (veja app/page.tsx).

Rodando o projeto

1. Instale dependências

npm install

2. (Opcional) Configure a chave da API do Pixabay

Crie um arquivo .env.local na raiz do projeto com:

REACT_APP_PIXABAY_API_KEY=SEU_TOKEN_AQUI

• A chave você obtém criando uma conta no Pixabay e gerando um API key.
• Depois de alterar .env.local, reinicie o servidor (npm run dev).

3. Suba o servidor de desenvolvimento

npm run dev

Acesse:

• http://localhost:3000

Usar Pixabay (API) vs JSON local

• JSON local (padrão): em app/page.tsx, está getDataInJson().
• API do Pixabay: em app/page.tsx, troque para getData().

Exemplo (arquivo app/page.tsx):

• com JSON local: const dados = await getDataInJson();
• com API: const dados = await getData();

Scripts

npm run dev
npm run build
npm run start
npm run lint