🔴 🟥 Teste Econverse - VTEX 🔴 🟥

• Desenvolver a pagina em React e TypeScript conforme o layout. Para conseguir pegar os elementos do Figma, basta copiar o layout para sua conta que terá acesso de edição.

• Montar a vitrine de produtos consumindo as informações dos produtos em json atraves desse Link.

• Desenvolver a interação ao clicar em um produto conforme layout. A interação consiste em abrir um modal com as principais informações do produto presente no arquivo JSON conforme o produto que clicar.

• Utilizar Pré-processador Sass, Less ou Stylus.

• Respeitar o Layout pixel a pixel, tamanho das fontes, cores e botões.

• Não Utilizar bibliotecas UI como Bootstrap, Foundation, ou afins.

• Utilizar Boas práticas de SEO

• Uso de HTML semântico

📑 Tabela de Conteúdos

• Sobre
• Referência
• Demonstração
• Performance
• Instalação
• Como usar
• Building
• Tecnologias
• Autor

🔖 Referência

Os arquivos de wireframes podem ser visto ou editados no seguinte link.

Figma: Teste Front-End - Econverse

👀 Demonstração

No link abaixo você pode ver a página no ar e rodar seus próprios teste de perfomance ou desempenho

Teste Front-End - Ecoverse: epiled.github.io/teste-front-end-jr/

desktop.mp4

mobile.mp4

📈 Performance Lighthouse

⚙ Instalação

1. git clone https://github.com/Epiled/teste-front-end-jr.git
2. cd teste-front-end-jr
3. npm install

👩‍🏫 Como usar

1. npm run dev
2. Abra a seguinte url http://localhost:5173/

⚙ Building

1. npm run build

🛠 Tecnologias

As seguintes tecnologias foram usadas na construção deste projeto:

• React
• Typescript
• Sass
• CSS Modules
• HTML5
• CSS3
• JavaScript
• Node.js

👨‍💻 Autor

_{Felipe De Andrade}

Feito com ❤️ por Felipe De Andrade 👋🏽 Entre em contato!