https://github.com/aszurar/rocketshoes
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.
https://github.com/aszurar/rocketshoes
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
Last synced: about 2 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/aszurar/rocketshoes
- Owner: Aszurar
- Created: 2024-08-28T01:16:13.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-16T17:41:32.000Z (about 1 year ago)
- Last Synced: 2025-06-30T06:41:09.974Z (11 months ago)
- 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
- Language: TypeScript
- Homepage: https://rocketshoes-sand.vercel.app
- Size: 430 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# #11 - React: ****
**OBS**:
- Branch **[main](https://github.com/Aszurar/rocketshoes/tree/main)**:
- Usamos o **JSON-Server** para simular a API e assim consumir os dados a partir do arquivo **server.json**.
- Não é a branch usada para o deploy.
- Definimos a porta para consumir pela porta 3333, por meio do ```http://localhost:3333``` definido na variável de ambiente **```VITE_API_URL```**.
- Branch **[feature/no-json-server](https://github.com/Aszurar/rocketshoes/tree/feature/no-json-server)**:
- Consumimos diretamente o arquivo **server.json** passando o endereço dele na variável de ambiente **```VITE_API_URL```**
- Com isso, usamos essa branch para o **deploy** já que estamos o server.json diretamente.
- Aplicamos um delay no axios para simular a latência de uma API real por meio da variável ambiente **```VITE_ENABLE_API_DELAY```**.
## RocketShoes
1. 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.
2. O site foi publicado com CI/CD por meio da plataforma **[Vercel](https://vercel.com/)**.
3. Acesse e teste o projeto em: ****
[](https://vercel.com/aszurars-projects/rocketshoes) [](https://vitejs.dev/) [](https://www.cypress.io/) [](https://vitest.dev/) [](https://react.dev/) [](https://tailwindcss.com/) [](https://motion.dev/) [](https://redux.js.org/) [](https://tanstack.com/query/latest) [](https://tanstack.com/virtual/latest) [](https://tanstack.com/table/latest) [](https://axios-http.com/ptbr/) [](https://www.typescriptlang.org/) [](https://www.javascript.com/) [](https://developer.mozilla.org/pt-BR/docs/Web/HTML) [](https://www.w3schools.com/css/) [](https://pnpm.io/pt/)
---
**[Vídeo no Youtube](https://www.youtube.com/watch?v=gO87-UdwtRQ)**
---
## :information_source: Sobre
O 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.
- 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/)**.
- 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.
- 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.
- 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.
- O projeto é um desafio da trilha de **React** da **[Rocketseat](https://www.rocketseat.com.br/)**, sendo o 3º desafio dessa trilha.
### Tela inicial
---
## :interrobang: Motivo
- O objetivo do projeto é:
1. Praticar o uso do **Redux** para o **gerenciamento e manipulação do Estado** do carrinho
- 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.
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)**.
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.
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:
1. **``````** - Para renderização listagens organizadas em grid, **+ de 1 coluna**.
2. **``````** - Para renderização listagens organizadas em flex-col, **1 coluna**.
5. Usamos o **[React Router Dom](https://reactrouter.com/home)** para a navegação entre as páginas.
6. Usamos do **[Vitest](https://vitest.dev/)** para **testes unitários** nas funções de **manipulação** do Estado global no Redux.
7. Usarmos o **[Cypress](https://www.cypress.io/)** para realizar **testes(E2E)** e automatizá-los pelo **[GitHub Actions](https://github.com/features/actions)**.
8. Usamos o **[framer-motion](https://motion.dev/)** para implementação de animações de layouts básicas.
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)**.
10. Melhoramos o SEO do projeto com **[React-Helmet-Async](https://github.com/staylor/react-helmet-async#readme)**
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/)**.
### O que aprendi de novo?
1. Criação de **tabelas funcionais** com **[TanStack - Table](https://tanstack.com/table/latest)**
2. Criação de **listagens virtuais** com **[TanStack - React Virtual](https://tanstack.com/virtual/latest)**
3. Animações de **saída de layout** com **[framer-motion](https://motion.dev/)**
4. Animações só com **[TailwindCSS](https://tailwindcss.com/)**
5. Configuração do **[Cypress](https://www.cypress.io/)** para projetos Vite.
### Carrinho
_
_
---
## :art: Design
- Não temos um figma do design em si, mas é do desafio Rocketshoes da trilha React da Rocketseat
---
## :seedling: Requisitos Mínimos
1. NodeJS
2. ReactJS
3. Vite
4. PNPM
### Tela de Finalização
_
---
## :rocket: Tecnologias Utilizadas
- O projeto foi desenvolvido utilizando as seguintes tecnologias:
1. **[axios](https://axios-http.com/ptbr/docs/intro)**
2. **[axe-core/react](https://www.npmjs.com/package/@axe-core/react)**
3. **[Framer Motion](https://www.framer.com/motion/)**
4. **[JavaScript](https://developer.mozilla.org/pt1.BR/docs/Web/JavaScript)**
5. **[Json Server](https://github.com/typicode/json-server)**
6. **[NodeJS](https://nodejs.org/en/)**
7. **[Lucide Icons](https://phosphoricons.com/)**
8. **[Lottie Files](https://lottiefiles.com/)**
9. **[React](https://pt1.br.react.dev/)**
10. **[React Helmet Async](https://github.com/staylor/react-helmet-async#readme)**
11. **[React Router Dom](https://reactrouter.com/web/guides/quick-start)**
12. **[React Redux](https://react-redux.js.org/)**
13. **[Redux Toolkit](https://redux-toolkit.js.org/)**
14. **[React Toastify](https://fkhadra.github.io/react-toastify/introduction)**
15. **[TailwindCSS](https://tailwindcss.com/)**
16. **[TanStack Query](https://tanstack.com/query/latest)**
17. **[TanStack Table](https://tanstack.com/table/latest)**
18. **[TanStack Virtual](https://tanstack.com/virtual/latest)**
19. **[TypeScript](https://www.typescriptlang.org/)**
20. **[Vercel](https://vercel.com/)**
21. **[Vite](https://vitejs.dev/)**
22. **[Vitest](https://vitest.dev/)**
23. **[zod](https://zod.dev/)**
### Responsividade
_
_
_
_
_
_
---
## :truck: Entrega e distribuição continua
****
- 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.
- 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.
- Além disso, podemos customizar o próprio endereço do site, adicionar ferramentas dentre outras funcionalidades facilmente.
---
## :package: Como baixar e executar o projeto
### Baixar
- Clonar o projeto:
```bash
git clone https://github.com/Aszurar/rocketshoes.git
```
- É 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:
- [Instalação do NodeJS](https://nodejs.org/en/)
- [Instalação do PNPM](https://pnpm.io/pt/)
- Instalação das dependências:
- Execute o comando abaixo dentro da pasta do projeto
```bash
pnpm i
```
- É necessário definir as variáveis de ambiente:
```bash
VITE_API_URL=
VITE_ENABLE_API_DELAY=
```
### Execução
- Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:
- Caso esteja na branch **[main](https://github.com/Aszurar/rocketshoes/tree/main)**
- Terminal 1: Executando front-end
```bash
pnpm dev
```
- Terminal 2: Executando servidor json
```bash
pnpm dev:server
```
- Caso esteja na branch **[feature/no-json-server](https://github.com/Aszurar/rocketshoes/tree/feature/no-json-server)**:
```bash
pnpm dev
```
Desenvolvido por :star2: Lucas de Lima Martins de Souza.