Portfolio

Portfolio de projetos desenvolvido para o desafio referente aos módulos do bootcamp de frontend avançado JAMStack da Alura.

Demo

https://portfolio-alura-bootcamp.vercel.app/

Deployment

Deploy the example using Vercel:

Deploy it to the cloud with Vercel (Documentation).

Run Locally

Clone the project

  git clone https://github.com/mayrazan/Mayra_Zanchett_Manchein_BootcampFrontendAlura.git

Go to the project directory

  cd my-project

Install dependencies

  yarn install

Start the server

  yarn start

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-styled-components with-styled-components-app
# or
yarn create next-app --example with-styled-components with-styled-components-app

Tech Stack

• React
• NextJS
• Styled-Components
• Framer-motion
• React Lottie
• Prop-Types

Assignments

Módulo 1

• Criar componentes.
• Adicione PropTypes a todos os componentes.
• Criar breakpoints
• Adicione Eslint no projeto
• Fazer deploy na Vercel

Módulo 2

• Criar todo o sistema de integração para o seu projeto de portfólio.
• Criar a função modal.
• Criar uma função que altere o estado da aplicação e exiba o componente modal ao clicar no botão de adicionar novo projeto.
• Criar uma função que vai alterar o estado da aplicação e fechar o modal, ao clicar fora dele.
• Criar o propTypes para essas funções.
• Criar uma função de handleChange para atualizar as informações que serão preenchidas dentro do input do formulário.
• Exibir o botão de enviar, apenas se os campos do formulário estiverem preenchidos.
• Os campos Seu nome, Seu email, Sua Mensagem não podem estar vazios.
• Aceitar apenas formatos válidos no campo Seu email.
• Criar o motion.div que vai ser a div feita para lidar com todas as propriedades do frame motion
• Escolher a animação que você achar mais interessante para o seu projeto.
• Criar uma função de onSubmit dentro do form.
• Fazer uma requisição POST para esse endereço utilizando fetch.
• Fazer uma verificação para saber se a resposta do servidor foi ok.
• Criar um objeto formStates onde passaremos os estados do componente como por exemplo DEFAULT, DONE, ERROR,seguindo as boas práticas de um código mais explícito e legível.
• Usar a biblioteca Lottie para criar as animações de sucesso e erro.

Módulo 3

• Criar o layout das páginas 404, sobre mim e página do projeto.
• Criar uma pasta pages e dentro dela criar uma página sobre mim, uma página de 404 e uma outra que vai ser a página de exibição do projeto.
• Utilizar o componente com o nome de NextLink para envolver todos os links do portfólio.
• Na página de projetos vai ser exibida uma imagem, por hora ela vai ser hospedada localmente na nossa aplicação. Para isso vamos criar um arquivo chamado db.json que vai receber as propriedades das imagens como nesse exemplo.
• A dica aqui é criar um wrapper para os cards, usar o componente Image do NextJS e passar o endereço da imagem no src como feito nesse exemplo.
• Por enquanto podemos usar imagens aleatórias do unsplash para popular o db.json e conforme vamos evoluindo no bootcamp vamos chegar em outros meios para hospedar as imagens dos nossos projetos no portfólio.
• Fazer um fetch para a api do github utilizando o getStaticProps e listar os seus repositórios na página sobre mim.
• Instalar a extensão do google lighthouse.
• Com o lighthouse instalado gere o relatório, ele vai indicar algumas melhorias.
• Crie um componente de SEO para servir as páginas do portfólio.
• Use o metatags.io, aqui você pode usar o site da Alura como exemplo para pegar as metatags, e utilize dentro do componente de SEO.
• Crie o robots.txt para melhorar a indexação com Google.
• Faça o deploy na Vercel e gere o relatório do lighthouse novamente e veja se o SEO aumentou.
• Abstrair componentes comuns que são repetidos em páginas diferentes.

Módulo 4

• Nessa tarefa você vai testar o formulário de entre em contato utilizando o cypress. Para isso precisamos identificar como uma pessoa faria para entrar em contato com a gente através do botão de contato.
• Para os testes de unidades, primeiro precisamos configurar o ambiente para poder utilizar a biblioteca Jest.
• Nessa tarefa você vai precisar testar unidades do portfólio utilizando a biblioteca Jest, como por exemplo, um teste de unidade de como a função propToStyle() deveria se comportar.
• Nesse desafio você vai confirmar se o React está de fato renderizando/exibindo o componente do jeito esperado. Depois de seguir as instalações da biblioteca React Testing Library e configurar o ambiente como feito em aula, você pode testar por exemplo o componente .

Módulo 5

• Nossa função agora é cadastrar as informações dos projetos no DATOCMS, consumir e exibir esse conteúdo utilizando NextJS. Você vai cadastrar conteúdo na página de um projeto. Ela precisa de uma imagem de um projeto seu e um texto falando sobre o que é aquele projeto.
• Uma das coisas que precisamos fazer para terminar de configurar o DATOCMS é gerar um token de API, com esse token você vai conseguir solicitar o conteúdo da API DatoCMS.
• Configurar o dotenv no seu projeto.
• Instalar o graphql e o graphql request.
• Pré renderize o conteúdo, para isso pode ser construído uma função utilizando o getStaticProps.

CI / CD

Instruções de como criar um sistema de integração e entrega contínua o CI/CD.

Instalar as seguintes dependências:

yarn add husky --dev
yarn add lint-staged --dev
npm install -g commitizen
commitizen init cz-conventional-changelog --yarn --dev --exact
yarn add @commitlint/config-conventional @commitlint/cli --dev

Adicionar as seguintes configurações no package.json:

"scripts": {
    "lint": "eslint --ignore-path .gitignore .",
    "lint:fix": "yarn lint --fix",
    "prepare": "husky install",
    "commit": "cz",
    "lint-staged": "lint-staged"
}

"lint-staged": {
    "*.js": [
      "yarn lint:fix"
    ]
  },

"husky": {
    "hooks": {
      "pre-push": "yarn lint",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
},

Terminal commands

Run

yarn prepare

Add a hook:

npx husky add .husky/pre-commit "yarn lint-staged"

Configure commitlint to use conventional config:

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

Para utilizar os comandos configurados, sempre que for commitar algum arquivo utilize yarn commit ao invés de git commit -m "mensagem".

Badges

License

MIT