Sniff 🐶

Sniff é um aplicativo mobile moderno construído com React Native e Expo que permite aos usuários explorar diferentes raças de cães, visualizar detalhes, buscar por raças específicas e salvar suas favoritas. O app utiliza a TheDogAPI para obter os dados e oferece uma experiência de usuário fluida com uma interface polida.

✨ Funcionalidades

• 🐕 Exploração de Raças: Navegue por uma vasta lista de raças de cães com rolagem infinita.
• 🔍 Busca: Encontre rapidamente raças específicas pelo nome.
• ❤️ Favoritos: Salve suas raças favoritas e acesse-as em uma aba dedicada (persistido localmente).
• 📱 Design Responsivo: Otimizado para dispositivos iOS e Android.
• 🎨 Interface Moderna: Construído com um sistema de design consistente usando Shopify Restyle e suporte a Temas (Claro/Escuro).

🛠 Tech Stack

• Core: React Native com Expo
• Linguagem: TypeScript
• Navegação: Expo Router
• Gerenciamento de Estado: Zustand
• Data Fetching & Cache: TanStack Query (React Query)
• Estilização: Shopify Restyle
• Requisições HTTP: Axios

🚀 Começando

Siga estes passos para configurar e rodar o projeto localmente.

Pré-requisitos

Certifique-se de ter instalado em sua máquina:

• Node.js (versão LTS recomendada)
• npm ou yarn
• App Expo Go no seu dispositivo físico, ou um Emulador Android / Simulador iOS.

Instalação

1. Clone o repositório:

   git clone https://github.com/ChagasDanilo/sniff.git
   cd sniff

2. Instale as dependências:

   npm install
   # ou
   yarn install

Rodando o App

Inicie o servidor de desenvolvimento:

npx expo start

Uma vez que o servidor esteja rodando:

• Dispositivo Físico: Escaneie o QR code que aparece no terminal usando o app Expo Go (Android) ou Câmera (iOS).
• Emulador Android: Pressione a no terminal.
• Simulador iOS: Pressione i no terminal (apenas macOS).
• Web: Pressione w no terminal.

📂 Estrutura do Projeto

Uma visão rápida dos principais arquivos e diretórios em src/:

sniff/
├── app/                 # Páginas e estrutura de navegação do Expo Router
├── assets/              # Assets estáticos como imagens e fontes
├── src/
│   ├── api/             # Configuração do cliente HTTP (Axios)
│   ├── assets/          # Imagens, ícones e recursos locais
│   ├── components/      # Componentes de UI reutilizáveis (Botões, Cards, Inputs)
│   ├── domain/          # Lógica de negócio e serviços (Pattern Service/UseCase)
│   ├── hooks/           # Hooks customizados do React
│   ├── infra/           # Camada de infraestrutura, tipos e mappers
│   ├── models/          # Definições de tipos e interfaces de dados
│   ├── routes/          # Configurações de rotas (se aplicável fora do app/)
│   ├── screens/         # Telas e lógica específica de visualização (MVVM)
│   ├── store/           # Stores de estado global (Zustand)
│   └── styles/          # Definições de tema e configuração do Restyle
├── .eslintrc.js         # Configuração do Linter
├── babel.config.js      # Configuração do Babel
├── package.json         # Dependências e scripts do projeto
└── tsconfig.json        # Configuração do TypeScript

Feito por Danilo Chagas