Dogs 🐶

Plataforma frontend para compartilhamento de fotos de cães, com autenticação, feed público, postagem de imagens, comentários e estatísticas de uso.

---

📸 Preview do Projeto

🛠 Tecnologias Utilizadas

Tecnologia	Uso no projeto
React 19	Construção da interface com componentes e hooks
Vite	Ambiente de desenvolvimento e build
React Router DOM	Rotas públicas, privadas e navegação
Victory	Visualização das estatísticas
Vite Plugin SVGR	Importação de SVGs como componentes React
CSS Modules	Estilização modular e isolada por componente
PropTypes	Validação de props em componentes
Fetch API	Comunicação com a API do backend

Badges

---

✨ Funcionalidades

• Cadastro de usuário.
• Login com autenticação via JWT.
• Logout com limpeza de sessão local.
• Login automático com token salvo no localStorage.
• Recuperação e redefinição de senha.
• Feed público de fotos.
• Scroll infinito no feed.
• Visualização detalhada de fotos.
• Comentários em fotos.
• Upload de novas fotos na área logada.
• Exclusão de fotos do próprio usuário.
• Página de perfil por usuário.
• Página de estatísticas com gráficos.
• Rotas protegidas para área autenticada.
• Estados de carregamento e tratamento de erro.

---

🧭 Rotas da Aplicação

Rota	Tipo	Descrição
/	Pública	Feed principal com fotos em destaque.
/login	Pública	Tela de login.
/login/criar	Pública	Cadastro de novo usuário.
/login/perdeu	Pública	Recuperação de senha.
/login/resetar	Pública	Reset de senha via token recebido por e-mail.
/foto/:id	Pública	Página de foto individual com comentários.
/perfil/:user	Pública	Perfil público de um usuário.
/conta	Protegida	Área logada com feed do usuário.
/conta/postar	Protegida	Formulário de envio de nova foto.
/conta/estatisticas	Protegida	Estatísticas e gráficos do usuário.
*	Fallback	Página 404 para rotas não encontradas.

Área Logada

O menu autenticado inclui os atalhos:

• Minhas fotos -> /conta
• Estatísticas -> /conta/estatisticas
• Adicionar fotos -> /conta/postar
• Sair -> realiza logout e redireciona para /login

🚀 Pré-requisitos

Antes de rodar o projeto, você precisa ter instalado:

• Node.js 18+
• npm ou yarn

---

▶️ Como Rodar a Aplicação

1. Clone o repositório

git clone git@github.com:ManoelReisDev/dogs-react.git
cd dogs-react

2. Instale as dependências

npm install

3. Inicie o ambiente de desenvolvimento

npm run dev

4. Acesse no navegador

Abra:

http://localhost:5173

5. Gere a versão de produção

npm run build

6. Visualize o build localmente

npm run preview

---

🌍 Variáveis de Ambiente

O projeto lê a base da API pela variável de ambiente VITE_API_URL.

Para desenvolvimento local, você pode usar um arquivo .env ou .env.local com:

VITE_API_URL=https://dogsapi.origamid.dev/json

---

🧭 Próximos Passos

Possíveis evoluções para o projeto:

• Adicionar testes automatizados com Vitest e React Testing Library.
• Implementar testes end-to-end com Playwright.
• Migrar a URL da API para variável de ambiente.
• Melhorar a experiência de carregamento com skeletons.
• Incluir mensagens toast para feedback de ações.
• Adicionar acessibilidade refinada para formulários e modais.
• Criar documentação de componentes.

📄 Licença e Autoria

Este projeto está sob a licença MIT.

Agradecimentos: projeto desenvolvido com apoio do conteúdo e da metodologia do Origamid, que serviu como base de aprendizado e referência técnica.

Autor: ManoelReisDev
GitHub: ManoelReisDev
Repositório: dogs-react

---

Feito com foco em performance, organização e uma experiência de uso simples para compartilhar fotos de cães. 🐾