Rede social · Tempo real
Cats
Rede social de gatos com feed infinito, chat ao vivo e detecção de gatos no navegador.
Desafio
Evoluir um projeto React em uma experiência social com publicações, contas e mensagens em tempo real sem pesar o carregamento inicial.
Como resolvi
Integrei a interface a uma API WordPress headless e ao Socket.io, carregando chat, gráficos e detector apenas quando necessários.
O projeto começou como conclusão de um curso de React e cresceu para uma aplicação com API WordPress headless, sessões JWT, perfis e feed com carregamento infinito.
Ao publicar uma foto, o navegador usa TensorFlow.js e COCO-SSD para detectar gatos na imagem antes do envio. O detector é carregado sob demanda.
O chat reúne sala pública e conversas privadas com presença, indicador de digitação, reconexão e histórico paginado. Mensagens novas aparecem de forma otimista; as não lidas têm contador e podem gerar notificação enquanto a aba está oculta.
Como PWA, o Cats mantém a estrutura estática disponível offline. Consultas autenticadas e mensagens via Socket.io continuam dependentes da rede.
