Lens Scene Visualizer
While browsing SunGod’s sunglasses product page, I came across their interactive lens preview feature. Inspired by its functionality, I decided to independently recreate the experience as a personal project — a full-stack interactive web app that allows users to select from various lens types and view real-time scene comparisons (Mountain, Beach, Road, Naked Eye). The app is built with Next.js and simulates data handling using structured JSON sources for lenses and scenes.
Stack:
Next.js 15, React, TypeScript, SWR, Tailwind CSS
Cloud:
Vercel
Role:
Fullstack Developer
- Interactive lens and scene selection using dynamic URL parameters
- Independent data fetching with parallel routing for seamless user experience
- Optimized, responsive image handling with Next.js Image component.
- Real-time draggable divider for side-by-side scene comparison.
- API routes simulating backend endpoints for lenses and scenes.
- Input validation and structured error handling for reliable UX.
- Incremental data loading with minimal payloads for performance.
Frontend Developer
Implemented Next.js App Router with parallel routes to independently load the lens selector and scene preview components side by side.
Built dynamic URL-based state management using useSearchParams for consistent state hydration across reloads or direct navigation.
Integrated SWR for efficient client-side caching and revalidation, ensuring smooth transitions when switching between lenses or scenes.
Developed the ImageCompare component with a draggable divider to allow users to visually compare “naked eye” and “lens-filtered” views.
Optimized performance using Next.js Image component and priority attributes for above-the-fold image rendering.
Implemented error and empty state components to gracefully handle invalid lens or scene selections.
Styled the user interface with Tailwind CSS version 4, focusing on accessibility and responsive design for various device sizes.
Backend developer
Designed and implemented a full-stack architecture using Next.js API routes to handle product and scene data retrieval.
Modeled strongly typed data structures (Product, Lense, Scene, and ImageType) with TypeScript to ensure type safety across the stack.
Built a data mapping utility (buildLensSceneMap) to link lens SKUs with their corresponding scene images for O(1) access.
Created modular, RESTful endpoints
Implemented schema-based validation using separated utility modules under src/utils/validations to maintain clean domain models.
Added structured error handling to differentiate between missing data, invalid queries, and internal server errors.
Simulated incremental data loading from static JSON files to emulate production-ready backend behavior while keeping performance efficient.