Crie uma página HTML e use JavaScript para obter dados do JSON da requisição GET: https://us-central1-squid-apis.cloudfunctions.net/test-front-basic, listando o feed do Instagram da @squidapp.
Utilize CSS para personalizar o layout conforme a imagem fornecida, incluindo efeitos de hover para todas as imagens.
Cada imagem deve ter um link que abre no Instagram em uma nova aba ao ser clicada.
Garanta a responsividade e uma boa experiência de usuário, incluindo loaders, tratamento de erros, animações e outros efeitos.
A demonstração pode ser vista aqui: https://haghalaz.github.io/squid-front-end-challenge/
- React: Uma biblioteca JavaScript para construir interfaces de usuário.
- Vite: Uma ferramenta de build rápida que utiliza esbuild para desenvolvimento ágil e builds de produção otimizados.
- Tailwind CSS: Um framework CSS utilitário para construir designs personalizados de forma rápida.
- Biome: Uma ferramenta de linting, formatação e análise de código para manter a qualidade e a consistência do código.
- SWR: React hook para busca de dados. Ele retorna dados do cache (stale), envia uma solicitação de fetch (revalidate) e retorna os dados atualizados.
- Jest: Um framework de testes em JavaScript para garantir a qualidade e a confiabilidade do código.
- React Testing Library: Utilizado para testar componentes React de forma a garantir que eles se comportam como esperado.
- Atomic Design: Uma metodologia para criar sistemas de design consistentes e escaláveis, dividindo a interface do usuário em componentes atômicos, moleculares, organizacionais, de páginas e de templates.
- Custom Hooks: Abordagem no React para reutilizar lógica de estado entre componentes, encapsulando lógica de comportamento em funções reutilizáveis.
- Automated Tests: Utiliza Jest e React Testing Library para garantir que os componentes e hooks funcionem corretamente.
- Clone o repositório:
git clone https://github.com/Haghalaz/squid-front-end-challenge.git - Navegue até o diretório do projeto:
cd squid-front-end-challenge - Instale as dependências:
npm install - Inicie o servidor de desenvolvimento:
npm run dev - Abra seu navegador e vá para
http://localhost:5173/
Sinta-se à vontade para explorar as fotos e links. Se tiver alguma dúvida ou feedback, não hesite em entrar em contato através dos detalhes fornecidos.