O projeto Quitanda Virtual foi criado com o propósito de explorar e aplicar os conceitos do Bootstrap, seguindo a abordagem "mobile first". Este projeto front-end visa construir a interface de uma loja virtual, especificamente uma quitanda. A iniciativa visa resolver desafios relacionados ao alcance de público, universalidade e padronização estética do negócio ao trazê-lo para o ambiente digital.
Implementação do conceito "mobile first", garantindo uma experiência de usuário otimizada em dispositivos móveis. Versatilidade, sendo aplicável a diversos tipos de negócios, proporcionando flexibilidade e adaptabilidade.
- Bootstrap 5: Framework front-end para desenvolvimento ágil e responsivo.
- jQuery 3: Biblioteca JavaScript para simplificar manipulações no DOM.
- Webpack 5: Empacotador de módulos para otimização e organização do código.
O Quitanda Virtual é uma solução para a expansão de negócios no meio digital, superando desafios como alcance de público e padronização visual. A plataforma oferece mobilidade aos usuários, permitindo que, independentemente de sua localização, tenham acesso a alimentos orgânicos e de qualidade, eliminando as barreiras de tempo e distância para uma alimentação saudável.
O projeto está em constante evolução, com melhorias sendo implementadas regularmente para aprimorar a experiência do usuário. Contribuições e sugestões são bem-vindas.
Para instalar o Quitanda Virtual, é necessário ter o Node.js configurado em seu ambiente de desenvolvimento.
Antes de começar, certifique-se de ter o Node.js instalado em seu sistema. Caso não tenha, você pode baixá-lo e instalá-lo a partir do site oficial do Node.js.
git clone https://github.com/welisten/DaTerra_Quitanda_Website cd DaTerra_Quitanda_Website npm installIsso instalará todas as dependências necessárias, incluindo o Webpack, jQuery e Bootstrap 5.
Se o seu intuíto é desenvolver tendo esse projeto como base, execute o ambiente de desenvolvimento.
npm startEste comando iniciará o ambiente de desenvolvimento usando o Webpack Dev Server. Você poderá acessar o projeto em http://localhost:8080 (ou outra porta, dependendo da configuração).
Nota: Caso você tenha especificado uma porta diferente, substitua 8080 pela porta que você configurou.
Se o seu intuíto é executar o produto já desenvolvido, gere a build de produção.
npm run buildEste comando acionará o Webpack para criar uma versão otimizada do seu projeto na pasta dist/. Essa pasta contém os arquivos prontos para implantação em um ambiente de produção.
Se você precisar modificar a porta do servidor, você pode fazê-lo no arquivo de configuração do Webpack (webpack.config.js). Procure por uma seção semelhante à seguinte:
devServer: {
port: 8080, // Substitua 8080 pela porta desejada
// ... outras configurações do servidor
}Altere o valor de port para a porta desejada. Após a alteração, salve o arquivo e reinicie o ambiente de desenvolvimento usando npm start. Certifique-se de atualizar a URL do projeto conforme necessário.
Certifique-se de ajustar as configurações do Webpack conforme necessário no seu arquivo de configuração (webpack.config.js). Caso haja problemas durante a instalação ou execução, consulte a seção de Perguntas Frequentes ou verifique as Issues no repositório para soluções comuns.
O projeto "DaTerra - Quitanda (website)" utiliza diversas dependências para seu funcionamento e desenvolvimento. Aqui está a lista das dependências usadas, junto com as versões específicas:
{
"dependencies": {
"bootstrap": "5.3.2",
"bootstrap-icons": "1.11.1",
"jquery": "3.7.1",
"popper": "1.0.1",
},
"devDependencies": {
"copy-webpack-plugin": "11.0.0",
"cross-env": "7.0.3",
"css-loader": "6.8.1",
"css-minimizer-webpack-plugin": "5.0.1",
"file-loader": "6.2.0",
"mini-css-extract-plugin": "2.7.6",
"node-sass": "9.0.0",
"postcss-loader": "7.3.3",
"sass-loader": "13.3.2",
"style-loader": "3.3.3",
"terser-webpack-plugin": "5.3.9",
"webpack": "5.89.0",
"webpack-cli": "5.1.4",
"webpack-dev-server": "4.15.1"
}
}Framework front-end que simplifica o desenvolvimento de componentes e estilos responsivos.
Conjunto de ícones SVG que podem ser facilmente integrados ao projeto Bootstrap.
Biblioteca JavaScript que simplifica a manipulação do DOM e interações com o usuário.
Biblioteca utilizada pelo Bootstrap para gerenciamento de popovers e tooltips.
Plugin para copiar arquivos e diretórios durante a construção do projeto.
Permite definir variáveis de ambiente de maneira consistente em diferentes sistemas operacionais.
Carrega arquivos CSS e adiciona-os ao DOM durante a execução do webpack.
Plugin para minimizar e otimizar arquivos CSS durante a construção do projeto.
Carrega arquivos como fontes e imagens e os move para o diretório de saída durante a construção.
Extrai o CSS em arquivos separados durante a construção do projeto.
Compilador Sass para Node.js.
Processador de CSS com plugins que podem transformar estilos de forma mais avançada.
Carrega arquivos Sass e os compila em CSS durante a execução do webpack.
Adiciona estilos ao DOM durante a execução do webpack.
Plugin que utiliza o Terser para minificar e otimizar os arquivos JavaScript durante a construção.
Empacotador de módulos para JavaScript e ativos.
Interface de linha de comando do webpack.
Servidor de desenvolvimento para servir o projeto durante o desenvolvimento.
Consulte a documentação oficial de cada uma para obter informações detalhadas sobre seu uso.
|-dist
|-node_modules
|-src
|-imgs
|-js
|-core
-include.js.
|-plugins
-changeHrefPlugin.js.
|-pages
|-scss
-bi.svg
-index.html.
-index.js
-README.md.
-package-lock.json
-package.json
-webpack.config.js.dist: Contém os arquivos gerados após a construção (build) do projeto.
node_module: : Contém as dependências do projeto instaladas pelo npm.
src: Contém o código-fonte do projeto.
imgs: Armazena imagens utilizadas no projeto.
js: Contém os scripts JavaScript do projeto.
core: Contém scripts de funções principais(globais), que poderão ser usadas em diferentes partes do projeto.
plugin: Contém scripts de plugins mais específicos.
pages: Contém as páginas específicas do projeto.
scss: Armazena os arquivos SCSS para estilização.
bi.svg: Arquivo SVG referente ao bootstrapIcons.
index.html: Página inicial do projeto.
index.js: Arquivo JavaScript principal.
README.md: Documentação do projeto
package-lock.json: Registra as versões exatas das dependências instaladas pelo npm.
package.json: Arquivo de configuração do npm.
webpack.config.js Configuração do Webpack para empacotar o projeto
Esta função foi projetada para possibilitar a inclusão dinâmica de conteúdo em elementos específicos da página através do atributo dt-include. O código utiliza a biblioteca jQuery para simplificar a manipulação do DOM e na execução de requisições AJAX. A função onLoadHtmlSuccess permite que outras partes do código registrem callbacks que serão chamados após o sucesso do carregamento do HTML.
Esta função é um plugin jQuery que adiciona a funcionalidade de alterar dinamicamente o valor do atributo dt-include pelo valor do atributo href de determinados links quando o mesmos são clicados. O plugin é acionado após o sucesso do carregamento de HTML, e sua aplicação específica é em elementos com o atributo dt-dashboard que tem a renderização de seu conteúdo seu conteúdo acontecendo de forma assíncrona.
Aqui estão as instruções sobre como usar o projeto "DaTerra - Quitanda (website)", que utiliza Webpack, jQuery e Bootstrap 5.
Para iniciar o ambiente de desenvolvimento e visualizar o projeto localmente, siga os seguintes passos:
# 1. Navegue até o diretório do projeto
cd caminho/para/DaTerra_Quitanda_Website# 2. Instale as dependências
npm install# 3. Execute o ambiente de desenvolvimento
npm startIsso iniciará o Webpack Dev Server e você poderá acessar o projeto no seu navegador em http://localhost:8080 (ou outra porta, se configurada de forma diferente).
O projeto "DaTerra - Quitanda (website)" já possui páginas prontas, como por exmplo as paginas de:Login, Registro, Carrinho e dashboad do cliente ... Explore cada uma delas para entender a experiência do usuário:
Quando estiver pronto para implantar o projeto em um ambiente de produção, gere uma build otimizada com o seguinte comando:
npm run buildIsso criará uma versão otimizada do seu projeto na pasta dist/, pronta para ser implantada.
Lembre-se de personalizar e adaptar as instruções conforme necessário para refletir as características específicas do seu projeto e as páginas que foram desenvolvidas.
Agradecemos seu interesse em contribuir para o projeto Quitanda Virtual! Sua ajuda é fundamental para tornar este projeto ainda melhor.
Faça um fork do repositório para sua própria conta. Isso criará uma cópia do projeto em seu perfil.
No seu terminal, execute os comandos:
git clone https://github.com/welisten/DaTerra_Quitanda_Website
cd DaTerra_Quitanda_WebsiteCrie uma nova branch para trabalhar em sua contribuição.
git checkout -b nome-da-sua-branchFaça as alterações necessárias no código e na documentação.
Certifique-se de que suas alterações não quebraram nada e que tudo está funcionando conforme esperado.
git add .
git commit -m "Descrição concisa das alterações"
git push origin nome-da-sua-branchVá até a página do seu repositório no GitHub e abra um Pull Request (PR) para a branch principal do projeto.
- Mantenha seus commits concisos e descritivos.
- Certifique-se de testar suas alterações antes de criar um PR.
- Documente adequadamente quaisquer alterações na documentação existente.
- Siga as diretrizes de codificação e estilo do projeto.
Se você encontrar problemas ou tiver ideias para melhorias, sinta-se à vontade para abrir uma issue. Contribuições nas issues também são bem-vindas!
Agradecço a todos os contribuidores que ajudaram a tornar este projeto possível. Em especial:
- O professor Leonardo da Cod3r, cujo o qual, atravez de seus cursos tenho evoluido cada dia mais
- O Desenvolvedor e Youtuber Ricardo Maroquio, pois pois foram seus conteúdos que serviram de inspiração para esse projeto
Se você tiver dúvidas ou precisar de ajuda durante o processo de contribuição, entre em contato através das Issues ou envie um e-mail para [[email protected]].
Este projeto não seria possível sem a contribuição valiosa de diversas pessoas e recursos. Gostaríamos de expressar nossa sincera gratidão a todos os envolvidos. Aqui estão alguns dos créditos:
- Victor Hugo Queiroga - Que muito me ajudou, na resolução de alguns problemas que apareceram no meio do proceso de desenvolvimento.
- Ricardo Maroquio - Que prestou seu conhecimento como material didatico para o ensino de programação
- Renata Caruzo - Que me ajudou, na resolução de alguns problemas que apareceram no meio do proceso de desenvolvimento.
- ...
Agradeço a todas as pessoas que enviaram sugestões, relatórios de bugs e ajudaram a melhorar este projeto.
- Bootstrap: Agradecemos à equipe do Bootstrap por fornecer um framework front-end poderoso e responsivo.
- jQuery: Reconhecemos a equipe do jQuery por sua contribuição significativa à manipulação do DOM em JavaScript.
- Outras Bibliotecas ou Recursos: Se você usou outras bibliotecas ou recursos específicos, liste-os aqui com os devidos créditos.
Este projeto foi inspirado pelo projeto QuitandaOnlineBS5 do professor Ricardo Maroquio e pelas aulas do curso Desenvolvimento Web Moderno da Cod3r, e suas respequitivas contribuição para a comunidade.
Agradecemos a todos os desenvolvedores, designers, e comunidades online que compartilham conhecimento e inspiração.
Se esqueci de mencionar alguém, por favor, me avise para que eu possa adicionar os créditos devidos.
Agradecemos a todos que contribuíram para o sucesso deste projeto!