Devstore é um projeto de e-commerce de produtos voltados para devs como camisetas, moletons, canecas.
Nesse projeto é usado o framework NextJS que é um case usado por algumas das maiores empresas do mundo, Next.js permite que você crie aplicativos Web full-stack, estendendo os recursos mais recentes do React e integrando poderosas ferramentas JavaScript baseadas em Rust para compilações mais rápidas.
- NextJS: Next.js é uma estrutura React para construir aplicativos web full-stack. Você usa React Components para construir interfaces de usuário e Next.js para recursos e otimizações adicionais.
- TailwindCSS: Uma estrutura CSS utilitária repleta de classes e que pode ser composta para construir qualquer design, diretamente em sua marcação.
- Zod: Validação de esquemas TypeScript-first com inferência de tipos estáticos.
Caso tenha interesse em visualizar o Layout temos o link do figma.
1. Rotas, Layouts e Grupos
O roteamento do nextJS é feita baseada em arquivos que dependendo do nome acaba gerando uma nova rota ou página dentro da aplicação. Uma página é uma interface de usuário exclusiva para uma rota. Você pode definir páginas exportando um componente de um page.js.
Um layout é uma interface de usuário compartilhada entre várias páginas. Na navegação, os layouts preservam o estado, permanecem interativos e não são renderizados novamente. Os layouts também podem ser aninhados.
No diretório do aplicativo, as pastas aninhadas normalmente são mapeadas para caminhos de URL. No entanto, você pode marcar uma pasta como Grupo de rotas para evitar que a pasta seja incluída no caminho URL da rota usando parenteses.
2. Geração estática da build
A geração estática permite criar uma versão em cache das páginas da aplicação antes de serem publicadas. Isso significa que quando um usuário acessar uma página, ela será exibida de forma instantânea, sem a necessidade de fazer requisições adicionais.
Para utilizar a geração estática, podemos exportar uma função chamada generateStaticParams dentro de uma página que recebe parâmetros dinâmicos.
3. Cache e Memoização
A Memoização é uma funcionalidade do React que evita requisições duplicadas durante o carregamento de uma página. Quando usamos Server Components, o React automaticamente impede que uma requisição seja feita mais de uma vez. No entanto, a Memoização não se aplica a requisições feitas em páginas diferentes. Para evitar requisições duplicadas em páginas diferentes, é necessário utilizar o Cache. O Next.js possui propriedades para controle de Cache, como a opção force-cache, que permite cachear uma requisição, e a opção no-store, que impede o cache. Além disso, há a opção revalidate, que define um tempo em segundos para atualizar o cache da requisição.
4. Cypress (E2E)
Os testes end-to-end simulam a navegação de um usuário na aplicação, testando a interface e as ações que um usuário comum faria. Utilizamos o Cypress, uma ferramenta open source muito popular para testes end-to-end. Apesar de existir o Playwright como alternativa, vamos focar no Cypress devido à sua maior adoção no mercado.
Os testes end-to-end garantem que o comportamento da aplicação se mantenha conforme novas features são adicionadas.
5. Cypress (E2E) - Fixtures
As fixtures no Cypress geralmente são arquivos JSON, YAML ou mesmo texto simples que contêm dados necessários para a execução dos testes. Esses dados podem incluir informações como entradas de formulário, dados de autenticação, respostas de API simuladas, entre outros.
Ao usar fixtures, você pode separar os dados de teste do código de teste em si, tornando seus testes mais flexíveis e fáceis de manter. Isso é especialmente útil quando você precisa testar vários cenários ou quando os dados de teste são extensos e complexos.
Você vai me encontrar em qualquer uma das redes sociais abaixo:
