/movie-cards-library

Primary LanguageJavaScript

Movie Cards Library

Projeto front-end com React. Neste projeto foi desenvolvida uma aplicação simples simulando um blog de crítica de cinema.

Projeto incentivado pela Trybe, no módulo de front-end do curso de Desenvolvimento Web.

Habilidades

- Gerenciamento de pacotes;

- React e PropTypes;

- Composição e renderização dinâmica de componentes.

Protótipo do projeto

Project Gif

Deploy

🗒 PARA RODAR O MOVIE CARDS LIBRARY LOCALMENTE:

  1. Clone o repositório
  • git clone git@github.com:unamednada/movie-cards-library.git
  • Entre na pasta do repositório que você acabou de clonar:
    • cd movie-cards-library
  1. Instale as dependências e inicialize o projeto
  • Instale as dependências:
    • npm install
  1. Rode o servidor e vá até http://localhost:3000 no seu navegador
  • Verifique que a sua porta 3000 está livre no localhost:
    • sudo ss -plnut
  • Agora, execute o servidor
    • npm start

🗒 PARA CONTRIBUIR COM O MOVIE CARDS LIBRARY:

  1. Clone o repositório
  • git clone git@github.com:unamednada/movie-cards-library.git
  • Entre na pasta do repositório que você acabou de clonar:
    • cd movie-cards-library
  1. Instale as dependências e inicialize o projeto
  • Instale as dependências:
    • npm install
  1. Crie uma branch a partir da branch master
  • Verifique que você está na branch master
    • Exemplo: git branch
  • Se não estiver, mude para a branch master
    • Exemplo: git checkout master
  • Agora, crie uma branch onde você vai guardar os commits do seu projeto
    • Você deve criar uma branch no seguinte formato: nome-de-usuario-feat-descricao
    • Exemplo: git checkout -b mariazinha-feat-mobile-design
  1. Adicione as mudanças ao stage do Git e faça um commit
  • Verifique que as mudanças ainda não estão no stage
    • Exemplo: git status (devem aparecer listados os novos arquivos em vermelho)
  • Adicione o novo arquivo ao stage do Git
    • Exemplo:
      • git add . (adicionando todas as mudanças - que estavam em vermelho - ao stage do Git)
      • git status (devem aparecer listados os arquivos em verde)
  • Faça o commit inicial
    • Exemplo:
      • git commit -m 'Feat: mobile responsive design' (fazendo o primeiro commit)
      • git status (deve aparecer uma mensagem tipo nothing to commit )
  1. Adicione a sua branch com o novo commit ao repositório remoto
  • Usando o exemplo anterior: git push -u origin mariazinha-feat-mobile-design
  1. Crie um novo Pull Request (PR)
  • Vá até a página de Pull Requests do repositório no GitHub
  • Clique no botão verde "New pull request"
  • Clique na caixa de seleção "Compare" e escolha a sua branch com atenção
  • Adicione uma descrição para o Pull Request, um título que o identifique, e clique no botão verde "Create pull request". Crie da seguinte forma: [MARIAZINHA][FEAT]Mobile design
  • Adicione uma descrição para o Pull Request, um título claro que o identifique, e clique no botão verde "Create pull request"
  • Não se preocupe em preencher mais nada por enquanto!
  • Volte até a página de Pull Requests do repositório e confira que o seu Pull Request está criado

⚠️ Aguarde review do seu PR ⚠️

Depois que as mudanças forem revisadas, elas poderão ser incorporadas, ou você pode ter que fazer uma mudança pra que elas sejam revisadas novamente. Fique de olho!

Linter

Para garantir a qualidade do código, vamos utilizar neste projeto os linters ESLint e StyleLint. Assim o código estará alinhado com as boas práticas de desenvolvimento, sendo mais legível e de fácil manutenção! Para rodá-los localmente no projeto, execute os comandos abaixo:

npm run lint
npm run lint:styles

Quando é executado o comando npm run lint:styles, ele irá avaliar se os arquivos com a extensão CSS estão com o padrão correto.

Quando é executado o comando npm run lint, ele irá avaliar se os arquivos com a extensão JS e JSX estão com o padrão correto.

Depois de terminar o desenvolvimento

Para "entregar" suas mudanças, siga os passos a seguir:

  • Vá até a página DO SEU Pull Request, adicione a label de "code-review" e marque seus colegas
    • No menu à direita, clique no link "Labels" e escolha a label code-review
    • No menu à direita, clique no link "Assignees" e escolha o seu usuário

⚠ Lembre-se que garantir que todas as issues comentadas pelo Lint estão resolvidas! ⚠