Smart Home Interactive Experience - Next.js 15+, TypeScript, Tailwind CSS

Year

2025

Tech & Technique

Next.js 15+, TypeScript, Tailwind CSS, Framer Motion, Contentful CMS, Plausible Analytics, Shadcn UI, Vercel

Description

A modern, immersive smart home showcase built with Next.js and Motion, designed to demonstrate smart devices in real-time environments with seamless transitions and e-commerce integration. Developed as a fully interactive web experience simulating rooms like the Kitchen, Living Room, and Entrance.

Key Features:

🏠 Multi-Room Navigation: Explore Kitchen, Living Room, and Entrance with smooth transitions
🔍 Interactive Hotspots: Click on devices to view real-time details, specs, and purchase options
🛒 E-Commerce Integration: Direct links to purchase smart devices from Flipkart
📸 Light Beams & Magnify: Visual indicators for camera coverage and zoomable product previews
📱 Fully Responsive: Mobile-friendly design with gesture support and landscape orientation hints

Technical Highlights:

Built using Next.js App Router with dynamic room-based routing
Powered by Contentful CMS for media asset delivery and content management
Implemented advanced transitions and entrance animations using Framer Motion
Added real-time analytics and tracking with Plausible and custom event hooks
Structured with modular components and reusable navigation logic per room

My Role

Frontend Developer
Led the full development cycle — from UI/UX implementation to analytics tracking.

🎨 Frontend: Built room pages, product cards, navigation logic, and transitions with Tailwind CSS and Motion
🧠 CMS Integration: Connected Contentful for centralized asset management and dynamic content delivery
📈 Analytics: Integrated Plausible to track room visits, product interactions, and conversion paths
🔄 State Management: Managed hotspot interactions, loading states, and navigation with custom hooks
🚀 Deployment: Hosted on Vercel with environment configuration and global CDN caching