Skip to content

Projeto desenvolvido durante o curso Intensivão de JavaScript da HashTag Treinamentos.

License

Notifications You must be signed in to change notification settings

scgalves/magazineIntensivao

Repository files navigation

magazineIntensivao

NPM

Sobre o projeto

Projeto desenvolvido durante o curso Intensivão de JavaScript da HashTag Treinamentos, iniciado em 28/08/2023 e finalizado em 01/09/2023. Trata-se de uma página de vendas de roupas masculinas e femininas, onde o usuário vai poder filtrar, dentre os produtos ofertados:

  • todos os produtos;
  • produtos masculinos;
  • produtos femininos.

Ao clicar no ícone do carrinho que está logo abaixo da imagem de cada produto, este produto será acrescentado a uma lista de produtos selecionados. A lista de produtos "Meu carrinho" poderá ser exibida ao clicar no ícone do carrinho no topo da página, à direita. Os itens desta lista permitem alteração na quantidade (- ou +). Os itens também podem ser removidos da lista. Ao clicar no botão "Finalizar Compra" será aberta uma página para o usuário fazer um cadastro com "Seus Dados" (dados pessoais), "Pagamento e Entrega" (dados do cartão de crédito e endereço de entrega) e a lista de produtos, quantidades escolhidas e o total da compra. Ao clicar no botão "Finalizar Compra" será aberta uma página com todas as listas de itens já comprados, em ordem de data e hora decrescente. A página de finalização da venda é meramente informativa, portanto, não faz comunicação com nenhuma operadora de cartão de crédito.

Layout

Imagem 1 Imagem 2 Imagem 3 Imagem 4 Imagem 5 Imagem 6

Tecnologias utilizadas

Back end

  • Node.js

Front end

  • HTML / CSS / JavaScript
  • Vite.JS
  • Tailwind CSS

Como executar o projeto

# Vá para a pasta, via Prompt, onde você costuma salvar os seus projeto. Não crie nenhuma nova pasta, neste momento, que seja
# relacionada a este projeto; o Vite vai se encarregar de criar essa pasta.
# Execute o comando descrito em https://vitejs.dev/guide/. IMPORTANTE: O Node.js já deve estar previamente instalado no seu
# computador! Se ainda não instalou o Node.js, providencie baixar o instalador a partir de https://nodejs.org/en/download,
# conforme o seu sistema operacional. Em seguida, execute o comando:
npm create vite@latest

# Pressione Y e Enter para instalar o pacote.

# Project name: digite um nome para o projeto e pressione Enter. Esta será a pasta onde serão salvos os arquivos do seu
# projeto.

# Package name: pressione Enter.

# Select a framework: selecione Vanilla dentre as opções e pressione Enter.

# Select a variant: selecione JavaScript e pressione Enter.

# Será criada a estrutura-base do seu projeto.
# Siga os comandos indicados na mensagem e pressione Enter após cada comando:
cd "nome do seu projeto"
npm install
npm run dev

# Será exibida uma URL para exibir o conteúdo da página (http://localhost:5173)

# Clonar o repositório. Para que não seja criada uma nova pasta magazineIntensivao dentro da sua pasta deste projeto, você
# pode baixar os arquivos do projeto e descompactá-los dentro da sua pasta do projeto. Ou execute:
git clone https://github.com/scgalves/magazineIntensivao

Referências

HashTag Treinamentos

Autor

Sérgio Carlos Guimarães Alves

scgalves@gmail.com

https://www.linkedin.com/in/sergiocarlosguimaresalves/

About

Projeto desenvolvido durante o curso Intensivão de JavaScript da HashTag Treinamentos.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published