✨ Acesse o site do projeto ✨
Uma comunidade onde impulsionamos pessoas, carreiras e projetos sociais.
- Sumário
- Introdução
- Tecnologias utilizadas
- Setup
- Testes
- Husky + Lint Staged
- Contentful
- Material UI
- Contribuições
- Design e Guias de Estilo
Nós da Tech Pro Bem somos uma comunidade de profissionais de tecnologia que atua voluntariamente para ONGs e projetos sociais por meio de consultoria estratégica gratuita.
Neste projeto desenvolvemos o website institucional da Tech pro bem para apresentar nosso trabalho.
- HTML5 semântico
- Método Mobile-first
- NextJS - React framework for the web
- Typescript - Para tipos no javascript
- CSS Modules - Para definir classes localmente
- Contentful - Headless CMS
- Material UI - Biblioteca de componentss
- ES Lint - Ferramenta para validação de código
- Husky + Lint Staged - Ferramenta para validar commits
- Cypress - Framework de testes para aplicações front-end
Antes de começar, você vai precisar ter instalado o Node.js no mínimo na versão 18.
-
Clone localmente este repositório.
-
Instale as dependências:
npm install- Execute a aplicação em modo de desenvolvimento:
npm run devUtilizamos o Cypress para realizar testes automatizados nos componentes do nosso projeto. Os testes são desenvolvidos no diretório /cypress e podem ser executados locamente para garantir a integridade e o bom funcionamento dos componentes.
Para executar os testes com Cypress, siga os passos abaixo:
- Certifique-se de que a aplicação está sendo executada locamente. Caso contrário, inicie-a com o seguinte comando:
npm run dev- Abra uma nova janela do terminal e execute o seguinte comando para iniciar o Cypress:
npx cypress openNa interface do Cypress, selecione o teste que deseja executar e acompanhe os resultados.
- Ou você pode executar todos os testes na aba do terminal executando o seguinte comando:
npx cypress runPara assegurar a uniformidade do código e aderência às regras definidas, implementamos o Husky em conjunto com Lint Staged.
O Husky atua acionando ganchos (hooks) do Git antes de eventos específicos, como commits. O Lint Staged executa linting apenas nos arquivos que estão sendo commitados. Dessa forma, antes de confirmar um commit, o Husky aciona o Lint Staged para garantir que o código esteja formatado corretamente e siga as convenções definidas.
Todas as informações exibidas no site, incluindo imagens, símbolos, títulos e textos, são gerenciados pelo Contentful, um Headless CMS. Isso permite uma fácil atualização e manutenção do conteúdo sem a necessidade de modificar diretamente o código do projeto.
Alguns textos apresentam formatações específicas, como negrito, itálico e links. Nem todos os retornos do Contentful foram codificados para receber e formatar corretamente essas nuances. Portanto, pode ser necessário ajustar o código para processar essas formatações de maneira adequada.
Atualmente, o Contentful está configurado com um webhook que aciona automaticamente um novo deploy na Vercel sempre que há alterações no conteúdo. Isso elimina a necessidade de realizar manualmente um deploy para atualizar o conteúdo.
No Contentful, o conteúdo está organizado em tabelas, cada uma com um identificador. Manter os identificadores existentes é crucial para garantir a integridade das requisições de conteúdo no código. Evite modificar esses identificadores, pois podem estar sendo utilizados em requisições existentes.
- A tipagem de cada identificador está definida no arquivo
types.tsxde cada componente.
- Para obter mais detalhes sobre as configurações do Contentful, clique aqui.
Em nossa implementação da seção Dúvidas, optamos por incorporar a biblioteca Material UI para aprimorar a experiência do usuário. Para facilitar a navegação entre as diferentes categorias de perguntas, utilizamos o componente Tabs. Além disso, para apresentar as perguntas e respostas de maneira organizada e expansível, empregamos o componente Accordion.
- Crie uma branch com o tópico para as suas mudanças:
git checkout -b fix/fix-for-that-thing- Se tudo estiver certo após as alterações, faça um push para a sua branch:
git push origin fix/fix-for-that-thing-
feat- Commits do tipo feat indicam que seu trecho de código está incluindo um novo recurso (se relaciona com o MINOR do versionamento semântico). -
fix- Commits do tipo fix indicam que seu trecho de código commitado está solucionando um problema (bug fix), (se relaciona com o PATCH do versionamento semântico). -
docs- Commits do tipo docs indicam que houveram mudanças na documentação, como por exemplo no Readme do seu repositório. (Não inclui alterações em código). -
test- Commits do tipo test são utilizados quando são realizadas alterações em testes, seja criando, alterando ou excluindo testes unitários. (Não inclui alterações em código) -
build- Commits do tipo build são utilizados quando são realizadas modificações em arquivos de build e dependências. -
perf- Commits do tipo perf servem para identificar quaisquer alterações de código que estejam relacionadas a performance. -
style- Commits do tipo style indicam que houveram alterações referentes a formatações de código, semicolons, trailing spaces, lint... (Não inclui alterações em código). -
refactor- Commits do tipo refactor referem-se a mudanças devido a refatorações que não alterem sua funcionalidade, como por exemplo, uma alteração no formato como é processada determinada parte da tela, mas que manteve a mesma funcionalidade, ou melhorias de performance devido a um code review. -
chore- Commits do tipo chore indicam atualizações de tarefas de build, configurações de administrador, pacotes... como por exemplo adicionar um pacote no gitignore. (Não inclui alterações em código) -
ci- Commits do tipo ci indicam mudanças relacionadas a integração contínua (continuous integration).
Mais infos aqui.
- Link para o projeto no Figma: https://www.figma.com/file/ww3DjLyHa7rFPX9xQzsmHj/Site---Tech-Pro-Bem?type=design&node-id=0-1&mode=design