Infinite Interactive Project Canvas
React 19 • Firebase • Framer Motion • Real-Time CMS
Find All my Projects here.
Overview
The Compendium is a modern interactive portfolio and project showcase platform designed as an infinite-panning 2D canvas. Built using React 19, TypeScript, Firebase, and Framer Motion, the platform delivers a fluid exploratory experience where projects exist within a continuously navigable grid.
The system includes a real-time CMS dashboard powered by Firestore and Google Authentication, enabling live project management and instant frontend synchronization.
Key Features
Infinite panning 2D project grid
Momentum-based movement with friction decay
Real-time Firestore synchronization using
onSnapshotGoogle-authenticated admin CMS
Smooth animations and transitions using Framer Motion
Responsive layout from mobile to 4K displays
Extensible architecture with React Three Fiber support
Lightweight global state management using Zustand
Technical Highlights
Built a custom infinite-grid navigation system with drag physics
Implemented real-time project updates via Firebase Firestore listeners
Developed a Google-authenticated CMS for CRUD operations
Designed a scalable frontend architecture using React 19 + Vite
Integrated smooth scrolling and transition systems using Lenis and Framer Motion
Structured reusable UI systems with Tailwind CSS v4 design tokens
Tech Stack
Layer | Technology |
|---|---|
Frontend | React 19 + TypeScript |
Build Tool | Vite |
Styling | Tailwind CSS v4 |
Backend | Firebase Firestore |
Authentication | Google Auth |
Animation | Framer Motion + Lenis |
State Management | Zustand |
3D Support | React Three Fiber + drei |
Routing | React Router v7 |
CMS System
CMS Features
Add, edit, and delete projects
Live Firestore synchronization
Google-based authentication
Dynamic thumbnail and link management
Real-time frontend updates without redeployments
What This Project Demonstrates
Advanced frontend engineering
Interactive canvas-based UI systems
Real-time database integration
Motion-driven user experiences
Modern React architecture patterns
Scalable CMS development
Responsive interface design
