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.
- Agradecimentos
- Atribuições
- Recursos
- Tech Stack
- Lições Aprendidas
- Otimizações
- Demo
- Rodar localmente
- Usado por
- Relacionados
- Membro responsável
- Licença
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.
- ✨ Cards interativos
- 📧 Envio de e-mail
- 🔎 Consulta de lojas físicas
- 🔗 Integração com o App
- 🛍️ Disponibilidade de produtos
Front-end: Vite, Vue e TailwindCSS
Back-end: Vue Router e Firebase
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().
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.
Utilizamos a Netlify para a implementação online do site
Nota: É necessário pussuir o gerenciador de pacotes Pnpm. Veja como instalar.
Clone o projeto
git clone https://github.com/FrogDevs/Equilibrio-Natural-Website.gitVá ao diretório do projeto
cd Equilibrio-Natural-WebsiteInstale as depêndencias
pnpm iInicie o servidor
pnpm devEste projeto é usado pela seguinte companhia
Veja outro projeto relacionado
- Web Design e Front-end: @viniciuscosta
“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