VetAndTech
VetAndTech V2 is a Next.js 12 Pages Router application connecting veterinary professionals with technology solutions and resources. It features a masonry-layout content feed, Vimeo video playback, Google Maps for location-based discovery, and Socket.io real-time messaging. GSAP and split-type power the page animations, giving the platform a polished, modern feel. The infinite scroll feed handles large content volumes without performance issues. Facebook Pixel integration supports marketing attribution. This was one of our earlier Next.js projects, built before the App Router existed, and the Pages Router architecture kept the routing logic clean and predictable.
The Result
A feature-rich veterinary technology platform with real-time messaging, location search, and animated content feeds.
Tech Stack
5
Modules
8
Technologies
6
Highlights
Applications in This Project.
This project is built as 1 interconnected application, each with a distinct responsibility.
vetandtech-v2
Next.js 12 (Pages Router)Veterinary technology platform
What It Does.
Masonry content feed with infinite scroll
GSAP animations with split-type text effects
Google Maps for location-based vet discovery
How It's Built.
Frontend
Services & Infra
Under the Hood.
Every module shipped in VetAndTech — what it does and the features it covers.
Content Feed
Masonry-layout infinite-scroll feed with GSAP animations, filterable by topic and sortable by recency.
What's Included
- react-masonry-css masonry layout
- react-infinite-scroll-component
- GSAP 3.8 + split-type scroll animations
- Post types: text, images, videos
- @smastrom/react-rating for content ratings
Real-Time Messaging
Socket.io-powered direct messaging with online presence indicators, image sharing, and notifications.
What's Included
- Socket.io-client v4 messaging
- Online presence indicators
- Image & file sharing
- NProgress loading indicators
- Swiper v8 media carousel
Video & Media
Vimeo player for educational video content with image cropping and avatar editing.
What's Included
- @vimeo/player integration
- react-cropper + cropperjs image cropping
- react-avatar-editor profile photos
- Embla carousel media display
Location Discovery
Google Maps with Places Autocomplete for finding nearby vets, clinics, and services.
What's Included
- @react-google-maps/api integration
- Google Places Autocomplete
- country-state-city location picker
- react-date-picker scheduling
Auth & Analytics
NextAuth 4 session management, Facebook Pixel attribution, and @next/bundle-analyzer.
What's Included
- NextAuth 4 credentials provider
- Social login (Facebook Pixel)
- react-facebook-pixel attribution
- react-device-detect responsive logic
- @next/bundle-analyzer optimisation
The Interesting Parts.
Key architectural decisions, patterns, and technical details worth knowing.
Next.js 12 Pages Router with _app.js and _document.js for full SSR/SSG control
GSAP 3.8 + split-type for high-fidelity scroll-triggered text animations
react-masonry-css for a Pinterest-style masonry content feed with react-infinite-scroll-component
react-avatar-editor + cropperjs for in-browser profile image cropping before upload
Luxon + Moment.js handle timezone-aware date formatting across global users
Facebook Pixel integration for marketing attribution and conversion tracking
Key Pages & Routes.
The main routes built in the application.
/Landing page
/login + /registerAuthentication pages
/dashboardProtected user dashboard
/[...slug]Dynamic catch-all for profiles & content
/api/authNextAuth handlers
Want Something Like This?
We've built systems like this before — we know the pitfalls, the patterns that work, and how to scope it correctly from day one.