README.md

Equilíbrio Natural - Website

>>> Read also in English

Site de divulgação para a empresa Equilíbrio Natural. Landing page em formato SPA (Single Page Application) com informações importantes sobre a empresa, como, formas de contato e disponibilidade de produtos em loja.

Captura de tela

Apêndice

• Agradecimentos
• Atribuições
• Recursos
• Tech Stack
• Lições Aprendidas
• Otimizações
• Demo
• Rodar localmente
• Usado por
• Relacionados
• Membro responsável
• Licença

Agradecimentos

Deixamos essa dedicatória a empresa Equilíbrio Natural a qual confiou em nossas habilidades para divulgação, gestão e automação de seu empreendimento. E a ETEC Jardim Ângela por nos proporcionar a busca pelo conhecimento necessário na realização desse trabalho.

Atribuições:

• unDraw
• Desing no Figma
• Formsubmit
• Netlify
• Unsplash: Primeira imagem
• Unsplash: Segunda imagem

Recursos

• ✨ Cards interativos
• 📧 Envio de e-mail
• 🔎 Consulta de lojas físicas
• 🔗 Integração com o App
• 🛍️ Disponibilidade de produtos

Tech Stack

Front-end: Vite, Vue e TailwindCSS

Back-end: Vue Router e Firebase

Lições aprendidas

Quais desafios foram enfrentados e como foram sobressaídos?

Integrar a API Firestore Database no projeto. A maneira encontrada de incluir dados em tempo real vindos da database foi instalando o SDK do Firebase/Firestore e usando o método onSnapshot().

Otimizações

Que otimizações foram feitas no código?

O gerenciador de pacotes Pnpm foi escolhido para o projeto por oferecer cold e hot cache. Pnpm é 3x mais rápido e eficiente do que o Npm e mais rápido do que o Yarn. Lidar com inúmeras bibliotecas e módulos foi uma tarefa mais fácil e segura com essa ferramenta.

Vite é uma ferramenta com a utilidade de cuidar do bundle da aplicação. Fornece melhores técnicas de otimização, resultando em uma maior performance na aplicação tanto em forma de desenvolvimento quanto de produção para o usuário final.

Ao construir aplicações com um bundler, o pacote JavaScript pode tornar-se bastante grande, e assim afetar o tempo de carregamento da página. É mais eficiente dividir os componentes de cada rota em pedaços separados, e só os carregarmos quando a rota for visitada. Tendo em vista isso, foi usado uma técnica conhecida como Lazy Load Routes. Vue Router oferece suporte nativo a técnica. Leia mais.

O site foi construido usando o conceito de Mobile First. Esse conceito se refere a criação de qualquer projeto que prioriza a experiência em dispositivos móveis, enquanto são feitas adaptações para resoluções maiores. Isso permite que o site seja completamente responsivo e adaptável a outras resoluções de telas, permitindo uma maior inclusão de clientes.

Demo

Utilizamos a Netlify para a implementação online do site

• Deploy
• Deploy para o TCC (banco de dados alternativo)

Rodar localmente

Nota: É necessário pussuir o gerenciador de pacotes Pnpm. Veja como instalar.

Clone o projeto

  git clone https://github.com/FrogDevs/Equilibrio-Natural-Website.git

Vá ao diretório do projeto

  cd Equilibrio-Natural-Website

Instale as depêndencias

  pnpm i

Inicie o servidor

  pnpm dev

Usado por

Este projeto é usado pela seguinte companhia

• Equilíbrio Natural

Relacionados

Veja outro projeto relacionado

• Equilíbrio Natural - Controle de Estoque

Membro responsável

• Web Design e Front-end: @viniciuscosta

Licença

• MIT
  
  

“Você deve ter paixão por uma ideia ou problema que quer resolver. Se você não tem paixão suficiente desde o começo, não vai aguentar a pressão.”

Steve Jobs