Objetivo do Teste

O objetivo deste teste é avaliar a sua habilidade de criar uma aplicação front-end funcional utilizando as seguintes tecnologias:

1. Next.js: Framework React para a construção de aplicações web.
2. React Query: Biblioteca para busca, cache e sincronização de dados em aplicações React.
3. Redux: Biblioteca para gerenciamento de estado.
4. Framer: Ferramenta para animações e interações.
5. SASS: Preprocessador CSS para estilização.
6. Docker e Docker Compose: Para configuração e orquestração do ambiente de desenvolvimento.

Requisitos do Teste

1. Interface do Usuário:

   • Implemente o design fornecido no link do Figma: Figma Design
   • Siga fielmente o design e as especificações fornecidas.
   • A interface é sobre um marketplace de NFTs com funcionalidades de carrinho de compras.

2. Gerenciamento de Estado:

   • Utilize Redux para gerenciar o estado global da aplicação.
   • Configure a store do Redux e implemente os reducers necessários.

3. Busca de Dados:

   • Use React Query para buscar e sincronizar dados da API.
   • A API está documentada em: Starsoft Challenge API Docs

4. Animações e Interações:

   • Utilize Framer para adicionar animações e interações conforme necessário.
   • Garanta que as animações sejam suaves e contribuam para a experiência do usuário.

5. Estilização:

   • Use SASS para estilizar a aplicação.
   • Organize os estilos de maneira modular e reutilizável.

6. Uso de Docker e Docker Compose:

   • Configure o ambiente de desenvolvimento utilizando Docker e Docker Compose.
   • Crie um arquivo Dockerfile para a aplicação Next.js.
   • Crie um arquivo docker-compose.yml para orquestrar os serviços necessários (por exemplo, a aplicação Next.js).

Critérios de Avaliação

1. Fidelidade ao Design: A interface deve ser fiel ao design fornecido no Figma.
2. Funcionalidade: A aplicação deve estar funcional e todas as interações devem estar implementadas corretamente.
3. Gerenciamento de Estado: O uso de Redux para gerenciamento de estado deve ser eficiente e bem estruturado.
4. Busca de Dados: A integração com a API usando React Query deve ser feita corretamente.
5. Animações e Interações: As animações devem ser suaves e bem integradas na experiência do usuário.
6. Código Limpo: O código deve ser limpo, seguindo boas práticas de desenvolvimento.
7. Estilização: A aplicação deve ser estilizada usando SASS de forma modular e reutilizável.
8. Configuração com Docker: A configuração do ambiente de desenvolvimento utilizando Docker e Docker Compose deve ser clara e funcional.

Passos para Realizar o Teste

1. Configurar o Ambiente:

   • Utilize Docker e Docker Compose para configurar e iniciar a aplicação Next.js.
   • Crie um arquivo Dockerfile para a aplicação Next.js.
   • Crie um arquivo docker-compose.yml para orquestrar os serviços necessários.
   • Configure as variáveis de ambiente necessárias.

2. Implementar o Design:

   • Implemente o design conforme fornecido no link do Figma.
   • A interface deve incluir um marketplace de NFTs com funcionalidades de carrinho de compras.

3. Configurar Redux:

   • Configure a store do Redux e crie os reducers necessários para gerenciar o estado global da aplicação.

4. Integrar React Query:

   • Use React Query para buscar e sincronizar dados da API.

5. Adicionar Animações com Framer:

   • Implemente animações e interações utilizando Framer.

6. Estilizar a Aplicação com SASS:

   • Utilize SASS para estilizar a aplicação de maneira modular e reutilizável.

Deploy da Aplicação

1. Deploy em um Serviço de Hospedagem:

   • Faça o deploy da aplicação em um serviço de hospedagem de sua escolha (Vercel, Netlify, etc.).
   • Garanta que a aplicação esteja acessível publicamente.

2. Incluir Instruções de Deploy:

   • Adicione ao repositório um arquivo DEPLOY.md com instruções detalhadas de como fazer o deploy da aplicação.

Conclusão

Este teste técnico é projetado para avaliar suas habilidades em criar uma aplicação front-end funcional usando Next.js, React Query, Redux, Framer e SASS. Ao seguir os requisitos e critérios de avaliação, você poderá demonstrar sua capacidade de trabalhar com essas tecnologias e criar uma aplicação de alta qualidade.

Após concluir o teste, entre em contato com o recrutador e envie os links do repositório e do deploy da aplicação.