Remix

Make your own version of BioQuest Biodiversity Explorer

Get an exact, working copy in your account, then change anything with chat.

Original by Impulso Studio

What would you change?

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

BIOQUEST: PROMPT MESTRE (PARTE 1/2)

1. OBJETIVO

Crie uma aplicação web chamada BioQuest, uma plataforma de exploração da biodiversidade que combine enciclopédia científica, identificação de animais por fotografia, exploração, coleção pessoal, XP, níveis, medalhas, missões, mapa e 67 criaturas fictícias especiais.

Não crie apenas uma demonstração visual. Implemente funcionalidades reais sempre que possível. Não implemente pagamentos, Pix, assinaturas ou cobranças.

Desenvolva em fases, mantendo o código funcional e preparado para continuar na Parte 2.

2. TECNOLOGIAS

Preferencialmente utilize React, TypeScript, Vite, Tailwind CSS e componentes reutilizáveis. Utilize Supabase para autenticação, banco de dados e armazenamento, quando configurável.

Integre APIs públicas de biodiversidade e serviços reais de identificação por imagem quando disponíveis. Para mapas, utilize uma solução compatível com os limites e termos de uso. Prepare a aplicação como PWA, se viável.

Não invente credenciais, resultados de APIs ou integrações concluídas. Utilize variáveis de ambiente e crie um arquivo .env.example.

3. IDENTIDADE VISUAL

Crie uma interface profissional, original, educativa, intuitiva e responsiva, inspirada em aplicativos de exploração natural e enciclopédias modernas.

Paleta:

* Verde-floresta: #173F35
* Verde-claro: #D7F4B8
* Fundo: #F7F8F4
* Branco: #FFFFFF
* Texto: #17231F
* Dourado: #E5A84B
* Azul científico: #4A91B8

Utilize cartões arredondados, tipografia legível, ícones consistentes, ilustrações de qualidade, animações discretas e bom espaçamento. Evite poluição visual, gradientes excessivos, sombras fortes e aparência de template genérico.

A interface deve funcionar em iPhone, Android, tablets e computadores.

4. PÁGINAS E NAVEGAÇÃO

Crie estas páginas com rotas funcionais:

1. Início.
2. Explorar.
3. Enciclopédia.
4. Identificar animal.
5. Minha coleção.
6. Criaturas secretas.
7. Missões.
8. Mapa.
9. Perfil.
10. Sobre o BioQuest.
11. Privacidade e ajuda.

No celular, use navegação inferior com Início, Explorar, Câmera, Coleção e Perfil. As demais páginas devem ser acessíveis por menus.

Não deixe botões sem ação nem links sem destino.

5. PÁGINA INICIAL

Exiba o logotipo BioQuest e a frase:

“A natureza está cheia de descobertas.”

Subtítulo: “Explore, fotografe, identifique e colecione a biodiversidade ao seu redor.”

Inclua botões para começar a exploração e abrir a enciclopédia, progresso pessoal, últimas descobertas, missões, destaque de criatura especial, animais populares e estatísticas pessoais.

Para usuários autenticados, mostre dados reais. Para visitantes, mostre uma apresentação e opções de entrar ou criar conta. Nunca apresente estatísticas fictícias como reais.

6. ENCICLOPÉDIA CIENTÍFICA

Organize os animais em mamíferos, aves, répteis, anfíbios, peixes, insetos, aracnídeos, moluscos, crustáceos e outros invertebrados.

Cada ficha deve incluir, quando disponível:

* Nome popular e científico.
* Fotografia com créditos e licença.
* Reino, filo, classe, ordem, família, gênero e espécie.
* Subespécie somente quando reconhecida cientificamente.
* Descrição, habitat, distribuição, alimentação, comportamento e características físicas.
* Reprodução e estado de conservação, quando houver dados confiáveis.
* Fonte e data de atualização, quando disponíveis.

Utilize fontes reais, como GBIF e iNaturalist, respeitando endpoints, limites, licenças e termos de uso. Não invente classificações, referências, nomes científicos ou estados de conservação. Quando um dado faltar, exiba “Informação não disponível”.

Regra taxonômica: a espécie é a unidade principal da coleção científica. Cor, idade, sexo, tamanho, plumagem sazonal e outras diferenças individuais são características ou observações da mesma espécie, não espécies novas. Crie entradas separadas para subespécies apenas quando houver suporte científico.

Implemente pesquisa por nome popular e científico, filtros por grupo, habitat, distribuição e conservação quando disponíveis, ordenação alfabética, paginação, cache, carregamento, erros compreensíveis e estado vazio.

7. IDENTIFICAÇÃO DE ANIMAIS

Crie a página “Identificar animal” com:

1. Abrir a câmera.
2. Selecionar fotografia da galeria.
3. Visualizar, confirmar ou cancelar.
4. Enviar para um serviço real de identificação, se configurado.
5. Exibir sugestões e ficha científica.
6. Permitir confirmar ou corrigir a identificação.
7. Salvar a observação.

Solicite acesso à câmera somente quando necessário. Valide formato e tamanho, comprima imagens quando apropriado, exiba progresso, permita cancelamento e trate falhas.

Não envie imagens sem consentimento. Não invente resultados nem percentuais de confiança. Só mostre confiança se o serviço fornecer esse dado.

Se não houver serviço configurado, explique claramente a limitação e permita pesquisar manualmente na enciclopédia. Não simule uma identificação automática.

O resultado deve mostrar fotografia, nome sugerido, nome científico quando disponível, confiança somente quando fornecida, outras sugestões e botões para consultar a ficha ou salvar a descoberta.

8. OBSERVAÇÕES E VARIAÇÕES

Cada observação pode registrar cor predominante, faixa etária estimada, sexo quando identificável, tamanho aproximado, comportamento, habitat, data, horário e notas.

Essas características pertencem à observação e não criam espécies automaticamente. Identificações incertas devem ficar provisórias até confirmação ou revisão.

9. MINHA COLEÇÃO

Crie uma coleção privada para cada usuário autenticado, com espécies descobertas, fotografias, primeira descoberta, histórico, grupo taxonômico, status de identificação, progresso por categoria e criaturas fictícias.

A mesma espécie conta apenas uma vez no total de espécies únicas, mesmo com várias observações. Preserve cada observação separadamente.

Inclua pesquisa, filtros, ordenação, grade, lista, detalhes e exclusão de observações próprias. Mostre estados vazios úteis.

10. PERFIL E AUTENTICAÇÃO

Permita cadastro, login, logout, recuperação segura de acesso, edição do nome de exibição, escolha de avatar e consulta de XP, nível, medalhas, espécies, criaturas e histórico.

Não armazene senhas em texto puro. Utilize o sistema de autenticação apropriado. Caso o Supabase não esteja configurado, deixe instruções claras e não finja persistência remota.

11. BANCO DE DADOS E SEGURANÇA

Prepare tabelas relacionadas para:

* profiles: id, display_name, avatar_url, created_at.
* species: id, scientific_name, common_name, taxonomy, description, habitat, distribution, conservation_status, source, updated_at.
* observations: id, user_id, species_id, image_url, observed_at, latitude, longitude, notes, identification_status, created_at.
* creatures: id, name, rarity, description, lore, image_url, active.
* creature_discoveries: id, user_id, creature_id, first_discovered_at, total_encounters.
* encounters: id, user_id, creature_id, encounter_type, created_at, request_id.
* user_progress: user_id, xp, level, updated_at.
* xp_events: id, user_id, event_type, reference_id, xp_awarded, created_at.
* missions: id, name, description, objective, reward_xp, active.
* user_missions: id, user_id, mission_id, progress, completed_at.

Ajuste o esquema para evitar redundância. Adicione índices, chaves estrangeiras, restrições e políticas RLS.

Cada usuário só pode acessar os próprios dados privados. Operações sensíveis devem ser validadas no servidor. Nunca exponha chaves secretas no frontend.

Valide entradas, limite abuso, evite recompensas duplicadas e proteja fotografias privadas. Não exija localização para usar o app. Oculte coordenadas precisas em compartilhamentos públicos por padrão.

12. ARMAZENAMENTO DE IMAGENS

Configure armazenamento público ou privado conforme a finalidade. Valide formato e tamanho, utilize nomes seguros, reduza imagens grandes, exiba progresso, trate falhas e exclua arquivos relacionados quando uma observação for removida.

Não apresente URLs inventadas como imagens existentes.

13. ACESSIBILIDADE E DESEMPENHO

Garanta contraste, texto legível, navegação por teclado, foco visível, textos alternativos, botões confortáveis em telas sensíveis ao toque, carregamento progressivo e funcionamento em conexões lentas.

14. PRIMEIRA ENTREGA

Implemente nesta etapa a estrutura do projeto, identidade visual, rotas, navegação, páginas principais, enciclopédia inicial e bases de autenticação, banco de dados e armazenamento.

Organize os arquivos e componentes. Crie .env.example, migrações iniciais e instruções de configuração.

Teste navegação, responsividade, pesquisa e estados de erro. Não marque testes como aprovados sem executá-los.

Importante: não finalize o projeto após esta parte. Preserve o código existente e aguarde a Parte 2, que adicionará XP, missões, mapa, as 67 criaturas, sorteios, integrações restantes, testes e publicação. Não recomece do zero quando receber a continuação.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.