Estamos buscando um desenvolvedor frontend experiente para criar um Gerador de Memes interativo e responsivo utilizando React. O objetivo é desenvolver uma Single Page Application (SPA) intuitiva que permita aos usuários criar memes clássicos com texto sobreposto em imagens, ideal para produção rápida de conteúdo para redes sociais. O projeto é de escopo fixo e deve ser entregue com o código-fonte organizado e funcional.
Funcionalidades Essenciais do Site:
1. Barra de Navegação: Implementar uma barra de navegação no topo da página com um logo e o título "Meme Generator". A barra deve ter um fundo com gradiente roxo (de #672280 para #A626D3) e uma sombra sutil na parte inferior.
2. Campos de Texto Dinâmicos: Dois campos de texto para o usuário digitar o texto superior e inferior do meme. O texto digitado deve ser exibido em tempo real sobre a imagem do meme.
3. Botão "Get a new meme image": Um botão que, ao ser clicado, carrega uma nova imagem de meme aleatória da API do Imgflip. O botão deve incluir um efeito de hover com animação de escala e mudança de cor.
4. ÁRea de Exibição do Meme: A imagem do meme deve ser exibida com os textos sobrepostos. O estilo do texto deve seguir o padrão clássico de memes: fonte Impact, cor branca com contorno preto (utilizando text-shadow) e centralizado.
5. Integração com API: As imagens de meme serão obtidas da API pública do Imgflip (
https://api.imgflip.com/get_memes). A chamada inicial à API deve ser feita no carregamento do aplicativo, e os dados das imagens devem ser armazenados no estado da aplicação para serem utilizados aleatoriamente a cada clique no botão.
6. Layout Responsivo: O design deve ser totalmente responsivo, garantindo uma experiência de usuário otimizada tanto em desktops quanto em dispositivos móveis, com um breakpoint em 800px.
Stack Técnica Requerida:
* React 18 (utilizando Create React App)
* Javascript (jsx)
* css puro (sem frameworks como tailwind, styled components ou bibliotecas de ui)
* react hooks (usestate, useeffect) para componentes funcionais
* fetch api para todas as chamadas http (sem o uso de axios)
* npm como gerenciador de pacotes
o projeto é uma spa de página única, composta por um total de 3 componentes. O entregável final deve ser um projeto que possa ser executado sem problemas após "npm install" e "npm start", com o código-fonte disponível em um repositório GitHub.
Plazo de Entrega: No definido