Projeto front-end com HTML, CSS e JS. Neste projeto há o consumo de uma API pública e persistência no local storage do navegador do cliente.
Simulador de front-end de um site e-commerce simples, envolvendo uma tela com produtos para serem selcionados, um carrinho de compras e o total da venda.
Projeto incentivado pela Trybe, no módulo de front-end do curso de Desenvolvimento Web.
- Fazer requisições a uma API *(Application Programming Interface)* do Mercado Livre;
- Utilizar os seus conhecimentos sobre JavaScript, CSS e HTML;
- Trabalhar com funções assíncronas;
- Clone o repositório
git clone git@github.com:unamednada/shopping-cart.git
- Entre na pasta do repositório que você acabou de clonar:
cd shopping-cart
- Instale as dependências e inicialize o projeto
- Instale as dependências:
npm install
- 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
- Clone o repositório
git clone git@github.com:unamednada/shopping-cart.git
- Entre na pasta do repositório que você acabou de clonar:
cd shopping-cart
- Instale as dependências e inicialize o projeto
- Instale as dependências:
npm install
- Crie uma branch a partir da branch
master
- Verifique que você está na branch
master
- Exemplo:
git branch
- Exemplo:
- Se não estiver, mude para a branch
master
- Exemplo:
git checkout master
- Exemplo:
- 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
- Você deve criar uma branch no seguinte formato:
- 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)
- Exemplo:
- 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)
- Exemplo:
- 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 )
- Exemplo:
- Adicione a sua branch com o novo
commit
ao repositório remoto
- Usando o exemplo anterior:
git push -u origin mariazinha-feat-mobile-design
- 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
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!
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.
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! ⚠