ecsistem / ecommece-compass

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.

E-commece Compass.uol

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.

Funcionalidades Principais🔥

Tela de Página Inicial

1. Lista de Produtos: Exibir uma lista de produtos incluindo nome, preço e, em alguns casos, uma descrição de avaliação.
2. Contador de Tempo para Ofertas Finais: Para alguns produtos, mostrar um contador de tempo indicando quanto tempo resta para o fim da oferta.
3. 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".
4. Funcionalidade de Favoritos: Os cards de produtos terão um botão para marcar produtos como favoritos.
5. 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.
6. Seção de Novos Produtos: Uma seção permitindo navegação para novos produtos.
7. Botão de Retorno: Um botão para voltar à tela anterior.
8. Cabeçalho e Rodapé Globais: O site deve ter um cabeçalho e rodapé consistentes em todas as páginas.
9. Banners Estáticos: Os banners na página inicial serão estáticos e não terão funcionalidade interativa.
10. Responsividade: A tela de Página Inicial deve ser adequadamente projetada para dispositivos móveis.

Tela de Detalhes do Produto

1. Detalhes do Produto: Exibir informações detalhadas sobre um produto específico, incluindo nome, preço, descrição, etc.
2. Funcionalidade de Adicionar ao Carrinho: Botão para adicionar o produto ao carrinho. Isso também deve atualizar o estado global do carrinho.
3. Funcionalidade de Compra: Opção para comprar o produto, com a capacidade de escolher a quantidade desejada.
4. Contador de Quantidade: Um contador que permite ajustar a quantidade de produtos a serem adicionados.

Tela de Carrinho

1. Informações de Compra: Exibir os produtos selecionados, suas quantidades e preços individuais.
2. Total de Itens e Valor Total: Mostrar o número total de itens no carrinho e o valor total da compra.
3. Contadores de Adicionar/Remover Produtos: Para cada produto no carrinho, fornecer um contador que permite ajustar a quantidade.

Link do demo 🚀

Produção: https://ecommece-compass.vercel.app/

Desenvolvimento: https://ecommece-compass.pages.dev/

Rodando localmente 💻

Siga os passos abaixo para rodar o projeto em sua máquina local:

1. Clone o repositório ⬇️

git clone https://github.com/ecsistem/blog-compass

2. Acesse o diretório do projeto 📂

cd blog-compass

3. Instale as dependências usando NPM 📦

npm install

ou usando PNPM 📦

pnpm install

ou usando Yarn 📦

yarn install

4. Inicie o servidor local 🚀

npm run start

Build 🛠️

Para fazer o build do projeto, execute o seguinte comando:

npm run build

🧱Ambiente de Desenvolvimento - Docker

Para iniciar o servidor de desenvolvimento do Vite com docker, execute o seguinte comando:

docker-compose up development

Isso iniciará o servidor de desenvolvimento do Vite, e você poderá acessá-lo em http://localhost:3000 no seu navegador.

🧱Ambiente de Produção - Docker

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 production

Isso 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.

Requisitos Técnicos

• 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.

Autores 👤

• @Edson Costa
• @Eduardo Kuritza
• @Cristopher Kovalski Saporiti

Contato📱

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/]

Suporte ✉️

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.