Versão simplificada do site da doceria La Petra, desenvolvido com a biblioteca React, com o objetivo de atender os pedidos de ovos de páscoa.

O projeto é uma Single-Page Application feita com componentes React e estilizados com CSS puro.

Foi utilizada a biblioteca react-router-dom para permitir a nevagação entre as telas e a biblioteca react-datepicker para fazer o input de escolha de data, na página order.

Os produtos foram salvos em um banco de dados do Firebase e foi utilizado o método onValue da plataforma, para buscar os produtos e mostrá-los em tela.

Na página de produtos foi feito um componente Grid, para que o tamanho dos cartões dos produtos fosse definido como uma propriedade do componenete. O valor dessas propriedades fica responsável por definir uma classe pré-definida no CSS, que só será ativada quando a tela estiver em determinado tamanho. Esse componente foi feito com base na lógica e padrões de classe do framework Bootsrap.

A tela inicial (home) mostra os produtos do cardápio de Páscoa de 2023. O cabecalho da página é fixo e permite a navegação entre as rotas Produtos e Comprar.

A rota Produtos mostra também os produtos do cardápio de Páscoa de 2023 e quando o cliente clica em um dos produtos, surge um modal com a descrição e as opções de escolha para adicionar o produto à sacola de compras.

A rota Comprar mostra os produtos escolhidos, com suas respectivas cascas de chocolate e sabores. Logo abaixo tem um formulário para que o cliente insira seus dados, a forma de pagamento, a data de retirada do produto e uma opção para preencher o endereço de entrega, caso o cliente queira. Após clicar no botão de "Enviar Pedido", todos os dados dos produtos e os dados do cliente são armazenados em formato URL-encoded, para que o cliente seja redirecionado para o whatsapp da doceria e então envie o seu pedido formatado.

Caso você seja um desenvolvedor, use as instruções abaixo para instalar as dependências e sugerir alterações para a aplicação.

É possível verificar o conteúdo de cada versão, selecionando a branch específica e o histórico de commits.

Após baixar o projeto deste repositório, dentro do diretório do projeto você deve usar o comando npm install em um terminal, para gerar a pasta node_modules.

npm install

Concluída a instalação das dependências do projeto, use o comando npm start para visualizar a aplicação na porta localhost:3000.

npm start

A página irá recarregar a cada alteração feita no código e mostrará eventuais erros no console.

Clique nas versões abaixo, para observar a evolução do projeto ao longo do tempo.