williamjayjay/ecommerce-nike-stripe-redux-react-native

Usando Redux Toolkit para gerenciamento de estado global e Stripe para processamento de pagamentos, este aplicativo permite buscar tênis de uma API mockada, exibi-los em uma lista e visualizar os detalhes de cada modelo em uma tela dedicada.

E-Nike Mobile React Native (redux + stripe)

Este aplicativo tem como principais funcionalidades a busca de dados de tênis a partir de uma API mockada, a exibição em uma lista, a apresentação dos detalhes de cada tênis em uma tela dinâmica, o controle do estado global utilizando Redux toolkit e a implementação do gateway de pagamentos da Stripe para possibilitar compras diretamente pelo app.

🥶 Sobre o projeto

Desenvolvi esse projeto para como forma de reforçar o conhecimento com Redux e gateway de pagamentos STRIPE.

Mobile React Native:

Aplicativo: O app irá exibir uma lista de tênis e também deverá ser possível realizar pagamentos com cartão pelo gateway de pagamentos da stripe.

🚀 Tecnologias

Principais tecnologias que utilizei para desenvolver esta aplicação

• Typescript
• React-Navigation
• Expo-Font
• NativeWind
• TailwindCSS
• React-Native-Toast-Message
• Classnames
• React-Native-Safe-Area-Context
• Redux Toolkit
• Stripe RN

Guia de inicialização

Para instalar e configurar uma cópia local, siga estas etapas simples:

Prerequisitos

Para garantir o funcionamento adequado da nossa aplicação, verifique abaixo:

1. Clone o repositório:

git clone https://github.com/williamjayjay/ecommerce-nike-stripe-redux-react-native

2. Navegue na raiz do projeto ecommerce-nike-stripe-redux-react-native:

3. Instale os módulos:

bun i

4. Copie o .env de exemplo:

5. Passe as url e credênciais correspondentes no arquivo .env

6. Rode o aplicativo:

bun android

Roadmap

• Iniciar o aplicativo, entrar na tela com listagem dos tênis nike.

• Na tela de ordem de compras deve exibir os pedidos realizados.

• Ao clicar em um tênis deve levar para tela de detalhes do tênis.

• Ao clicar em adicionar deve adicionar ao carrinho.

• Deve exibir toast notification ao adicionar ao carrinho.

• Na tela do carrinho deve exibir os produtos adicionados.

• Deve exibir toast notification ao remover o último produto do carrinho.

• Quando clicar em finalizar, deve abrir o modal checkout da stripe.

• Ao preencher corretamente os dados, deve ser possível realizar o pagamento do produto.

Tela Produtos	Tela Detalhes

Tela Ordem de Compra	Tela Carrinho

Tela Checkout Stripe