O site de Ecommerce para o programa de bolsa da @compass.uol composto por três telas principais: Página Inicial, Detalhes do Produto e Carrinho. O design e a funcionalidade de cada tela foi implementado conforme especificado no protótipo do Figma.
- Lista de Produtos: Exibir uma lista de produtos incluindo nome, preço e, em alguns casos, uma descrição de avaliação.
- Contador de Tempo para Ofertas Finais: Para alguns produtos, mostrar um contador de tempo indicando quanto tempo resta para o fim da oferta.
- Marcadores de Oferta e Novos Produtos: Alguns produtos serão marcados com a porcentagem de desconto como "Oferta", enquanto outros serão marcados como "Novo".
- Funcionalidade de Favoritos: Os cards de produtos terão um botão para marcar produtos como favoritos.
- Funcionalidade de Adicionar ao Carrinho: Os cards de produtos também incluirão um botão para adicionar o produto ao carrinho. Isso deve atualizar o estado global do sistema.
- Seção de Novos Produtos: Uma seção permitindo navegação para novos produtos.
- Botão de Retorno: Um botão para voltar à tela anterior.
- Cabeçalho e Rodapé Globais: O site deve ter um cabeçalho e rodapé consistentes em todas as páginas.
- Banners Estáticos: Os banners na página inicial serão estáticos e não terão funcionalidade interativa.
- Responsividade: A tela de Página Inicial deve ser adequadamente projetada para dispositivos móveis.
- Detalhes do Produto: Exibir informações detalhadas sobre um produto específico, incluindo nome, preço, descrição, etc.
- Funcionalidade de Adicionar ao Carrinho: Botão para adicionar o produto ao carrinho. Isso também deve atualizar o estado global do carrinho.
- Funcionalidade de Compra: Opção para comprar o produto, com a capacidade de escolher a quantidade desejada.
- Contador de Quantidade: Um contador que permite ajustar a quantidade de produtos a serem adicionados.
- Informações de Compra: Exibir os produtos selecionados, suas quantidades e preços individuais.
- Total de Itens e Valor Total: Mostrar o número total de itens no carrinho e o valor total da compra.
- Contadores de Adicionar/Remover Produtos: Para cada produto no carrinho, fornecer um contador que permite ajustar a quantidade.
Produção: https://ecommece-compass.vercel.app/
Desenvolvimento: https://ecommece-compass.pages.dev/
Siga os passos abaixo para rodar o projeto em sua máquina local:
- Clone o repositório ⬇️
git clone https://github.com/ecsistem/blog-compass- Acesse o diretório do projeto 📂
cd blog-compass- Instale as dependências usando NPM 📦
npm installou usando PNPM 📦
pnpm installou usando Yarn 📦
yarn install- Inicie o servidor local 🚀
npm run startPara fazer o build do projeto, execute o seguinte comando:
npm run buildPara iniciar o servidor de desenvolvimento do Vite com docker, execute o seguinte comando:
docker-compose up developmentIsso iniciará o servidor de desenvolvimento do Vite, e você poderá acessá-lo em http://localhost:3000 no seu navegador.
Para realizar o build da aplicação usando o Vite e executar o ambiente de produção com o Nginx, execute o seguinte comando:
docker-compose up productionIsso executará o build da aplicação usando o Vite e, em seguida, iniciará o servidor Nginx para servir os arquivos estáticos. Você poderá acessar a aplicação em http://localhost no seu navegador.
- A aplicação deve ser desenvolvida usando o framework ReactJS.
- O design e a funcionalidade devem ser implementados de acordo com o protótipo fornecido no Figma.
- O estado global da aplicação deve ser gerenciado usando ferramentas como Context API ou Redux.
- A aplicação deve ser responsiva e devidamente otimizada para dispositivos móveis.
Se tiver alguma dúvida ou precisar entrar em contato, você pode me encontrar em:
//Edson Costa
- E-mail: [email protected]
- GitHub: ecsistem
- LinkedIn: https://www.linkedin.com/in/edsoncostadev/
//Eduardo Kuritza
- E-mail: [email protected]
- GitHub: eduardokuritza
- LinkedIn: [https://www.linkedin.com/in/eduardokuritza/]
//Cristopher Kovalski Saporit
- E-mail: [email protected]
- GitHub: Cristopher Kovalski Saporiti
- LinkedIn: [https://www.linkedin.com/in/cristopher-kovalski-saporiti-a09526146/]
Para suporte, entre em contato enviando um e-mail para [email protected], [email protected] ou [email protected]. Estamos à disposição para ajudar com qualquer dúvida ou problema relacionado ao projeto.