🔗 WEBJUMP

🚀 Teste para contratação webjump

Um projeto Next.js para ser usado como teste da empresa WEBJUMP .

O que foi utilizado?

Este projeto usa muitas coisas como:

• TypeScript
• NextJS
• Styled Components
• Jest
• React Testing Library
• Storybook
• Eslint
• Prettier
• Husky

🚧 WEBJUMP 🚀 Em construção... 🚧

Sobre o projeto

Primeiramente para a busca dos dados, estou utilizando a renderização statica(SSG) de alguns dados como a lista de categorias, e para a busca de dados como os produtos estou utilizando Renderização do Lado do Servidor (SSR).

No fetch do menu recebo um path do server, e coloco como link e para renderizar os itens de cada categoria estou utilizando paginas dinamicas baseadas no ID do path menu, e com esse ID eu consigo buscar os itens da categoria. utilizei o SSR nos itens apenas para mostrar a renderizção do lado servidor... acredito que para uma gama de produtos, fixos seria melhor uma renderização statica para não pesar o server, mas como são poucos itens é isso :)

Na lista de produtos podem ser ordenadas de varias formas, pode ser mostradas como LIST ou GRID.

OBS

Eu não consegui seguir um bom gitflow, adicionar storybook em todos os componentes nem test de renderização com JEST por falta de tempo, pois realizei o teste no ultimo dia :c por problemas pessoais.

Features

• Husky - Lint
• Generators
• Styles
• Jest
• Storybook
• Cypress

Começando

Primeiro, garanta que o backend esteja rodando na porta localhost:8888 e então rode o servidor:

npm install
# or

yarn

>>>>>>>>>>>>>>>>>>>>>>>>

npm run dev
# or
yarn dev

Abra http://localhost:3000 com seu navegador para ver o resultado.

Commands

• dev: runs your application on localhost:3000
• build: creates the production build version
• start: starts a simple server with the build production code
• lint: runs the linter in all components and pages
• test: runs jest to test all components and pages
• test:watch: runs jest in watch mode
• storybook: runs storybook on localhost:6006
• build-storybook: create the build version of storybook

Editando com Storybook

-- neste projeto fiz apenas um card de produto com meu proprio estilo e fiz algumas opções, apenas para demonstração aqui esta uma demonstração em imagem >

Voce pode ir alterando

• Titulo
• Texto do Botão
• Cor das opções de cores
• Cor do circulo background
• Titulo da opção

Saber mais

Para saber mais sobre Next.js, dê uma olhada nos seguintes recursos:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

Você pode verificar the Next.js GitHub repository - seus comentários e contribuições são bem-vindos!