Wobble Pup
AI-Powered Digital Companion & Knowledge Hub
Wobble Pup is an AI-powered digital companion that lives in your browser. The Next.js 16 frontend uses React 19, Tailwind CSS v4, Framer Motion for pet animations, TanStack Query for server state, Lucide icons, and React Markdown with rehype-highlight for AI chat rendering. The Express backend uses PostgreSQL (via pg), JWT authentication with Google OAuth (@react-oauth/google), and OpenAI API integration for image tagging and auto-tagging. The Chrome Extension (Manifest V3) captures text highlights, images, screenshots, and URLs, enriching each with AI-generated tags. Real-time sync between extension and web app is powered by Server-Sent Events (SSE).
Tech Stack
Category
Core Contribution
Architected and built the entire full-stack application: Next.js 16 frontend with Tailwind CSS v4 and Framer Motion, Express/PostgreSQL backend with JWT + Google OAuth, and Chrome Extension (Manifest V3). Implemented OpenAI Vision API for image tagging, GPT-based auto-tagging, AI chat with contextual knowledge retrieval, and real-time SSE sync between extension and web app. Designed the pet companion with dynamic animations and interaction states.
Project Overview
A productivity-meets-companionship app that reimagines browser-based knowledge management. The Chrome Extension captures content, enriching it with AI-generated tags. The web dashboard provides a unified Knowledge Hub with search, filtering, and AI-powered chat. The pet companion adds emotional engagement to productivity.
Technical Highlights
Next.js 16 + React 19 with Tailwind CSS v4
Chrome Extension (Manifest V3) with background workers
OpenAI Vision API for image description & auto-tagging
Real-time sync via Server-Sent Events (SSE)
Express + PostgreSQL backend with JWT & Google OAuth
Framer Motion pet companion animations
Visual Gallery
