🛒 GilStore: Quando o código encontra a empatia – Minha jornada criando um E-commerce Inclusivo

Sempre acreditei que a tecnologia deve ser uma ponte, e não um muro. Quando decidi migrar para a área de tecnologia e criar projetos para compor meu portfólio, eu sabia que não queria apenas replicar um tutorial ou entregar "mais do mesmo". Eu queria construir algo que refletisse quem eu sou como desenvolvedor e como ser humano.

Assim nasceu a GilStore.

A premissa era técnica: criar uma Single Page Application (SPA) funcional. Mas a missão pessoal era maior: garantir que ninguém ficasse de fora da experiência. O intuito principal era aprofundar os estudos em lógica de programação, mas sem perder a sensibilidade.

O Desafio Além da Tela

Muitas vezes, quando estudamos Front-End, focamos muito no visual, nas cores, nas animações, no layout perfeito. Mas e a pessoa que não usa mouse? E quem depende de leitores de tela?

Durante o desenvolvimento deste projeto acadêmico, decidi que a acessibilidade não seria um "bônus" ou uma tarefa para depois. Ela foi o ponto de partida. Tive o cuidado de garantir que cada componente, do botão de "Comprar" ao modal de confirmação, fosse pensado para ser navegado apenas com o teclado, respeitando a semântica e a dignidade do usuário. Afinal, é assim que todos os projetos deveriam ser.

Lógica de Negócio e o "Backend" Invisível

Outro ponto crucial desse laboratório foi entender que o Front-End moderno carrega muita responsabilidade. Não se trata apenas de "pintar telas".

Para simular um ambiente real, precisei mergulhar na lógica de Backend. Utilizando mocks e APIs, simulei o comportamento de um banco de dados. Gerenciar o estado do carrinho, persistir dados no navegador e fazer o controle de estoque em tempo real (mesmo que simulado) me ensinou lições valiosas sobre como tratar dados e prever erros antes que eles cheguem ao usuário.

Um Laboratório de Aprendizado

É importante ressaltar: a GilStore é um projeto educativo e sem fins lucrativos. É uma loja fictícia, criada com o objetivo acadêmico de treinar boas práticas, arquitetura de software e, acima de tudo, inclusão digital.

Foi uma jornada intensa de erros, acertos e muita documentação (que, aliás, considero tão importante quanto o código).

Se você quer entender como traduzi essa filosofia em linhas de código, convido você a explorar os detalhes técnicos do projeto abaixo. Espero que a GilStore inspire você a olhar para o seu próximo projeto não apenas como um sistema, mas como uma ferramenta de inclusão.

🛠️ Detalhes do Projeto e Documentação Técnica:

GilStore é um projeto completo de e-commerce desenvolvido como SPA (Single Page Application) com React e TypeScript, focado em performance, acessibilidade e experiência do usuário. O sistema simula uma loja virtual moderna, com catálogo dinâmico, filtros avançados, carrinho de compras, wishlist, histórico de pedidos, internacionalização (EN/PT), PWA instalável e responsivo, além de testes automatizados e arquitetura escalável. Toda a API utilizada é fake (Fake Store API) e o backend é totalmente mockado, ou seja, não há persistência real de dados nem integração com servidores — todas as operações de produtos, carrinho e pedidos são simuladas no front-end, usando mocks e armazenamento local. O objetivo é demonstrar domínio em front-end profissional, boas práticas de código, integração contínua, deploy automatizado e recursos avançados de acessibilidade, servindo como portfólio e referência para desenvolvedores.

⚙️ Pré-requisitos

Node.js (v18 ou superior recomendado)
npm ou yarn

💻 Instalação e Execução Local

Clone o repositório:

git clone https://github.com/MarcioGil/GilStore.git
cd GilStore

Instale as dependências:

npm install
# ou


1. Clone o repositório:

 ```bash
 git clone https://github.com/MarcioGil/GilStore.git
 cd GilStore

Instale as dependências:

npm install
# ou
yarn install

Rode o projeto em modo desenvolvimento:

npm run dev
# ou
yarn dev

Acesse em http://localhost:5173

🧪 Testes Automatizados

Cobertura de componentes principais e fluxos críticos
Testes de integração simulando compra completa
Executar: npm test

📦 Dependências Principais

React: Biblioteca para construção de interfaces.
TypeScript: Tipagem estática para JavaScript.
TailwindCSS: Utilitários CSS para estilização rápida.
Jest & React Testing Library: Testes automatizados.
Vite: Bundler e servidor de desenvolvimento rápido.
gh-pages: Deploy automatizado no GitHub Pages.

🏗️ Arquitetura e Tecnologias

src/
├── components/   # Componentes reutilizáveis
├── context/      # Estado global (Context API)
├── pages/        # Rotas (Home, Checkout, etc.)
├── services/     # Integração com API
├── assets/       # Imagens e estáticos
└── __tests__/    # Testes unitários e integração

Veja o diagrama de arquitetura em docs/ARQUITETURA.md.

♿ Acessibilidade

A GilStore foi projetada para ser totalmente acessível, seguindo as melhores práticas e recomendações das diretrizes WCAG:

Navegação por teclado: Todos os fluxos podem ser realizados sem mouse, com foco visível, atalhos e traps em modais.
Semântica e ARIA: Uso correto de HTML5, landmarks, roles e atributos ARIA para leitores de tela.
Feedback visual e auditivo: Mensagens de loading, erro e sucesso são perceptíveis para todos os usuários.
Modais acessíveis: Fechamento por ESC, overlay clicável, foco inicial e retorno ao elemento de origem.
Contraste e responsividade: Cores e tamanhos respeitam padrões de contraste e adaptação a diferentes dispositivos.

Ferramentas utilizadas para validação:

Lighthouse (Google Chrome)
axe DevTools
NVDA (leitor de tela)
Testes manuais com navegação por teclado

📱 Instruções de Uso do PWA

O GilStore pode ser instalado como aplicativo em dispositivos móveis e desktops, oferecendo experiência offline e integração nativa:

Acesse o site em produção: https://marciogil.github.io/GilStore
No navegador (Chrome, Edge, etc.), clique no ícone de instalação na barra de endereços ou abra o menu e selecione "Instalar GilStore".
No mobile, utilize a opção "Adicionar à tela inicial".
Após instalado, utilize o app normalmente, inclusive offline (catálogo e carrinho persistem).

Funcionalidades PWA:

Instalação em qualquer dispositivo
Funcionamento offline (cache inteligente)
Ícone e splash personalizados
Atualização automática em segundo plano

🚀 CI/CD & Demonstração

Integração contínua via GitHub Actions: pipeline automatizado para lint, testes e build a cada push ou pull request na branch principal. O status do build pode ser acompanhado pelo badge no topo deste README.

Deploy automático no GitHub Pages:

Site em produção: https://marciogil.github.io/GilStore

🚀 Deploy para Produção

Configure o campo homepage no package.json:

"homepage": "https://MarcioGil.github.io/GilStore"

Instale o gh-pages:

npm install --save gh-pages

Adicione o script de deploy:

"scripts": {
"deploy": "gh-pages -d build"
}

Execute:

npm run deploy

🤝 Como Contribuir

Faça um fork do projeto
Crie uma branch: git checkout -b minha-feature
Faça suas alterações
Envie um pull request

Regras:

Teste antes de enviar PR
Respeite a licença e o código de conduta

📄 Licença

Distribuído sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

⚠️ Aviso de Segurança

Este projeto é para fins de estudo e portfólio. Não possui autenticação, autorização ou proteção contra ataques. Não use em produção sem adaptações de segurança.

👤 Autor

Olá! Eu sou Márcio Gil, Embaixador DIO Campus Expert, estudante de Engenharia de Software, entusiasta de Educação, Inovação, Tecnologia e defensor da Justiça Social.

Projeto desenvolvido para portfólio, estudos e colaboração aberta.