labenuexercicios · MiaAntunes · May 6, 2023 · May 6, 2023 · May 6, 2023 · May 6, 2023
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Camila Antunes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,121 +1,89 @@
-# projeto-frontendreact
-
-Esse é o projeto de introdução aos fundamentos do React. Aqui, vamos praticar a estrutura do que consideramos a estrutura do React. O objetivo é que funcione como o front-end de um E-Commerce
-
-- JSX
-- Componentes
-- Props
-- Estado
-- Fluxo de dados no React
-- Renderização de listas
-- Renderização condicional
-- localStorage
-
-## Instruções
-
-O Astrodev deixou um testamento e essa foi a herança deixada pra vocês:
-
-```
-Estudantes do meu coração,
-Estou querendo montar um e-commerce de itens espaciais e vocês serão responsáveis por essa construção. 
-Pretendo montar diferentes linhas de produtos. 
-
-As possíveis linhas de produto são:
-- Satélites antigos;
-- Roupas espaciais;
-- Camisetas com estampas divertidas relacionadas ao espaço;
-- Viagens espaciais;
-- Meteoritos / aerolitos como pedras preciosas;
-- Brinquedos e produtos infantis temáticos;
-- Naves / Foguetes / Ônibus espaciais;
-
-Escolham uma linha dentre essas, e criem um e-commerce de acordo com a lista de requisitos.
-
-
-Att.
-```
-
-# Requisitos
-
-O projeto consistirá em 3 grandes partes:
-
-1. Home
-    - Mostrando todos os produtos
-    - Deve haver alguma forma de ordenar os produtos por ordem crescente ou decrescente de preço (pode ser na home em si ou junto dos filtros)
-    - Produtos:
-        - Devem ter um botão que permita adicioná-los ao carrinho
-        - Devem exibir o nome, preço e imagem em um card
-2. Carrinho
-    - Mostrar todos os produtos e quantidades adicionadas
-    - Capacidade de remover itens do carrinho
-    - Mostrar o valor total do carrinho
-3. Filtro
-    - Por valor mínimo e máximo
-    - Por nome do produto
-
-Exemplo de estruturação de **UM** produto (Lembrem-se que vocês terão uma lista contendo todos):
-
-```jsx
-{
-	id: 1,
-	name: "Foguete da Missão Apollo 11",
-	value: 10000.0,
-	imageUrl: "https://picsum.photos/200/200",
-}
-```
-
-### Lista de Requisitos
-- Home (Lista de Produtos)
-    - [ ]  O usuário deve ser capaz de visualizar uma lista de produtos
-    - [ ]  O usuário deve ser capaz de visualizar os dados do produto (nome, preço e imagem)
-    - [ ]  O usuário deve ser capaz de adicionar um produto no carrinho
-- Carrinho
-    - [ ]  O usuário deve ser capaz de visualizar os produtos adicionados
-    - [ ]  O usuário deve ser capaz de visualizar a quantidade correta de cada produto
-    - [ ]  O usuário deve ser capaz de remover itens do carrinho
-    - [ ]  O usuário deve ser capaz de ver corretamente o valor total de sua compra
-    - [ ]  Quando a página é atualizada, os itens devem continuar no carrinho
-- Filtros e Ordenação
-    - [ ]  O usuário deve ser capaz de filtrar os itens por preço mínimo
-    - [ ]  O usuário deve ser capaz de filtrar os itens por preço máximo
-    - [ ]  O usuário deve ser capaz de realizar uma busca por nome
-    - [ ]  O usuário deve ser capaz de ordenar os itens em ordem crescente ou decrescente
-    - [ ]  O usuário deve ser capaz de adicionar  filtros, busca e ordenação simultaneamente
-    - [ ]  O usuário deve ser capaz de retornar à visualização sem filtros
-
- ### 
-
-O layout da página é escolha de vocês! O exemplo abaixo é só uma implementação bemmm simples das funcionalidades, não se atenham a ele.
-
-http://fluttering-coast.surge.sh/
-
-
-https://user-images.githubusercontent.com/11279432/197185533-14582ca3-9eb0-4a5a-b57c-b94913ff2dd6.mp4
-
-
-
-
-  ### Conseguiu terminar? Aqui temos alguns **desafios**
-  1. Salvar e Recuperar conteúdo do carrinho usando o `LocalStorage`;
-  2. Dediquem um tempo para melhorar o layout e a usabilidade do seu site! Se baseiem em outros e-commerces que vocês gostam para chegar em um resultado   mais próximo do padrão de design visto no mercado;
-  3. Se TODO O RESTO DO SITE  e os dois desafios anteriores estiverem funcionando, pensem: qual outra funcionalidade está faltando? Decidam o que vocês concordam que poderia ser uma boa adição à loja virtual (pode ser qualquer funcionalidade, desde que vocês consigam implementá-la). Todas as funcionalidades extras implementadas devem ser listadas e explicadas no readme do projeto para que possam ser avaliadas.
-
-  ### Instruções para preparar o seu repositório
-
-- Faça o fork desse repositório e realize o clone da sua cópia `seu-nome-de-usuario/projeto-lista-intro-javascript`.
-   <details>
-   <summary>Quer uma dica?</summary>
-   <img src="https://firebasestorage.googleapis.com/v0/b/assets-conteudo.appspot.com/o/gerais%2Ffork.png?alt=media&token=7030e997-246a-41fe-a75f-2a2ced61e54d" alt="Como adicionar o projeto no repositório"/>
-   </details>
-- Crie os arquivos do projeto dentro deste repo;
-- **Lembre-se de abrir os PRs para seu próprio repositório.**
-- Para isso, você precisará fazer o projeto utilizando **branches**. Não faça as alterações direto na branch ```main```!
-
-### Instruções de entrega
-
-![image](https://user-images.githubusercontent.com/71137294/227538428-52271ed2-df78-4500-b286-25f03aa7bf2e.png)
-1.  [Crie o surge](https://labenu.notion.site/Deploy-de-front-React-com-Surge-f902a03ec1d247dc9af9aee5a1469d96) do seu projeto e pegue o link da publicação(deploy);
-2.  Adicione o link do surge no readme do seu projeto;
-3.  Tire print das páginas do seu projeto e cole no readme;
-4.  Abra um novo Pull Request (PR) com a frase **PR para correção**. Caso não saiba como fazê-lo, assista a esse [vídeo](https://www.canva.com/design/DAFY4nS5W2c/t92uFMR61YtmA7bCwj2S1Q/watch).
-5.  Envie o link do seu PR e do surge no [formulário de entrega](https://forms.gle/S9XChPZravP3WdxL6).
+# E-commerce LABECOMMERCE
+
+![Previa de Design](./projeto-labecommerce/src/assets/img/readme/Previa-do-site-labecommerce.png)
+
+🛠 Em andamento 
+
+Link para
+[FIGMA](https://www.figma.com/file/J15c99k2zxzbbCG382EsP7/Labecomerce---Projeto?type=design&node-id=46%3A110&t=e1bQnjl6mEckqOWX-1)
+
+<br>
+<br>
+
+# Sumário
+<!--ts-->
+   * [Sobre](#Sobre)
+   * [Etapa de Construção](#etapa-de-construção)
+   * [Tecnologias](#tecnologias)
+   * [Hospedagem](#hospedagem)
+   * [Licença](#licença)
+
+<!--te-->
+<br>
+<br>
+
+
+# Sobre
+
+O principal objetivo do projeto de E-commerce é proporcionar uma imersão nos fundamentos do React.JS, bem como oferecer uma valiosa experiência de trabalho com essa biblioteca JavaScript. Nesse projeto, temos a oportunidade de adquirir conhecimentos sólidos sobre os conceitos essenciais do React.JS e aplicá-los de maneira prática na construção de um sistema de comércio eletrônico.
+<br>
+<br>
+
+
+# Etapa de Construção
+### Componentes de interface
+
+-  Componente de Filtros
+-  Componente Home (lista de produtos)
+-  Componente de Carrinho
+-  Componente de card de produto
+-  Componente de quantidade de produto e ordenação
+
+### Produtos
+
+ - Criar o array de produtos e renderizar a lista de produtos com ele
+ - Criar o arquivo com o array de produtos e exportar
+ - Importar o array de produtos no componente base
+ - Renderizar a lista de produtos com (Array.map)
+ - Exibir a quantidade de produtos da lista
+ - Pegar o length do array do produtos que estão sendo renderizados
+ - Implementar a ordenação de produtos
+ - Criar um novo estado com a lista de produtos com filtro
+ - Implementar o onChange no input select e fazer a ordenação de acordo com o value do select (Array.sort)
+ -Fazer a ordenação do valor min e valor máx, usando os dois ao mesmo tempo
+
+### Carrinho
+
+- Adicionar o produto na lista do carrinho
+- Criar o estados para guardar a lista de itens do carrinho
+- Implementar a função adicionar
+- Implementar a função remover
+- Salvar e  no LocalStorage 
+- Recuperar os items quando atualiza com o LocalStorage
+- Somar os valores
+
+[Projects do Github - LABECOMMERCE](https://github.com/users/MiaAntunes/projects/6/views/2)
+<br>
+<br>
+<br>
+
+# Tecnologias
+
+<img width="30px"  src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/figma/figma-original.svg"/>
+
+<img width="30px" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg"/>
+
+<img width="30px" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" />
+
+<br>
+<br>
+<br>
+
+# Hospedagem
+[Hospedagem](https://projectlabecommerce.vercel.app/)
+<br>
+<br>
+<br>
+
+# Licença
+
diff --git a/projeto-labecommerce/.eslintrc.cjs b/projeto-labecommerce/.eslintrc.cjs
@@ -0,0 +1,15 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+  },
+}
diff --git a/projeto-labecommerce/.gitignore b/projeto-labecommerce/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/projeto-labecommerce/index.html b/projeto-labecommerce/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="src/img/icon_5b722d2d3fac40110f7ccde783a9cf22.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Labecommerce</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>