🐾 Pet-4-You Frontend

📋 Sobre o Projeto

Pet-4-You é uma plataforma web moderna e responsiva que conecta pessoas que desejam adotar animais de estimação com aqueles que precisam encontrar um novo lar para seus pets. O frontend foi desenvolvido com foco na experiência do usuário, oferecendo uma interface intuitiva e acessível para facilitar o processo de adoção responsável.

🎯 O que o projeto faz

Interface de Usuário Moderna: Design responsivo e intuitivo para todos os dispositivos
Sistema de Autenticação: Login e registro seguros com gerenciamento de sessão
Catálogo de Pets: Visualização de pets disponíveis com filtros avançados
Perfil do Usuário: Gerenciamento completo de dados pessoais e preferências
Gestão de Pets: Interface para cadastro, edição e gerenciamento de pets
Sistema Admin: Painel administrativo para aprovação e moderação de conteúdo
Upload de Fotos: Interface drag-and-drop para upload de múltiplas fotos
Notificações: Sistema de feedback em tempo real para ações do usuário

💡 Por que foi construído

Este projeto frontend complementa a API Pet-4-You, nascendo da necessidade de criar uma interface acessível e moderna que torne o processo de adoção mais humano e eficiente. Os principais objetivos incluem:

Facilitar o acesso: Interface intuitiva para usuários de todas as idades
Responsividade: Funciona perfeitamente em celulares, tablets e desktops
Experiência visual: Design atrativo que incentiva a adoção responsável
Acessibilidade: Componentes otimizados para diferentes necessidades
Performance: Carregamento rápido e navegação fluida

🚀 Tecnologias Utilizadas

Frontend Core

Vue 3 - Framework JavaScript progressivo
Quasar Framework - Framework Vue.js multiplataforma
TypeScript - Superset tipado do JavaScript
Vite - Build tool rápido e moderno

UI/UX & Styling

Tailwind CSS - Framework CSS utility-first
Quasar Components - Componentes UI prontos
Material Design Icons - Ícones consistentes e modernos

Estado & Roteamento

Pinia - Store de estado para Vue 3
Vue Router - Roteador oficial do Vue.js

Requisições & Comunicação

Axios - Cliente HTTP para requisições
JWT Authentication - Autenticação com tokens

Desenvolvimento & Qualidade

ESLint - Linter para JavaScript/TypeScript
Prettier - Formatador de código
Composition API - API moderna do Vue 3

🏗️ Arquitetura do Sistema

src/
├── components/          # Componentes reutilizáveis
│   ├── modals/         # Modais específicos
│   ├── cards/          # Cards de exibição
│   └── forms/          # Componentes de formulário
├── layouts/            # Layouts da aplicação
│   └── MainLayout.vue  # Layout principal
├── pages/              # Páginas da aplicação
│   ├── auth/          # Páginas de autenticação
│   ├── pets/          # Páginas relacionadas a pets
│   └── admin/         # Páginas administrativas
├── stores/             # Stores do Pinia
│   ├── auth.ts        # Store de autenticação
│   ├── pets.ts        # Store de pets
│   └── user.ts        # Store do usuário
├── types/              # Definições de tipos TypeScript
│   ├── pet.ts         # Tipos relacionados a pets
│   └── user.ts        # Tipos de usuário
├── utils/              # Utilitários e helpers
│   ├── api.ts         # Configurações da API
│   ├── validation.ts  # Validações de formulário
│   └── formatting.ts  # Formatação de dados
└── router/             # Configuração de rotas
    ├── index.ts       # Configuração principal
    └── routes.ts      # Definição das rotas

📚 Funcionalidades

🎨 Interface do Usuário

Design Responsivo: Adaptado para mobile, tablet e desktop
Tema Personalizado: Cores e estilos consistentes da marca Pet4You
Navegação Intuitiva: Menu e breadcrumbs para fácil orientação
Loading States: Feedback visual durante carregamentos

🔐 Autenticação & Autorização

Login/Registro: Interface moderna com validação em tempo real
Gerenciamento de Sessão: Tokens JWT com renovação automática
Níveis de Acesso: Interface diferenciada para usuários e admins
Perfil do Usuário: Edição completa de dados pessoais

🐕 Catálogo de Pets

Galeria Visual: Cards atraentes com fotos dos pets
Filtros Avançados: Por espécie, porte, idade, localização
Detalhes Completos: Página dedicada para cada pet
Sistema de Busca: Pesquisa rápida por nome ou características

📝 Gerenciamento de Pets

Formulário Intuitivo: Interface step-by-step para cadastro
Upload de Fotos: Drag-and-drop com preview das imagens
Edição Fácil: Modificação rápida de informações
Status de Publicação: Acompanhamento do status de aprovação

👨‍💼 Painel Administrativo

Dashboard Completo: Visão geral de pets e usuários
Moderação de Conteúdo: Aprovação/rejeição de pets
Gestão de Usuários: Controle de acessos e permissões
Relatórios: Estatísticas de uso da plataforma

⚙️ Como Instalar e Rodar

Pré-requisitos

Node.js (versão 16 ou superior)
npm ou yarn
Git
API Pet-4-You rodando (backend)

1. Clone o repositório

git clone https://github.com/hederdavid/pet-4-you-frontend.git
cd pet-4-you-frontend

2. Instale as dependências

npm install
# ou
yarn install

3. Configure as variáveis de ambiente

Crie um arquivo .env na raiz do projeto:

# API Configuration
VITE_API_BASE_URL=http://localhost:3000/api
VITE_API_TIMEOUT=10000

# Application
VITE_APP_TITLE="Pet4You - Adoção Responsável"
VITE_APP_DESCRIPTION="Plataforma para adoção de pets"

# Features
VITE_ENABLE_REGISTRATION=true
VITE_ENABLE_SOCIAL_LOGIN=false

4. Inicie o servidor de desenvolvimento

# Modo desenvolvimento (hot-reload)
npm run dev
# ou
yarn dev

# Modo desenvolvimento com preview
npm run preview
# ou
yarn preview

A aplicação estará disponível em http://localhost:9000

5. Build para produção

npm run build
# ou
yarn build

📱 Funcionalidades por Dispositivo

📱 Mobile

Menu Hamburger: Navegação otimizada para toque
Cards Responsivos: Layout adaptado para telas pequenas
Formulários Touch-friendly: Campos otimizados para dispositivos móveis
Imagens Otimizadas: Carregamento eficiente de fotos

💻 Desktop

Layout Expandido: Aproveitamento total do espaço da tela
Sidebar Fixa: Navegação sempre visível
Multi-column: Exibição de múltiplas colunas de conteúdo
Hover Effects: Interações visuais aprimoradas

📊 Tablet

Layout Híbrido: Combinação das melhores características mobile/desktop
Navegação Adaptativa: Menu que se ajusta ao tamanho da tela
Grid Responsivo: Otimização automática de layouts

🧪 Scripts Disponíveis

# Desenvolvimento
npm run dev              # Inicia servidor de desenvolvimento
npm run preview          # Preview da build de produção

# Build e Deploy
npm run build            # Build para produção
npm run build:pwa        # Build com PWA habilitado

# Qualidade de Código
npm run lint             # Executa o linter
npm run format           # Formata o código com Prettier
npm run type-check       # Verificação de tipos TypeScript

# Testes (quando implementados)
npm run test:unit        # Testes unitários
npm run test:e2e         # Testes end-to-end
npm run test:coverage    # Coverage dos testes

🎨 Guia de Estilo

Cores da Marca

/* Cores Primárias */
--primary: #1976d2 /* Azul Pet4You */ --secondary: #9c27b0 /* Roxo */ --accent: #ff6b35
  /* Laranja */ /* Cores de Estado */ --positive: #21ba45 /* Verde - Sucesso */ --negative: #c10015
  /* Vermelho - Erro */ --warning: #f2c037 /* Amarelo - Aviso */ --info: #31ccec
  /* Azul Claro - Informação */;

Tipografia

Fonte Principal: Roboto (incluída no Quasar)
Tamanhos: Sistema de escala responsiva
Pesos: 300 (Light), 400 (Regular), 500 (Medium), 700 (Bold)

Componentes

Bordas: Radius padrão de 12px para suavidade
Sombras: Elevação sutil para profundidade
Animações: Transições suaves de 300ms

🔧 Configuração Avançada

Personalização do Quasar

// quasar.config.js
module.exports = {
  framework: {
    config: {
      brand: {
        primary: '#1976D2',
        secondary: '#9C27B0',
        accent: '#FF6B35',
      },
    },
  },
};

Configuração do Tailwind

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        'pet-blue': '#1976D2',
        'pet-orange': '#FF6B35',
      },
    },
  },
};

🚀 Deploy

Netlify (Recomendado)

# Build
npm run build

# Deploy manual
netlify deploy --prod --dir=dist/spa

Vercel

npm run build
vercel --prod

Servidor Próprio

# Build
npm run build

# Servir arquivos estáticos da pasta dist/spa

🤝 Contribuição

Contribuições são muito bem-vindas! Para contribuir:

Fork o projeto
Clone seu fork localmente
Crie uma branch para sua feature
```
git checkout -b feature/MinhaFeature
```
Desenvolva e teste suas alterações

Commit suas mudanças

git commit -m 'feat: adiciona MinhaFeature'

Push para sua branch
```
git push origin feature/MinhaFeature
```
Abra um Pull Request

Padrões de Código

Use Composition API para novos componentes
Mantenha TypeScript strict ativado
Siga as convenções do Vue.js Style Guide
Escreva commits semânticos

📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

👨‍💻 Autor

Heder David

Portfolio: heder.tech
GitHub: @hederdavid
LinkedIn: Heder David

🔗 Links Relacionados

Backend: Pet-4-You API
Documentação da API: Em desenvolvimento
Deploy de Demonstração: https://pet-4-you-frontend.vercel.app/

Feito com ❤️ e 🐾 por Heder David

"Tecnologia a serviço do amor aos animais"

Name		Name	Last commit message	Last commit date
Latest commit History 34 Commits
.vscode		.vscode
public		public
src		src
.editorconfig		.editorconfig
.env.example		.env.example
.gitignore		.gitignore
.npmrc		.npmrc
.prettierrc.json		.prettierrc.json
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
quasar.config.ts		quasar.config.ts
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
vercel.json		vercel.json

hederdavid/pet-4-you-frontend

Folders and files

Latest commit

History

Repository files navigation