Loja Ortopédica é um protótipo de e-commerce desenvolvido para um desafio técnico com foco em responsividade, adaptação mobile, e fidelidade ao design fornecido no Figma.
O objetivo principal foi garantir uma boa experiência de navegação tanto em dispositivos desktop quanto em mobile, mesmo sem um layout mobile previamente definido. Todo o design para telas pequenas foi pensado e desenhado por mim, priorizando usabilidade e boas práticas de UX.
A versão mobile foi completamente projetada do zero, baseada em referências como o aplicativo da Amazon, além de rascunhos criados por mim no Excalidraw. Os principais pontos focados foram:
- Hierarquia clara de informações
- Tamanhos de fonte e espaçamento ajustados para leitura confortável
- Menu mobile acessível e funcional
- Layout fluido e adaptado para diferentes tamanhos de tela
- Elaborei um passo a passo de prioridades, com foco inicial total na versão mobile.
- Criei esboços visuais no Excalidraw para guiar o desenvolvimento mobile.
- Usei referências do mercado real para entregar algo coerente e funcional.
- React + Vite + TypeScript para estrutura e agilidade.
- Tailwind CSS com shadcn/ui para estilização moderna e acessível.
- Jotai para gerenciamento de estado simples e performático.
src/
├── common/ → Utilitários e recursos compartilhados entre várias partes do projeto
├── components/ → Componentes genéricos e reutilizáveis.
├── hooks/ → Hooks customizados de uso global ou compartilhado.
├── lib/ → Utilitários do Tailwind.
├── modules/ → Estrutura modular por página.
├── pages/ → Páginas do site.
├── store/ → Gerenciamento de estado global utilizando Jotai.- Clone o repositório:
git clone [email protected]:iigorfelipe/e-commerce.git- Instale as dependências:
cd e-commerce
npm install- Execute o projeto:
npm run dev- Observação: algumas funcionalidades, como os filtros, ainda não estão 100% concluídas. Foquei em entregar a base visual responsiva, conforme os requisitos.
Caso tivesse mais tempo, eu implementaria:
📈 Performance e UX
- Otimização de imagens (carregar versões menores para cards e maiores apenas em destaque)
- Skeletons
- Suspense boundaries com fallback de carregamento
- Lazy load inteligente por seção
- Modo dark
📦 Funcionalidades Avançadas
- Carrinho de compras
- Página completa de detalhes do produto
- Filtros funcionais
- Pesquisa por produtos
- Compartilhamento de produtos
- Download de catálogos
⚙️ Infraestrutura e Código
- Implementação com React Query para gerenciamento eficiente de cache
- Tela de Not Found e Error Boundary para tratamento de erros
- Internacionalização com i18n
- Tela de login e controle de vendedores
- Testes unitários
@Igor Soares
