{"id":24479378,"url":"https://github.com/aszurar/rocketshoes","last_synced_at":"2026-04-12T06:32:38.971Z","repository":{"id":272649662,"uuid":"848553711","full_name":"Aszurar/rocketshoes","owner":"Aszurar","description":"O projeto RocketShoes que simula um e-commerce de calçados, onde podemos adicionar, remover e editar itens no carrinho, além de finalizar a compra.","archived":false,"fork":false,"pushed_at":"2025-04-16T17:41:32.000Z","size":440,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-30T06:41:09.974Z","etag":null,"topics":["axe-core","framer-motion","json-server","react","react-helmet","react-redux","react-router-dom","reactjs","redux","redux-toolkit","shadcn-ui","tailwindcss","tanstack-query","tanstack-table","tanstack-virtual","vercel","vite","vitest","zod"],"latest_commit_sha":null,"homepage":"https://rocketshoes-sand.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Aszurar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-08-28T01:16:13.000Z","updated_at":"2025-04-16T17:38:53.000Z","dependencies_parsed_at":"2025-01-15T21:33:33.378Z","dependency_job_id":"6449c5ce-d90a-4cf2-b7e6-7e72b1714e05","html_url":"https://github.com/Aszurar/rocketshoes","commit_stats":null,"previous_names":["aszurar/rocketshoes"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Aszurar/rocketshoes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2Frocketshoes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2Frocketshoes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2Frocketshoes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2Frocketshoes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Aszurar","download_url":"https://codeload.github.com/Aszurar/rocketshoes/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2Frocketshoes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31706764,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-12T06:22:27.080Z","status":"ssl_error","status_checked_at":"2026-04-12T06:21:52.710Z","response_time":58,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axe-core","framer-motion","json-server","react","react-helmet","react-redux","react-router-dom","reactjs","redux","redux-toolkit","shadcn-ui","tailwindcss","tanstack-query","tanstack-table","tanstack-virtual","vercel","vite","vitest","zod"],"created_at":"2025-01-21T10:15:24.188Z","updated_at":"2026-04-12T06:32:38.953Z","avatar_url":"https://github.com/Aszurar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# #11 - React: **\u003chttps://rocketshoes-aszurar.vercel.app\u003e**\n\n**OBS**:\n\n- Branch **[main](https://github.com/Aszurar/rocketshoes/tree/main)**:\n  - Usamos o **JSON-Server** para simular a API e assim consumir os dados a partir do arquivo **server.json**.\n  - Não é a branch usada para o deploy.\n  - Definimos a porta para consumir pela porta 3333, por meio do ```http://localhost:3333``` definido na variável de ambiente **```VITE_API_URL```**.\n- Branch **[feature/no-json-server](https://github.com/Aszurar/rocketshoes/tree/feature/no-json-server)**:\n  - Consumimos diretamente o arquivo **server.json** passando o endereço dele na variável de ambiente **```VITE_API_URL```**\n  - Com isso, usamos essa branch para o **deploy** já que estamos o server.json diretamente.\n  - Aplicamos um delay no axios para simular a latência de uma API real por meio da variável ambiente **```VITE_ENABLE_API_DELAY```**.\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://i.imgur.com/yovUHTu.png\" width=\"1000\" alt=\"Banner\"\u003e\n\u003c/div\u003e\n\n## RocketShoes\n\n1. O projeto **RocketShoes** que simula um e-commerce de calçados, onde podemos **adicionar**, **remover** e **editar** itens no carrinho, além de **finalizar** a compra.\n2. O site foi publicado com CI/CD por meio da plataforma **[Vercel](https://vercel.com/)**.\n3. Acesse e teste o projeto em: **\u003chttps://rocketshoes-aszurar.vercel.app\u003e**\n\n  \u003cdiv align=\"center\"\u003e\n    \u003ch3\u003e\u003ca href=\"https://rocketshoes-aszurar.vercel.app\"\u003eRocketShoes\u003c/a\u003e\u003c/h3\u003e\n\n\nhttps://github.com/user-attachments/assets/9a53a273-02e3-4d1f-936a-9f65df354a04\n\n\n  \u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![GitHub deployments](https://img.shields.io/github/deployments/Aszurar/rocketshoes/production?logo=vercel\u0026logoColor=white\u0026label=Vercel\u0026labelColor=black)](https://vercel.com/aszurars-projects/rocketshoes) [![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge\u0026logo=vite\u0026logoColor=white)](https://vitejs.dev/) [![cypress](https://img.shields.io/badge/-cypress-%23E5E5E5?style=for-the-badge\u0026logo=cypress\u0026logoColor=058a5e)](https://www.cypress.io/) [![Vitest](https://img.shields.io/badge/-Vitest-739b1b?style=for-the-badge\u0026logo=vitest\u0026logoColor=white\u0026link=https://www.typescriptlang.org/)](https://vitest.dev/) [![React](https://img.shields.io/badge/-React-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026link=https://react.dev)](https://react.dev/) [![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)](https://tailwindcss.com/) [![Framer](https://img.shields.io/badge/Framer-black?style=for-the-badge\u0026logo=framer\u0026logoColor=blue)](https://motion.dev/) [![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge\u0026logo=redux\u0026logoColor=white)](https://redux.js.org/)  [![TanStack Query](https://img.shields.io/badge/-TanStack_React%20Query-FF4154?style=for-the-badge\u0026logo=react%20query\u0026logoColor=white)](https://tanstack.com/query/latest) [![TanStack Virtual](https://img.shields.io/badge/-TanStack_React%20Virtual-a854f7?style=for-the-badge\u0026logo=react%20query\u0026logoColor=white)](https://tanstack.com/virtual/latest) [![TanStack Table](https://img.shields.io/badge/-TanStack_React%20Table-3c82f6?style=for-the-badge\u0026logo=react%20query\u0026logoColor=white)](https://tanstack.com/table/latest) [![AXIOS](https://img.shields.io/badge/-AXIOS-5a29e4?style=for-the-badge\u0026logo=axios\u0026logoColor=white)](https://axios-http.com/ptbr/)  [![TypeScript](https://img.shields.io/badge/-TypeScript-%23007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\u0026link=https://www.typescriptlang.org/)](https://www.typescriptlang.org/) [![JavaScript](https://img.shields.io/badge/-JavaScript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026link=https://www.javascript.com/)](https://www.javascript.com/) [![HTML5](https://img.shields.io/badge/-HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white\u0026link=https://developer.mozilla.org/pt-BR/docs/Web/HTML)](https://developer.mozilla.org/pt-BR/docs/Web/HTML) [![CSS3](https://img.shields.io/badge/-CSS3-1572B6?style=for-the-badge\u0026logo=css3\u0026link=https://www.w3schools.com/css/)](https://www.w3schools.com/css/) [![PNPM](https://img.shields.io/badge/pnpm-%234a4a4a.svg?style=for-the-badge\u0026logo=pnpm\u0026logoColor=f69220)](https://pnpm.io/pt/)\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n        \u003ch2\u003e\n          \u003ca href=\"#information_source-sobre\"\u003eSobre\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\n          \u003ca href=\"#interrobang-motivo\"\u003eMotivo\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\n          \u003ca href=\"#art-design\"\u003eDesign\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\n          \u003ca href=\"#seedling-requisitos-mínimos\"\u003eRequisitos\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\n          \u003ca href=\"#rocket-tecnologias-utilizadas\"\u003eTecnologias\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\n          \u003ca\n          href=\"#truck-entrega-e-distribuição-continua\"\u003eCI/CD\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\n          \u003ca href=\"#package-como-baixar-e-executar-o-projeto\"\u003eBaixar e Executar\u003c/a\u003e\u0026nbsp;\n        \u003c/h2\u003e\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://i.imgur.com/Q06HxsN.gif\" width=\"400\" alt=\"Gif mostrando o projeto\"\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\" \u003e\n\n**[Vídeo no Youtube](https://www.youtube.com/watch?v=gO87-UdwtRQ)**\n\n\u003c/div\u003e\n\n---\n\n## :information_source: Sobre\n\nO projeto tem o intuito de simular um marketplace de calçados, onde podemos escolher entre vários tipos de calçados, a quantidade, adicionar ou remover do carrinho. Além disso, podemos ver o total do preço, quantidade e finalizar a compra.\n\n- O objetivo desse projeto é praticar o **gerenciamento e manipulação de Estados** via **[Redux](https://redux.js.org/)** com o **[Redux Toolkit](https://redux-toolkit.js.org/)** e **[React Redux](https://react-redux.js.org/)**.\n- Criamos 1 slice para o carrinho onde temos diversas ações que envolvem adicionar e remover itens do carrinho e persistir os dados no localStorage, além de calcular o total do preço dos produtos no carrinho.\n- Além disso, abordamos o **[TanStack Query - React Query](https://tanstack.com/query/latest)** para o consumo de dados e o **[TanStack - Table](https://tanstack.com/table/latest)** para a criação da tabela produtos no carrinho.\n\n- A acessibilidade foi levada em consideração, com o uso da lib **[axe-core](https://www.npmjs.com/package/@axe-core/react)** para testes e correções, assim como leitor de tela ChromeVox.\n\n- O projeto é um desafio da trilha de **React** da **[Rocketseat](https://www.rocketseat.com.br/)**, sendo o 3º desafio dessa trilha.\n\n### Tela inicial\n\n\u003cdiv align=\"center\" gap=12\u003e\n      \u003cimg src=\"https://i.imgur.com/xhupl3M.png\" width=\"400\" alt=\"Tela Inicial no tema claro\"\u003e\u003cimg src=\"https://i.imgur.com/nKG5XdQ.png\" width=\"400\" alt=\"Tela Inicial no tema escuro\"\u003e\n\u003c/div\u003e\n\n---\n\n## :interrobang: Motivo\n\n- O objetivo do projeto é:\n\n  1. Praticar o uso do **Redux** para o **gerenciamento e manipulação do Estado** do carrinho\n      - Usamos o **[Redux Toolkit](https://redux-toolkit.js.org/)** em conjunto com o **[React Redux](https://react-redux.js.org/)** implementação do reducer e actions do carrinho.\n  2. Usamos o **[TanStack Query](https://tanstack.com/query/latest)** para o consumo de dados e otimização com **gerenciamento de cache** em conjunto com **[axios](https://axios-http.com/ptbr/docs/intro)**.\n  3. Usamos o  **[TanStack - Table](https://tanstack.com/table/latest)** para a criação da tabela produtos no carrinho com **ordenação**, **busca** e **paginação** dos itens e uma manipulação mais robusta e componente agnóstico, que pode ser usado em qualquer projeto e tabela.\n  4. Usamos o **[TanStack - React Virtual](https://tanstack.com/virtual/latest)** para **otimização** de listagens e criamos 2 componentes agnósticos de **virtualização** de listagens:\n      1. **```\u003cVirtualizedGridList/\u003e```** - Para renderização listagens organizadas em grid, **+ de 1 coluna**.\n      2. **```\u003cVirtualizedList/\u003e```** - Para renderização listagens organizadas em flex-col, **1 coluna**.\n  5. Usamos o **[React Router Dom](https://reactrouter.com/home)** para a navegação entre as páginas.\n  6. Usamos do **[Vitest](https://vitest.dev/)** para **testes unitários** nas funções de **manipulação** do Estado global no Redux.\n  7. Usarmos o **[Cypress](https://www.cypress.io/)** para realizar **testes(E2E)** e automatizá-los pelo **[GitHub Actions](https://github.com/features/actions)**.\n  8. Usamos o **[framer-motion](https://motion.dev/)** para implementação de animações de layouts básicas.\n  9. Criamos a interface com **[shadcn/ui](https://ui.shadcn.com/)** e **[tailwindcss](https://tailwindcss.com/docs/installation/using-vite)** e usamos **[tailwind-merge](https://github.com/dcastil/tailwind-merge)** em conjunto com  **[clsx](https://github.com/lukeed/clsx)** e **[tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)**.\n  10. Melhoramos o SEO do projeto com **[React-Helmet-Async](https://github.com/staylor/react-helmet-async#readme)**\n  11. Melhoras a acessibilidade usando o **[@axe-core/react](https://github.com/dequelabs/axe-core-npm?tab=readme-ov-file#readme)** para revisar os elementos e componentes com as diretrizes de acessibilidade estabelecidas no **[WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/)** estabelecidas pelo **[W3C](https://www.w3.org/)**.\n\n### O que aprendi de novo?\n\n  1. Criação de **tabelas funcionais** com **[TanStack - Table](https://tanstack.com/table/latest)**\n  2. Criação de **listagens virtuais** com **[TanStack - React Virtual](https://tanstack.com/virtual/latest)**\n  3. Animações de **saída de layout** com **[framer-motion](https://motion.dev/)**\n  4. Animações só com **[TailwindCSS](https://tailwindcss.com/)**\n  5. Configuração do **[Cypress](https://www.cypress.io/)** para projetos Vite.\n\n### Carrinho\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/iTdHrik.png\" width=\"400\" alt=\"Carrinho cheio no modo claro\"\u003e_\u003cimg src=\"https://i.imgur.com/rFqQI5Q.png\" width=\"400\" alt=\"Carrinho cheio no modo escuro\"\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://i.imgur.com/2XfQCcr.png\" width=\"400\" alt=\"Carrinho vazio no modo claro\"\u003e_\u003cimg src=\"https://i.imgur.com/tf5EW4A.png\" width=\"400\" alt=\"Carrinho vazio no modo escuro\"\u003e\n\u003c/div\u003e\n\n---\n\n## :art: Design\n\n- Não temos um figma do design em si, mas é do desafio Rocketshoes da trilha React da Rocketseat\n\n---\n\n## :seedling: Requisitos Mínimos\n\n  1. NodeJS\n  2. ReactJS\n  3. Vite\n  4. PNPM\n\n### Tela de Finalização\n\n\u003cdiv align=\"center\" \u003e\n  \u003cimg src=\"https://i.imgur.com/YKLmLEb.png\" width=\"400\" alt=\"Tela de finalização - tema claro\"\u003e_\u003cimg src=\"https://i.imgur.com/kj95g9S.png\" width=\"400\" alt=\"tema escuro\"\u003e\n\u003c/div\u003e\n\n---\n\n## :rocket: Tecnologias Utilizadas\n\n- O projeto foi desenvolvido utilizando as seguintes tecnologias:\n\n  1. **[axios](https://axios-http.com/ptbr/docs/intro)**\n  2. **[axe-core/react](https://www.npmjs.com/package/@axe-core/react)**\n  3. **[Framer Motion](https://www.framer.com/motion/)**\n  4. **[JavaScript](https://developer.mozilla.org/pt1.BR/docs/Web/JavaScript)**\n  5. **[Json Server](https://github.com/typicode/json-server)**\n  6. **[NodeJS](https://nodejs.org/en/)**\n  7. **[Lucide Icons](https://phosphoricons.com/)**\n  8. **[Lottie Files](https://lottiefiles.com/)**\n  9. **[React](https://pt1.br.react.dev/)**\n  10. **[React Helmet Async](https://github.com/staylor/react-helmet-async#readme)**\n  11. **[React Router Dom](https://reactrouter.com/web/guides/quick-start)**\n  12. **[React Redux](https://react-redux.js.org/)**\n  13. **[Redux Toolkit](https://redux-toolkit.js.org/)**\n  14. **[React Toastify](https://fkhadra.github.io/react-toastify/introduction)**\n  15. **[TailwindCSS](https://tailwindcss.com/)**\n  16. **[TanStack Query](https://tanstack.com/query/latest)**\n  17. **[TanStack Table](https://tanstack.com/table/latest)**\n  18. **[TanStack Virtual](https://tanstack.com/virtual/latest)**\n  19. **[TypeScript](https://www.typescriptlang.org/)**\n  20. **[Vercel](https://vercel.com/)**\n  21. **[Vite](https://vitejs.dev/)**\n  22. **[Vitest](https://vitest.dev/)**\n  23. **[zod](https://zod.dev/)**\n\n### Responsividade\n\n\u003cdiv align=\"center\" \u003e\n     \u003cimg src=\"https://i.imgur.com/Hjfbmqf.png\" width=\"200\" alt=\"Tela inicial responsiva - tema claro\"\u003e_\u003cimg src=\"https://i.imgur.com/gVaz9Pr.png\" width=\"200\" alt=\"Tela inicial responsiva - tema escuro\"\u003e_\u003cimg src=\"https://i.imgur.com/gYAz0Pq.png\" width=\"200\" alt=\"Pesquisa responsiva - tema claro\"\u003e_\u003cimg src=\"https://i.imgur.com/OcGKf2j.png\" width=\"200\" alt=\"Pesquisa responsiva - tema escuro\"\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\" \u003e\n       \u003cimg src=\"https://i.imgur.com/2K1hUz6.png\" width=\"200\" alt=\"Tela de carrinho responsiva - tema claro\"\u003e_\u003cimg src=\"https://i.imgur.com/vydFSqM.png\" width=\"200\" alt=\"Tela  de carrinho responsiva - tema escuro\"\u003e_\u003cimg src=\"https://i.imgur.com/efiFrJE.png\" width=\"200\" alt=\"Carrinho vazio responsiva - tema claro\"\u003e_\u003cimg src=\"https://i.imgur.com/lbxO1Pa.png\" width=\"200\" alt=\"Carrinho vazio responsiva - tema escuro\"\u003e\n \u003c/div\u003e\n\n---\n\n## :truck: Entrega e distribuição continua\n\n**\u003chttps://rocketshoes-sand.vercel.app\u003e**\n\n- Para a publicação da aplicação foi por meio da plataforma **[Vercel](https://vercel.com/)** onde é possível publicar de forma rápida, fácil e simples projetos React e Next que estão hospedados no GitHub, GitLab, dentre outras plataformas de repositório remoto de graça.\n- Com isso, o CI/CD já é aplicado automaticamente por meio dessa plataforma definindo a branch de produção(**[feature/no-json-server](https://github.com/Aszurar/rocketshoes/tree/feature/no-json-server)**), sempre que houver uma atualização nela, será gerado uma nova versão do projeto e já publicado.\n- Além disso, podemos customizar o próprio endereço do site, adicionar ferramentas dentre outras funcionalidades facilmente.\n\n\u003cdiv align=\"center\"\u003e\n   \u003cimg src=\"https://i.imgur.com/tNtK2NE.png\" width=\"1000\" alt=\"Projeto publicado no Vercel\"\u003e\n\u003c/div\u003e\n\n---\n\n## :package: Como baixar e executar o projeto\n\n### Baixar\n\n- Clonar o projeto:\n\n  ```bash\n   git clone https://github.com/Aszurar/rocketshoes.git\n  ```\n\n- É necessário ter o Node.js e um gerenciador de pacotes, como o Yarn, instalados em seu sistema. Se você ainda não os tem, siga estas instruções:\n  - [Instalação do NodeJS](https://nodejs.org/en/)\n  - [Instalação do PNPM](https://pnpm.io/pt/)\n\n- Instalação das dependências:\n  - Execute o comando abaixo dentro da pasta do projeto\n\n    ```bash\n      pnpm i\n    ```\n\n- É necessário definir as variáveis de ambiente:\n  \n  ```bash\n      VITE_API_URL=\n      VITE_ENABLE_API_DELAY=\n  ```\n\n### Execução\n\n- Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:\n- Caso esteja na branch **[main](https://github.com/Aszurar/rocketshoes/tree/main)**\n  - Terminal 1: Executando front-end\n\n    ```bash\n      pnpm dev\n    ```\n\n  - Terminal 2: Executando servidor json\n\n    ```bash\n      pnpm dev:server\n    ```\n\n- Caso esteja na branch **[feature/no-json-server](https://github.com/Aszurar/rocketshoes/tree/feature/no-json-server)**:\n\n    ```bash\n      pnpm dev\n    ```\n\n\u003cdiv align=\"center\"\u003e\n\nDesenvolvido por :star2: Lucas de Lima Martins de Souza.\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faszurar%2Frocketshoes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faszurar%2Frocketshoes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faszurar%2Frocketshoes/lists"}