🤓 SEVN: Teste Full Stack 01 💻
Bem vindo(a) ao teste full stack da SEVN!
O teste consiste em:
- Criar um projeto frontend com duas telas do SEVN NEWS, um portal de notícias hipotético.
- Criar uma API RESTful Node.js com dados mock (não precisa se preocupar com banco de dados) que expõe os 3 endpoints que esse portal consumirá.
Você deve criar as telas com base no design deste link.
Recomendamos que você crie dois repositórios separados, um para o código front-end e outro para o back-end. Mas caso você tenha familiaridade com monorepos a entrega também pode ser feita dessa forma.
Crie os repositórios antes de começar o desenvolvimento, realize nosso teste fazendo seus commits normalmente, e ao final do teste, é só compartilhar o repositório + seu currículo (caso ainda não nos tenha enviado) através do email: [email protected]!
- Home: Uma página que simula a "homepage" de um portal, contendo as notícias mais importantes.
- Notícia: Uma página interna com a notícia completa, que deve ser aberta sempre que você clicar em uma notícia da home.
Você deverá criar 3 endpoints, sendo 2 para montar a Home, e 1 para a tela de Notícia.
Atentar para os seguintes itens na API:
- Habilitar chamadas CORS.
- Usar endpoints com nomenclatura REST que faça sentido (e.g.:
/recurso/:idao invés de/recurso-:id, etc.); - Dados devem ser retornados em JSON.
- Apenas endpoints GET.
- Dados JSON mockados (ou seja, pode escrever direto na no código da API, sem precisar usar banco de dados).
- O primeiro endpoint deve retornar apenas os artigos principais da Home (marcados em roxo abaixo).
- O segundo endpoint deve retornar apenas os artigos secundários da home (marcados em roxo abaixo).
- O terceiro endpoint é responsável pelos detalhes de uma notícia, para montar a tela abaixo.
Front-end: Sua capacidade de construir um layout responsivo, componentizável (ou seja, reaproveitável quando fizer sentido) com código limpo e legível.
Back-end: Sua capacidade de criar um código legível, bem organizado, com endpoints RESTful auto-explicativos e payloads padronizados.
- Que o layout seja responsivo (disponibilizamos apenas a versão desktop, queremos ver sua capacidade de evitar que o layout "quebre" em tela menores);
- Que o front-end seja feito com alguma tecnologia moderna (React, Svelte, Astro, Vue, SvelteKit, Next.js, Remix, etc).
- Que o back-end seja feito em JavaScript ou TypeScript rodando em Node.js (Ex.: Hono, Fastify, Express.js, etc);
- Que o código seja limpo e legível;
- Que você crie componentes reutilizáveis onde convém;
- Que seu repositório tenha commits com mensagens legíveis e que façam sentido;
- Uso de Flexbox ou Grid Layout.
- Que os dados sejam mockados, para manter o teste simples, não é necessário utilizar banco de dados.
Lembre-se: Muitos commits detalhando as atividades são melhores que poucos commits com mensagens genéricas e muito código.
- Que sejam usados frameworks CSS como Bootstrap, Material.css, Tailwind e afins.
- que não seja utilizadas bibliotecas CSS-in-JS ou derivadas.
- Que você entregue um repositório apenas com um commit "gigante" com todo o código. Também gostamos de ler commits! :-)
Posso utilizar SASS?
R: SASS, LESS e PostCSS estão liberados.
Posso utilizar CSS-in-JS?
R: Nossos projetos não utilizam CSS-in-JS. Recomendamos que seu teste seja feito utilizando CSS/SASS/PostCSS.
Por que não posso usar Bootstrap/Tailwind CSS?
Porque nosso objetivo, dentre outras coisas, é avaliar sua capacidade de construir um layout com seus próprios conhecimentos em CSS. O uso de frameworks pode atrapalhar nisso, e nem todo projeto utiliza esses frameworks.
Como eu lido com a responsividade se não tem layout mobile?
Nós buscamos uma responsividade básica, e esse é um layout simples, então estamos curiosos para ver como você faria para tornar as duas telas responsivas!
No mais, te desejamos boa sorte e estamos ansiosos para ver como você se saiu! 🥳