From 56d4e0f757fd16af9aba5baeec7fea342a404fbb Mon Sep 17 00:00:00 2001 From: Edson Costa Date: Mon, 28 Aug 2023 16:24:28 -0300 Subject: [PATCH] redme atualizado --- README.md | 124 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 116 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 336a1c2..157b9d5 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,123 @@ -# 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) + +## Contato📱 + +Se tiver alguma dúvida ou precisar entrar em contato, você pode me encontrar em: +- E-mail: edson.costa.pb@compasso.com.br +- GitHub: [ecsistem](https://github.com/ecsistem) +- LinkedIn [https://www.linkedin.com/in/edsoncostadev/](https://www.linkedin.com/in/edsoncostadev/) + +## Suporte ✉️ + +Para suporte, entre em contato enviando um e-mail para edson.costa.pb@compasso.com.br. Estou à disposição para ajudar com qualquer dúvida ou problema relacionado ao projeto. \ No newline at end of file