Editor de Código - Alura Geek

A empresa AluraGeek está precisando trazer mais clientes e aumentar suas vendas, para isso desejam implementar um e-commerce e levar a empresa ao próximo patamar, se tornar mais digital. Este projeto foi proposto pela Alura durante outra edição do Desafio Alura Front-End.

Índice:

• Como utilizar
• Screenshot
• Como executar o projeto localmente
• Tecnologias Utilizadas
• Sobre o Desafio Alura Front-End
• O que aprendi neste desafio
• Próximas implementações

Como utilizar(WIP):

Screenshot(WIP)

Como executar o projeto localmente(WIP):

Tecnologias Utilizadas(WIP):

• CSS (Grid, Flexbox, Media Queries, Mobile First, BEM)

Sobre o Desafio Alura Front-End:

É dada uma situação problema, prazos e ferramentas para que solucionemos o problema.

História - A empresa AluraGeek está precisando trazer mais clientes e aumentar suas vendas, para isso desejam implementar um e-commerce e levar a empresa ao próximo patamar, se tornar mais digital.

Para isso eles estão solicitando a nossa ajuda como desenvolvedores para criar o site e o e-commerce deve conter os seguintes requisitos:

• Uma página inicial que contenha um botão "iniciar sessão" e um buscador de produtos oferecidos pela empresa.
• Um banner que contenha descontos, promoções, ou informações relevantes do momento.
• Uma galeria com as informações dos produtos como: a imagem, o nome do produto, o preço e um link que leva até a página de descrição do produto.
• Uma página do produto que contenha a imagem, o nome, a descrição e o preço.
• Um rodapé com formulário para contato e outras informações relevantes.
• Menu administrador para eles conseguirem adicionar, editar, buscar ou eliminar produtos da loja. É muito importante que o site seja responsivo para dar aos clientes a facilidade de comprar através de dispositivos mobiles.

Ferramentas - É dado um layout através da ferramenta Figma para que usemos como base para as cores, tamanhos, estilos. Também contamos com um mural do trello listando as atividades que deverão ser implementadas naquela semana, copiamos este mural e controlamos nosso progresso em cada tarefa por meio deste, movendo os cards que estão em desenvolvimento, desenvolvidos ou pausados devido a blockers.

(figma-link)[https://www.figma.com/file/itJpWbvHxSUcUeMPy1lmof/AluraGeek?node-id=0%3A1]

Desenvolvimento - Não é informado em si como fazer cada etapa, contamos com nosso conhecimento e uma lista de apoio com cursos recomendados da Alura que são relacionados aos tópicos. Comunidade: contamos também com um discord da Alura aonde podemos tirar as duvidas entre todos os que estão no desafio e também ver os projetos de outros participantes.

O que aprendi neste desafio(WIP):

• Aprendendo Sobre Javascript CRUD assincrono para criar as funcionalidades propostas

Próximas implementações:

Semana 1

• Elementos Principais do Site HTML
• Adicionar Logo da Empresa
• Criar Barra de Pesquisa
• Adicionar Botão Iniciar Sessão
• Adicionar Banner
• Criar Galeria de produtos - Seção Star Wars
• Criar Galeria de produtos - Seção Consoles
• Criar Galeria de produtos - Seção Diversos
• Adicionar Logo - Rodapé
• Adicionar Fale Conosco - Rodapé
• Adicionar Desenvolvedor - Rodapé

Semana 2

• Formulario de Login
• Pagina todos os produtos Desktop (falta adaptar Mobile e Tablet)
• Pagina de descrição do produto
• Criar seção produtos similares
• Criar seção - Adicionar Novo Produto
• Pagina administrador com opção de adicionar produtos novos ao catalogo

Pontos a revisitar/Corrigir:

• Linear-Gradient Banner imagem

Semana 3

• Adicionar Funcionalidade - Botão Ver consoles
• API - Listar Produtos
• Adicionar Funcionalidade - Ver Produto
• API - Descrição do produto
• Adicionar funcionalidade - Barra de Pesquisa
• Validação formulário "Fale conosco" - Rodapé
• Validação formulário - Iniciar sessão
• Validação formulário - Adicionar Novo Produto
• Extra - Ver tudo