Skip to content

My personal blog created with top technologies, React and Golang :D

Notifications You must be signed in to change notification settings

lazarok09/next-blog

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

72 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🚧 Em construção 🚧

Take a Coffee ☕

Spotify



MongoDB

To connect to the mongodb using shell, please provide the username/password of the application.

mongosh "mongodb+srv://cluster0.9bo4v.mongodb.net/" --apiVersion 1 --username <username>

And start your first queries by using commands such as

show dbs
use <db>

show collections

db.<collection>

Docs available at: 1.📘 https://www.mongodb.com/docs/mongodb-shell/run-commands/ 2.📘 https://www.mongodb.com/docs/v3.4/reference/mongo-shell/#command-line-options

Tec's ⤵️

Front-end Descrição
React.js Biblioteca de criação de Single Page Applications
Next.js Implementa SSG, SSR e outras funcionalidades para performace
TypeScript Superset do JavaScript, tipa e melhora o código de maneira geral
StoryBook Permite documentar e criar componentes reutilizáveis
Jest Permite realizar testes unitários na aplicação
Styled Components O CSS recebe características do SASS e componetiza estilos

Back-End Descrição
Strapi É um CMS baseado no Node.js que permite criar APIs de forma gratuita
MongoDB Podemos conectar a API do Strapi ao mongoDB gratuitamente
Cloudnary É onde salvamos as imagens, pois no servidor mongoDB não há essa opção no plano gratuito
GraphQL Permite criar funções e mutações nas chamadas a API, trazendo só dados selecionados


Execução 🔴

⚠️ Esse projeto ainda não está publicado, portanto seguimos para as instruções que irão te ajudar a clonar o projeto em sua máquina local

Scripts para clone, instalação e execução da aplicação

Você precisará de um terminal git, se estiver no Windows instale o bash
🌟 Para Linux ou MAC : Linux / Mac

Para acompanhar, editar ou ver o andamento do projeto -

git clone https://github.com/lazarok09/next-blog.git

Depois

npm i

Em seguida recomendo abrir o ambiente de desenvolvimento do StoryBook, pois é lá que estou criando os componentes. Como fazer isso ? simples, que você poderá encontrar as instruções mais abaixo nesse readme.

Sobre 🕵️

Esse projeto é um blog com API própria criada no Strapi. A criação dos componentes se dá principalmente no StoryBook, pois nos ajuda a criar componente individuais, com seus testes e estilos. Os testes são feitos com o Jest que ajudam bastante, podemos testar inclusive, implementações do styled componentes, ações de botões e etc.

Commits 📦

Os commits seguem o conventinal commits e são organizados por escopo de alteração. Você pode ler mais sobre no site oficial da documentação.

Além disso, estamos utilizando o Husky pra fazer varreduras no nosso código antes de cada commit, evitando o envio de alterações de código com erro. Você pode ler mais no repositório oficial do husky, ou nessa publicação Aplicando Padrões de Código com Pré-Commit Hook usando Husky


Ambientes 👾

StoryBook

Para rodar o ambiente do storybook você deverá digitar já dentro do projeto o comando. Após digitar o comando abaixo, será aberto no endereço http://localhost:3000 na sua máquina local a tela do StoryBook

npm run storybook

Imagem de demonstração de um componente react criado no storybook

um gif demonstrando a estrutura do StoryBook e eu clicando num botão que mostra ou não o texto no compoennte

Testes

O nosso ambiente de testes pode ser acessado utilizando qualquer um dos três comandos listados abaixo.

  • O primeiro nos traz os testes de forma simples e mostrando se foram 100% testados.
  • O segundo coleta o coverage que é uma pasta onde fica armazenado detalhes de cada linha testada e se essa está evidamente testada.
npm run test --watchAll --silent
npm run test -- --watchAll=false --coverage

Imagem de demonstração dos testes

uma imagem que demonstra o teste de 6 componentes com 100% de linhas testadas

< 👨‍💻 />