Skip to content

Latest commit

 

History

History
88 lines (64 loc) · 4.69 KB

README.md

File metadata and controls

88 lines (64 loc) · 4.69 KB
Raw

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:

  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.