StartSelect Store

This README is also available in English.

Uma loja digital de jogos desenvolvida com React e TypeScript, que se integra a minha API customizada mantida por mim utilizando RTK Query. Oferece uma experiência completa de compra e finalização de pedido, com design responsivo, validação de formulários, máscaras de entrada e boas práticas de acessibilidade. A API agora suporta o retorno de um jogo em destaque aleatório e busca de detalhes de jogos por ID.

🛍️ Visão Geral do Projeto

A StartSelect Store permite que os usuários naveguem e comprem jogos digitais. Os principais recursos incluem:

Lista dinâmica de jogos obtida da minha API customizada usando RTK Query;
Jogo em destaque retornado aleatoriamente a cada carregamento (IDs 2, 5, 12 e 14);
Detalhes de jogos acessíveis via endpoint jogos/{id} para IDs de 1 a 19;
Páginas de produto com descrições detalhadas e imagens;
Gerenciamento do carrinho com funcionalidades de adicionar/remover itens;
Checkout em múltiplas etapas com validação usando Formik e Yup;
Máscaras de entrada para formatação de CPF e cartão de crédito;
Indicadores de carregamento com react-spinners;
Design responsivo e mobile-first;
Estrutura HTML acessível e semântica.

🌐 Endpoint da API

Todos os dados são obtidos da minha API customizada do StartSelect:

https://start-select-api.vercel.app/

🚀 Tecnologias Utilizadas

React
TypeScript
Styled Components
React Router DOM
RTK Query
Formik + Yup
React Input Mask
React Spinners

🧪 Como Executar o Projeto

Clone o repositório:

git clone https://github.com/AsrielDreemurrGM/StartSelect_Store.git

Instale as dependências:
```
npm install
```
ou
```
yarn install
```
Inicie o servidor de desenvolvimento:
```
npm run dev
```
ou
```
yarn dev
```

🔗 Demonstração Online

Você pode acessar a versão publicada do projeto aqui:
https://start-select-store.vercel.app

📂 Estrutura de Pastas


src/
├── components/        # Componentes reutilizáveis de UI
├── pages/             # Componentes de página para roteamento
├── services/          # Slices da API com RTK Query
├── styles/            # Estilos globais e tema
├── utils/             # Funções auxiliares e máscaras
├── types/             # Definições de tipos TypeScript
└── App.tsx            # Estrutura principal da aplicação

📝 Observações

A página de checkout não realiza pagamentos reais, é apenas uma simulação;
As chamadas de API agora utilizam minha API customizada com arquivos JSON estáticos e lógica dinâmica para jogos em destaque.

📌 Destaques dos Commits

Página de Checkout – Adicionadas validações, máscaras de entrada e renderização dinâmica do resumo do carrinho;
Gerenciamento do Carrinho – Lógica de adicionar/remover itens e controle de quantidade implementados;
Listagem de Produtos – Integração com RTK Query para buscar e exibir produtos da minha API customizada;
Carregamento e Feedback – Indicadores de loading e UI de fallback em caso de erro adicionados.

FilesExpand file tree

README.pt-br.md

Latest commit

History