Skip to content

LeonardoMachado30/Test-employer-interview-Leadster

Repository files navigation

Minha experiencia no projeto

As decisões que você tomou

Criei o projeto com o yarn, pois é a ferramenta mais rapida e comum para rodar a solução.

O Projeto segue os padrões estabelecidos pelo teste, utilizando NextJs na versão 13, juntamente com style components, seguindo padrões de projeto como clean code, tipagem forte e organização de componentes.

Desabilitei o SWC do nextjs e deixei somente o babel, pois o style component não e renderizado no servidor, então tive que usar a declarativa "use client" em alguns components.

Devido a falta de qualquer mecanismo de UX/UI, estipulando o padrão, alinhamento e espaçamento, como o figma, optei por recortar a imagem que me foi passada do layout, pois, além de estar em full hd, iria ser mais fiel e mais rápido do que criar do zero, então o local do site onde tem as descrições "Menos conversinha, mais conversão" é a imagem do teste, só que recortada.

Devido a algumas imagens não estarem no projeto, criei manualmente atravez do gimp e do figma, de modo a otimizar a aplicação e tornar as imagens de melhor manipulação.

Utilizei mais do tailwind css para implementar o estilo, pois o style components em excesso deixa o projeto "sujo" no meu ponto de vista.

Ao decorrer do desenvolvimento, levei cerca de 4 dias e 16 horas para desenvolver a tela, com interatividade e animações, de modo que respeitasse as regras estipuladas pelo teste

Como você organizou seu código

A organização do projeto, se baseia no seguinte formato de arvore:

Para o git, adotei as nomenclaturas:

ADD - Adicionar CHANGE - Alteração do código REMOVE - Removoção de algum código FIX - ajuste de bug

Para os padrões de arquivos:

├───app
├───components
│   ├───CardMovie
│   ├───ContentClientComponent
│   ├───Filter
│   ├───Footer
│   ├───Information
│   ├───Pagination
│   └───Play
├───styles
│   ├───assets
│   └───css
└───utils

Para os padrões de componentes:

├───CardMovie
├───ContentClientComponent
├───Filter
├───Footer
├───Information
├───Pagination
└───Play

As funcionalidades e instruções de como rodar o projeto

Este é um projeto Next.js inicializado com [create-next-app](https://github.com/vercel/next.js/tree/canary/packages /criar-próximo-aplicativo).

Como rodar o projeto

Primeiro , instale as dependencias:

yarn install

Logo apos, execute o servidor:

yarn dev

Abra http://localhost:3000 with your browser to see the result.

Referencias e estudos

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.