Developer

.eslintrc.cjs

@@ -7,7 +7,7 @@ module.exports = {
     'plugin:react/jsx-runtime',
     'plugin:react-hooks/recommended',
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  ignorePatterns: ['dist', '.eslintrc.cjs', 'Dockerfile', 'docker-compose.yml'],
   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
   settings: { react: { version: '18.2' } },
   plugins: ['react-refresh'],

.github/workflows/CIDocker.yml

@@ -0,0 +1,20 @@
+name: Docker Image CI
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Build the Docker image
+      run: docker build . --file Dockerfile --tag ecommece-compass:$(date +%s)

Dockerfile

@@ -0,0 +1,37 @@
+# Estágio de desenvolvimento
+FROM node:14 AS development
+
+WORKDIR /app
+
+# Copia apenas os arquivos necessários para aproveitar o cache de camadas do Docker
+COPY package*.json ./
+RUN npm install
+
+# Instala o pacote "vite" globalmente no contêiner
+RUN npm install -g vite
+
+# Copia todos os arquivos do projeto
+COPY . .
+
+# Executa o comando para iniciar o servidor de desenvolvimento do Vite
+CMD ["npm", "run", "dev"]
+
+# Estágio de produção
+FROM development AS production
+
+# Executa o comando para fazer o build da aplicação usando o Vite
+RUN npm run build
+
+# Estágio final para servir os arquivos com o Nginx
+FROM nginx:alpine AS final
+
+# Remove a configuração padrão do Nginx
+RUN rm -rf /usr/share/nginx/html/*
+
+# Copia todos os arquivos do projeto da etapa de produção para o diretório padrão do Nginx
+COPY --from=production /app/dist /usr/share/nginx/html
+
+EXPOSE 80
+
+# Comando para iniciar o servidor Nginx em modo daemon
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,15 +1,138 @@
-# React + Vite
+# E-commece Compass.uol
 
-## Links Demo
-Produção: https://ecommece-compass.vercel.app/
+![Logo](https://i.ibb.co/chJPk3G/Home.png)
 
-Desenvolvimento: https://ecommece-compass.pages.dev/
+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.
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+### Tela de Detalhes do Produto
 
-Currently, two official plugins are available:
+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.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+### 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/](https://ecommece-compass.vercel.app/)
+
+Desenvolvimento: [https://ecommece-compass.pages.dev/](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 ⬇️
+
+```bash
+git clone https://github.com/ecsistem/blog-compass
+```
+
+2. Acesse o diretório do projeto 📂
+
+```bash
+cd blog-compass
+```
+
+3. Instale as dependências usando NPM 📦
+
+```bash
+npm install
+```
+
+ou usando PNPM 📦
+
+```bash
+pnpm install
+```
+
+ou usando Yarn 📦
+
+```bash
+yarn install
+```
+
+4. Inicie o servidor local 🚀
+
+```bash
+npm run start
+```
+
+## Build 🛠️
+
+Para fazer o build do projeto, execute o seguinte comando:
+
+```bash
+npm run build
+```
+
+## 🧱Ambiente de Desenvolvimento - Docker
+Para iniciar o servidor de desenvolvimento do Vite com docker, execute o seguinte comando:
+
+```bash
+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:
+
+```bash
+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](https://www.github.com/ecsistem)
+- [@Eduardo Kuritza](https://www.github.com/eduardokuritza)
+- [@Cristopher Kovalski Saporiti](https://www.github.com/cristopherkovalski)
+
+
+## Contato📱
+
+Se tiver alguma dúvida ou precisar entrar em contato, você pode me encontrar em:
+
+//Edson Costa
+- E-mail: [email protected]
+- GitHub: [ecsistem](https://github.com/ecsistem)
+- LinkedIn: [https://www.linkedin.com/in/edsoncostadev/](https://www.linkedin.com/in/edsoncostadev/)
+
+//Eduardo Kuritza
+- E-mail: [email protected]
+- GitHub: [eduardokuritza](https://github.com/eduardokuritza)
+- LinkedIn: [https://www.linkedin.com/in/eduardokuritza/]
+
+//Cristopher Kovalski Saporit
+- E-mail: [email protected]
+- GitHub: [Cristopher Kovalski Saporiti](https://www.github.com/cristopherkovalski)
+- 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.

docker-compose.yml

@@ -0,0 +1,22 @@
+version: "3"
+
+project_name: ecommece-compass
+
+services:
+  # Serviço para o ambiente de desenvolvimento com o Vite
+  development:
+    build:
+      context: .
+      target: development
+    ports:
+      - "3000:3000" # Porta para acesso ao servidor de desenvolvimento do Vite
+    volumes:
+      - .:/app # Monta o diretório local como volume para refletir as alterações no contêiner em tempo real
+
+  # Serviço para o ambiente de produção com o Nginx
+  production:
+    build:
+      context: .
+      target: final
+    ports:
+      - "80:80" # Porta para acesso ao servidor Nginx em modo de produção

index.html

@@ -1,10 +1,10 @@
 <!doctype html>
-<html lang="en">
+<html lang="pt_BR">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="./src/assets/images/Icons/Logo1.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Ecommerce Compass</title>
   </head>
   <body>
     <div id="root"></div>