Vibrant
Vibrant is a personalized photo framing service where users can upload their photos, choose from a variety of frames and creative templates, and get ready-to-hang custom frames delivered to their doorstep. It turns everyday memories into beautifully designed wall art.
Project Description
Vibrant was created to simplify the process of turning personal photos into stylish, print-ready wall frames. The platform needed to support photo uploads, offer a range of predefined frame sizes and styles, and allow customers to choose from beautifully designed templates that enhance their photos. Real-time previews and a hassle-free ordering experience were key to making the service both accessible and delightful.
My Contribution
Designed the platform in Figma, focusing on a smooth user journey from photo upload to checkout.
Implemented the frontend using React.js and Next.js, applying SSR/SSG techniques for better SEO and performance.
Built a real-time photo preview feature with responsive canvas layouts for templates and frames.
Used Tailwind CSS and ShadCN UI to maintain a scalable design system with consistent spacing, typography, and colors.
Applied Framer Motion for animations that improved interactivity during photo previews and checkout flow.
Developed file upload and validation logic for high-resolution images.
Applied responsive design principles to ensure templates and previews adapt across devices.
Optimized bundle size and used lazy loading for images and components to improve loading speed.
Result
Through Vibrant, I gained valuable experience in building interactive web applications, working with real-time UI updates, and delivering seamless e-commerce experiences. I strengthened my knowledge of file handling, responsive UI engineering, SSR/SSG optimization, and performance tuning in Next.js, while also improving at design-to-development translation.