Uma plataforma de rede social baseada em React dedicada aos cachorros, onde usuários podem compartilhar fotos, interagir com publicações e gerenciar perfis de seus pets.
Criação de uma plataforma envolvente para amantes de cães compartilharem momentos especiais de seus pets e interagirem com outros tutores.
Desenvolver um espaço social dedicado exclusivamente aos cachorros, onde a comunidade canina possa se conectar, compartilhar experiências e celebrar seus melhores amigos de quatro patas.
- Implementação de sistema completo de autenticação de usuários
- Desenvolvimento de funcionalidade de upload de fotos com metadados
- Criação de um sistema de feed interativo e responsivo
- Gerenciamento de estado global com Context API
- Arquitetura de componentes React escalável e modular
- Implementação de custom hooks reutilizáveis
- Padrões de design responsivo com CSS Modules
- Gerenciamento de rotas protegidas e fluxo de autenticação
- Fluxo completo de login e cadastro
- Recuperação de senha
- Rotas protegidas para usuários autenticados
- Persistência de sessão
- Feed interativo de fotos de cachorros
- Visualização detalhada em modal
- Sistema de comentários
- Upload de fotos com metadados (nome, peso, idade)
- Curtidas e interações
- Estatísticas pessoais de visualizações
- Gerenciamento de fotos publicadas
- Customização de perfil
- Histórico de postagens
O projeto segue uma arquitetura React moderna e modular, organizada da seguinte forma:
Organização por Features
Componentes modulares organizados por funcionalidade, facilitando manutenção e escalabilidade. Cada feature possui seus próprios componentes, estilos e lógica de negócio encapsulada.
Componentes Compartilhados
Elementos reutilizáveis localizados nos diretórios Forms/ e Helper/, incluindo inputs, botões, loading states e componentes auxiliares que são utilizados em toda a aplicação.
Gerenciamento de Estado
Utilização do Context API através do UserContext para gerenciar estado global de autenticação, eliminando prop drilling e centralizando a lógica de usuário.
useFetch
Hook customizado para gerenciar requisições à API, encapsulando lógica de loading, error handling e data fetching de forma reutilizável.
useForm
Gerenciamento de estado de formulários com validação integrada, reduzindo código repetitivo e garantindo consistência na validação de inputs.
useMedia
Hook para implementar media queries de forma reativa, permitindo comportamentos diferentes baseados no tamanho da tela do usuário.
CSS Modules
Cada componente possui seu próprio arquivo CSS Module, garantindo escopo isolado de estilos e evitando conflitos de classes CSS.
Design Responsivo
Padrões de design responsivo implementados com mobile-first approach, garantindo boa experiência em todos os dispositivos.
React
Biblioteca JavaScript escolhida por sua eficiência na criação de interfaces dinâmicas e reutilizáveis. O modelo de componentes do React permite construir uma aplicação escalável e de fácil manutenção.
Vite
Ferramenta de build moderna que oferece desenvolvimento extremamente rápido com Hot Module Replacement (HMR) instantâneo, melhorando significativamente a experiência de desenvolvimento.
CSS Modules
Sistema de estilização que garante encapsulamento de estilos por componente, evitando conflitos de CSS e facilitando a manutenção de estilos em aplicações grandes.
Context API
Solução nativa do React para gerenciamento de estado global, ideal para compartilhar dados de autenticação e usuário entre componentes sem prop drilling.
- Node.js (versão 14 ou superior)
- npm ou yarn
- Clone o repositório
git clone <url-do-repositório>
cd dogs- Instale as dependências
npm install
# ou
yarn install- Inicie o servidor de desenvolvimento
npm run dev
# ou
yarn dev- Acesse a aplicação em
http://localhost:5173
npm run build
# ou
yarn build