💪 Sobre o Challenge da Alura

Esse é um desafio proposto por Alura maior escola de tecnologia do Brasil, onde recebemos um layout no figma completo e temos o desafio de fazer esse site por nossa conta em 4 semanas como tempo proposto.

Com incentivo de usarmos a comunidade do Discord como apoio são esses nossos colegas do Desafio. Mas é uma comundiade exclusiva para alunos por isso não posso deixar o link!

Também temos nossos instrutores que estão nos desafiando e auxiliando durante esse período que organizam cursos e conteudos para cada semana tanto na plataforma da alura quanto no trello.

Recebemos na plataforma do Trello um guia para semana com tarefas para serem feitas onde podemos visualizar melhor cada etapa desse Desafio e conferir nosso progresso!

Objetivo

Ao final desse desafio teremos esses conteudos prontos:

• Uma página inicial que contenha um buscador de produtos oferecidos pela empresa;
• Um banner/carrossel que contenha informações sobre a coleção do momento;
• Uma galeria com as categorias dos produtos disponíveis na loja;
• Uma galeria com as informações dos produtos, como: imagem, nome do produto, descrição e link que leva até a página de “Saiba mais sobre o produto”.
• Uma modal que contenha a imagem, o nome, a descrição, o preço, as variações do produto e a opção de adicionar na sacola;
• Uma seção para divulgar as facilidades que a loja proporciona para realizar as compras;
• Uma seção para cadastrar na newsletter e receber novidades;
• Um rodapé com informação do site.

🎨 Projeto no Figma

Acesse esse projeto aqui Projeto

Mas como podem ver, eu fiz algo bem diferente !!

Esta foto é para referência, depois eu vou colocar o Figma dela, bem bonitinho

1️⃣🚧🚧✅✅_check_mark:Feito

Esses são os meus objetivos da semana:

• ✅ Passo 1 | Cabeçalho
• ✅ Passo 2 | Cabecalho Responsividade
• ✅ Passo 3 | Banner
• ✅ Passo 4 | Seção "Busque por categorias"
• ✅ Passo 5 | Seção "Facilidades"
• ✅ Passo 6 | Seção "Produtos"
• ✅ Passo 7 | Seções "Responsividade"

Resultados da primeira semana:

2️⃣🚧🚧✅✅check_mark:Feito

Esses são os meus objetivos da semana:

• ✅ Passo 1 | Rodapé
• ✅ Passo 2 | Cadastro na Newsletter
• ✅ Passo 3 | Carrossel
• ✅ Passo 4 | Modal "Produtos"
• ✅ Passo 5 | Modal "Produtos - Responsividade"
• ✅ Passo 6 | Modal "Newsletter"

Resultados da Segunda semana:

3️⃣ Terceira Semana

Meus Objetivos

• ✅ Passo 1 | Banco de Dados no Firebase
• ✅ Passo 2 | Login com Google Firebase
• ✅ Passo 3 | Arrumar Blur dos Modais
• ✅ Passo 4 | Colocar Modal para Compra de Moedas
• ✅ Passo 5 | Finalizar compra de Moedas Por QRCode no Celular

Esses são os meus objetivos da semana:

• ✅ Passo 1 | Galeria de Produtos - Listagem via API
• ✅ Passo 2 | Galeria de Produtos - Filtrar por categoria
• ✅ Passo 4 | Modal de Produtos - Abrir / Fechar
• ✅ Passo 5 | Modal "Produtos - Responsividade"

4️⃣ Quarta Semana

Esses são os meus objetivos da semana:

• 🚧 Passo 3 | Galeria de Produtos - Filtrar por barra de pesquisa
• 🚧 Passo 6 | Modal de Newsletter - Abrir / Fechar

🤯 Minha experiência

Projeto em Desenvolvimento

Primeira Semana

Estou animado para compartilhar o progresso do meu projeto até agora! Ao longo da primeira semana, tenho me dedicado intensamente e estou me desenvolvendo consideravelmente. Uma das melhores partes dessa experiência tem sido a capacidade de adaptar a premissa inicial e colaborar com dois artistas incríveis: Chinno Ferreira e Arcano Ferreira. Eles foram fundamentais ao fornecer todo o material gráfico necessário para dar vida às minhas ideias.

Um aspecto que considero muito gratificante é o fato de ter optado por não utilizar bibliotecas como Bootstrap. Essa escolha tem me ajudado a aprimorar minhas habilidades em JavaScript e me desafiar a criar soluções personalizadas. Embora ainda haja muito a ser feito, estou empolgado com o progresso alcançado até agora.

Continuarei atualizando sobre o projeto e compartilhando os avanços nas próximas semanas. Mal posso esperar para ver como ele evoluirá e o que mais está por vir!

Segunda Semana

Olá, pessoal! Queria compartilhar com vocês mais um detalhe do meu projeto para o Challenge. Seguindo a mesma dinâmica da primeira semana, decidi não utilizar bibliotecas externas para os meus modais e efeitos visuais. Optei por utilizar apenas CSS e JavaScript, o bom e velho método manual!

Eu sei que existem muitas soluções prontas e muito mais bonitas disponíveis, mas isso iria contra o propósito de aprendizado do desafio. Para mim, seria apenas copiar e colar. Por exemplo, eu implementei um efeito de sombreamento que ficou assim:

Para explicar de forma simples, eu utilizei um trecho de código que controla o deslocamento da sombra de acordo com o movimento do mouse. Aqui está:

//*__________Inicio da Sombra__________________________________________
  const [deslocamentoSombraX, setDeslocamentoSombraX] = useState(40);
  const [deslocamentoSombraY, setDeslocamentoSombraY] = useState(40);
  const [intensidadeSombra, setIntensidadeSombra] = useState("");

  const handleMouseMove = (event) => {

    event.preventDefault()
    const { clientX, clientY } = event;
    const offsetX = clientX / window.innerWidth;
    const offsetY = clientY / window.innerHeight;

    setIntensidadeSombra(offsetX);
    setDeslocamentoSombraX(offsetX * -20);
    setDeslocamentoSombraY(offsetY * 20);
  }
//*__________Fim da Sombra_____________________________________________


//*_________Aplicar o style à imagem___________________________________
 <img
              className={`${styles.container_imagem_personagem} ${styles.dropShadow}`}
              src={card.imagem}
              alt="Imagem"

              style={{
                filter: `drop-shadow(${deslocamentoSombraX}px ${deslocamentoSombraY}px 5px rgba(0, 0, 0, ${intensidadeSombra}))`
              }}
  />

Além disso, fiz alguns testes para tornar a sombra mais dinâmica e poder utilizar um efeito de lanterna nos personagens quando aplicar o tema escuro. No entanto, acho que isso ficará para o próximo projeto ou para os ajustes finais.

Fiz também um modal para registro e login de usuário, mas como este não faz parte do projeto proposto, eu vou deixar para fazer considerações sobre ele quando a implementação estiver finalizada e rodando pelo Firebase (se eu conseguir). Mas caso tenha curiosidade, ele ficou assim:

Estou muito animado com o progresso que estou fazendo neste Challenge e ansioso para compartilhar o resultado final em breve. Continuem acompanhando!

🖼️ Sobre o Autor

🖼️ Banner do VitrineDev

🖼️ Foto do Projeto

###Eu ocultei alguns cards para que a foto não ficasse muito grande