├── README.md ├── entry-level.md └── mid-level.md /README.md: -------------------------------------------------------------------------------- 1 | # Sizebay Frontend Challenge 2 | 3 | ## Desafios disponíveis 4 | 5 | - Junior: https://github.com/sizebay/frontend-challenge/blob/main/entry-level.md 6 | - Pleno: https://github.com/sizebay/frontend-challenge/blob/main/mid-level.md 7 | -------------------------------------------------------------------------------- /entry-level.md: -------------------------------------------------------------------------------- 1 | # Sizebay Frontend Challenge - Nível Júnior 2 | 3 | ## Sobre a Sizebay 4 | 5 | > _A Sizebay é uma empresa que conecta conhecimentos de modelagem. No mercado desde 2014, nascemos considerando que poderíamos apenas de fato oferecer um produto inovador se considerássemos unir e oferecer o melhor conhecimento de produto e a mais avançada tecnologia da informação. Com um Provador Virtual que respeita a sua individualidade, Nossas recomendações são transparentes: exibimos as medidas do corpo e permitimos que sejam ajustadas. Consideramos como irá vestir em cada tipo de medida e em todos os tamanhos disponíveis._ 6 | 7 | ## Descrição do Teste 8 | 9 | Desenvolva uma aplicação web de lista de tarefas (To-Do List) baseada no design fornecido. Este teste avalia conhecimentos básicos em React, Tailwind CSS e organização de código. 10 | 11 | 12 | ## Design da Aplicação 13 | 14 | - Interface: https://xd.adobe.com/view/1dd85ae3-466a-46b4-8d38-f1c054d42ef4-488b/ 15 | - Implemente todos os elementos visuais e funcionais presentes no design. 16 | 17 | ## Funcionalidades Requeridas 18 | 19 | 1. Adicionar novas tarefas 20 | 2. Visualizar lista de tarefas 21 | 3. Marcar tarefas como concluídas 22 | 4. Remover tarefas 23 | 5. Acompanhar progresso geral 24 | 25 | ## Requisitos Técnicos 26 | 27 | - React.js com Hooks 28 | - Tailwind CSS para estilização 29 | - PNPM como gerenciador de pacotes 30 | - Estrutura de componentes React apropriada 31 | - Código livre de erros e warnings no console 32 | 33 | ## Instruções de Entrega 34 | 35 | 1. Faça fork do repositório base 36 | 2. Implemente a solução 37 | 3. Envie um Pull Request ao repositório original 38 | 4. Notifique por e-mail sobre a conclusão (breno@sizebay.com) 39 | 40 | ## Como Executar o Projeto 41 | 42 | ```bash 43 | # Instalação de dependências 44 | pnpm install 45 | 46 | # Iniciar servidor de desenvolvimento 47 | pnpm start 48 | ``` 49 | 50 | ## Critérios de Avaliação 51 | 52 | - Funcionamento correto das features solicitadas 53 | - Aderência ao design fornecido 54 | - Qualidade e organização do código 55 | - Uso adequado de componentes React 56 | - Aplicação correta do Tailwind CSS 57 | 58 | ## Deployment 59 | 60 | - A aplicação deve ser deployada na Vercel, Netlify ou outra plataforma de sua preferência 61 | - Inclua o link da aplicação em produção no README do seu projeto 62 | - Garanta que a aplicação esteja funcional no ambiente de produção -------------------------------------------------------------------------------- /mid-level.md: -------------------------------------------------------------------------------- 1 | # Sizebay Frontend Challenge - Nível Pleno 2 | 3 | ## Sobre a Sizebay 4 | 5 | > _A Sizebay é uma empresa que conecta conhecimentos de modelagem. No mercado desde 2014, nascemos considerando que poderíamos apenas de fato oferecer um produto inovador se considerássemos unir e oferecer o melhor conhecimento de produto e a mais avançada tecnologia da informação. Com um Provador Virtual que respeita a sua individualidade, Nossas recomendações são transparentes: exibimos as medidas do corpo e permitimos que sejam ajustadas. Consideramos como irá vestir em cada tipo de medida e em todos os tamanhos disponíveis._ 6 | 7 | ## Objetivo do Teste 8 | 9 | Desenvolver uma aplicação de lista de tarefas seguindo o design fornecido, aplicando boas práticas de desenvolvimento frontend, testes unitários e documentação de componentes. 10 | 11 | ## Escopo do Projeto 12 | 13 | O candidato deve implementar uma aplicação web completa que permita ao usuário criar, gerenciar e acompanhar tarefas. A interface deve ser responsiva e seguir fielmente o design proposto. 14 | 15 | ## Design e Especificações 16 | 17 | - Interface UI/UX: https://xd.adobe.com/view/1dd85ae3-466a-46b4-8d38-f1c054d42ef4-488b/ 18 | - A implementação deve ser pixel-perfect e totalmente responsiva. 19 | 20 | ## Requisitos Técnicos Obrigatórios 21 | 22 | - React.js (utilizando Hooks e componentes funcionais) 23 | - TypeScript com tipagem adequada 24 | - Tailwind CSS para estilização 25 | - PNPM como gerenciador de pacotes 26 | - Testes unitários com Jest/React Testing Library (cobertura mínima de 70%) 27 | - Documentação dos componentes com Storybook 28 | - Versionamento com Git (commits semânticos) 29 | - Sem erros ou warnings no console/compilação 30 | 31 | ## Estrutura Esperada 32 | 33 | ``` 34 | src/ 35 | components/ # Componentes React 36 | ComponentName/ 37 | index.tsx # Implementação do componente 38 | ComponentName.test.tsx # Testes unitários 39 | ComponentName.stories.tsx # Documentação Storybook 40 | contexts/ # Contextos React (se necessário) 41 | hooks/ # Custom Hooks 42 | utils/ # Funções utilitárias 43 | types/ # Definições de tipos 44 | ``` 45 | 46 | ## Instruções para Entrega 47 | 48 | 1. Faça fork do repositório 49 | 2. Implemente a solução seguindo os requisitos 50 | 3. Configure scripts no package.json: 51 | - `pnpm install` - Instalar dependências 52 | - `pnpm start` - Iniciar aplicação 53 | - `pnpm test` - Executar testes 54 | - `pnpm storybook` - Iniciar Storybook 55 | 4. Envie Pull Request ao repositório original 56 | 5. Notifique por e-mail (breno@sizebay.com) 57 | 58 | ## Critérios de Avaliação 59 | 60 | - Implementação completa das funcionalidades 61 | - Qualidade e organização do código 62 | - Estrutura de componentes e reutilização 63 | - Fidelidade ao design fornecido 64 | - Cobertura e qualidade dos testes 65 | - Documentação no Storybook 66 | - Performance e otimizações 67 | - Gerenciamento de estado 68 | 69 | ## Competências Avaliadas 70 | 71 | - Arquitetura frontend 72 | - Componentização e reutilização 73 | - Testes automatizados 74 | - Documentação de código 75 | - Resolução de problemas 76 | - Domínio de React e seu ecossistema 77 | - Atenção a detalhes visuais e de UX 78 | 79 | ## Deployment 80 | 81 | - A aplicação deve ser deployada na Vercel, Netlify ou outra plataforma de sua preferência 82 | - Inclua o link da aplicação em produção no README do seu projeto 83 | - Garanta que a aplicação esteja funcional no ambiente de produção --------------------------------------------------------------------------------