Most pet shops feel like digital warehouses—cold, cluttered, and generic. But pet parents aren't just "customers"; they're caregivers looking for peace of mind. I built UrbanIQ to bridge that gap, creating a space where high-end smart tech meets a warm, modern aesthetic.

It’s not just an e-commerce site; it’s a toolkit for the modern pet owner.

The "Real" Challenge

Building a shop is easy. Building a shop that feels premium while handling complex data is where it gets interesting. I needed to move fast without breaking the user experience. The "Smart Pet Tech" niche requires a balance: the site needs to look as sophisticated as a GPS tracker, but feel as approachable as a favorite chew toy.

My mission: No jittery scrolls, no slow-loading images, and a checkout flow so smooth you could do it while holding a leash.

My Approach: Performance Meets Personality

1. Speed is a Feature

I chose Next.js 15 because in e-commerce, every millisecond counts. By leveraging Server Components, I made sure the catalog loads before you can say "fetch." This isn't just about SEO (though the Google rankings love it); it’s about respecting the user's time.

2. Motion with Purpose

I didn’t want "flashy" for the sake of it. I used Framer Motion and Lenis Scroll to create a rhythmic, fluid experience. Elements reveal themselves as you explore—staggered fades and subtle micro-interactions that make the interface feel alive and responsive, rather than static.

// src/components/SmoothScroll.tsx
const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  smoothWheel: true,
});

function raf(time: number) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

3. Data that Works for the User

Instead of a rigid database, I went with Prisma and MongoDB. This allowed me to build a flexible system for product specs, nested categories, and a robust review system. I even integrated image uploads so pet parents can share their setup—the ultimate social proof.

// Automated JSON-LD for rich search results
const productsSchema = {
  "@context": "https://schema.org",
  "@type": "ItemList",
  "itemListElement": featuredProducts.map((product, index) => ({
    "@type": "ListItem",
    "position": index + 1,
    "item": {
      "@type": "Product",
      "name": product.name,
      "description": product.description,
      "offers": {
        "@type": "Offer",
        "price": product.price,
        "priceCurrency": "CAD"
      }
    }
  }))
};

The "Goodies" (Key Features)

• Smart Catalog: Everything is SEO-primed from the jump. Automatic slugs, dynamic metadata, and JSON-LD structured data mean these products aren't just sitting there—they're being found.

• The Dashboard: I built distinct worlds for users and admins. Users get a clean space to track orders and save faves; admins get a high-level view of inventory and growth.

• Check-Out, No Stress: Secure Stripe integration that’s built into a single, frictionless flow. Because nobody likes a five-page form.

What I Learned

UrbanIQ pushed me to think about "vibe" as much as "code." It’s a testament to the fact that you can have a heavy-hitting tech stack (React 19, Prisma, Tailwind) while still maintaining a playful, human brand identity.

The result? A platform that’s technically robust, visually stunning, and ready to scale alongside the pets it serves.