Dogs Desenvolvimento Web

O principal objetivo foi desenvolver uma aplicação frontend funcional e organizada para compartilhar fotos de cães, oferecendo autenticação segura via JWT, um feed público e dinâmico, área logada para postagem e exclusão de fotos, perfis por usuário e uma página de estatísticas com gráficos, tudo mantendo foco em performance, organização do código e uma experiência de uso simples e agradável.

O objetivo foi reunir autenticação, navegação pública e privada, publicação de imagens, perfis de usuário e estatísticas em uma interface simples e responsiva.

desenvolvimento foi organizado em torno de funcionalidades progressivas, começando pela estrutura base do projeto com React e Vite, seguida da implementação da autenticação (cadastro, login, logout, login automático com token no localStorage e recuperação de senha).

Em seguida, foram construídos o feed público com scroll infinito, a visualização detalhada das fotos com comentários, a área autenticada para upload e exclusão de imagens, os perfis públicos e, por fim, a página de estatísticas com gráficos via Victory. As rotas foram divididas entre públicas, protegidas e fallback, garantindo o correto fluxo de navegação da aplicação.

Entre as principais decisões, estão o uso do Vite como bundler e ambiente de desenvolvimento pela sua velocidade e simplicidade; o React Router DOM para gestão de rotas públicas, protegidas e fallback; a estilização isolada por componente com CSS Modules para evitar conflitos de escopo; o uso de PropTypes para validação de props; a integração de SVGs como componentes React por meio do Vite Plugin SVGR; e a comunicação com o backend via Fetch API nativa, sem dependências extras. Além disso, a URL da API foi migrada para variável de ambiente (VITE_API_URL), tornando a aplicação mais flexível entre os diferentes ambientes.

Entre os desafios enfrentados, destacam-se o gerenciamento seguro da autenticação e da sessão do usuário, incluindo o login automático com token persistido no localStorage e o logout com limpeza da sessão.

Lidei também pela primeira vez com o controle de rotas protegidas para impedir acesso não autorizado à área logada. Além disso, foram desenvolvidos a implementação de estados de carregamento e tratamento de erro em todos os fluxos, garantindo uma experiência consistente mesmo diante de falhas de comunicação com a API.

O projeto resultou em uma aplicação completa e funcional de compartilhamento de fotos de cães, consolidando conhecimentos importantes de React, como componentização, hooks, gerenciamento de estado e integração com APIs.

O desenvolvimento reforçou boas práticas de organização de rotas e autenticação, além de demonstrar a importância de variáveis de ambiente na configuração da aplicação.