#11 - React: https://rocketshoes-aszurar.vercel.app
OBS:
- Branch 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:3333definido na variável de ambienteVITE_API_URL.
- Branch 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.
- Consumimos diretamente o arquivo server.json passando o endereço dele na variável de ambiente
- 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.
- O site foi publicado com CI/CD por meio da plataforma Vercel.
- Acesse e teste o projeto em: https://rocketshoes-aszurar.vercel.app
Sobre | Motivo | Design | Requisitos | Tecnologias | CI/CD | Baixar e Executar
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 com o Redux Toolkit e React Redux.
-
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 para o consumo de dados e o TanStack - Table para a criação da tabela produtos no carrinho.
-
A acessibilidade foi levada em consideração, com o uso da lib axe-core para testes e correções, assim como leitor de tela ChromeVox.
-
O projeto é um desafio da trilha de React da Rocketseat, sendo o 3º desafio dessa trilha.
-
O objetivo do projeto é:
- Praticar o uso do Redux para o gerenciamento e manipulação do Estado do carrinho
- Usamos o Redux Toolkit em conjunto com o React Redux implementação do reducer e actions do carrinho.
- Usamos o TanStack Query para o consumo de dados e otimização com gerenciamento de cache em conjunto com axios.
- Usamos o TanStack - Table 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.
- Usamos o TanStack - React Virtual para otimização de listagens e criamos 2 componentes agnósticos de virtualização de listagens:
<VirtualizedGridList/>- Para renderização listagens organizadas em grid, + de 1 coluna.<VirtualizedList/>- Para renderização listagens organizadas em flex-col, 1 coluna.
- Usamos o React Router Dom para a navegação entre as páginas.
- Usamos do Vitest para testes unitários nas funções de manipulação do Estado global no Redux.
- Usarmos o Cypress para realizar testes(E2E) e automatizá-los pelo GitHub Actions.
- Usamos o framer-motion para implementação de animações de layouts básicas.
- Criamos a interface com shadcn/ui e tailwindcss e usamos tailwind-merge em conjunto com clsx e tailwindcss-animate.
- Melhoramos o SEO do projeto com React-Helmet-Async
- Melhoras a acessibilidade usando o @axe-core/react para revisar os elementos e componentes com as diretrizes de acessibilidade estabelecidas no WCAG estabelecidas pelo W3C.
- Praticar o uso do Redux para o gerenciamento e manipulação do Estado do carrinho
- Criação de tabelas com TanStack - Table
- Criação de listagens virtuais com TanStack - React Virtual
- Animações de saída de layout com framer-motion
_
_
- Não temos um figma do design em si, mas é do desafio Rocketshoes da trilha React da Rocketseat
- NodeJS
- ReactJS
- Vite
- PNPM
-
O projeto foi desenvolvido utilizando as seguintes tecnologias:
_
https://rocketshoes-sand.vercel.app
- Para a publicação da aplicação foi por meio da plataforma Vercel 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), 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.
-
Clonar o projeto:
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 das dependências:
-
Execute o comando abaixo dentro da pasta do projeto
pnpm i
-
-
É necessário definir as variáveis de ambiente:
VITE_API_URL= VITE_ENABLE_API_DELAY=
-
Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:
-
Caso esteja na branch main
-
Terminal 1: Executando front-end
pnpm dev
-
Terminal 2: Executando servidor json
pnpm dev:server
-
-
Caso esteja na branch feature/no-json-server:
pnpm dev
Desenvolvido por 🌟 Lucas de Lima Martins de Souza.