https://github.com/pxblx7/zebrands-image-converter
Interactive case study showcasing how a Product Manager built Zebrands' internal Image Converter tool in 2 hours using AI collaboration. Features animations, project journey, and live demo links
https://github.com/pxblx7/zebrands-image-converter
ai-collaboration case-study gsap html5 image-converter no-code product-management tailwindcss vercel web-optimization
Last synced: 4 months ago
JSON representation
Interactive case study showcasing how a Product Manager built Zebrands' internal Image Converter tool in 2 hours using AI collaboration. Features animations, project journey, and live demo links
- Host: GitHub
- URL: https://github.com/pxblx7/zebrands-image-converter
- Owner: Pxblx7
- Created: 2025-07-07T20:33:13.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-07-07T21:28:52.000Z (4 months ago)
- Last Synced: 2025-07-07T22:39:49.657Z (4 months ago)
- Topics: ai-collaboration, case-study, gsap, html5, image-converter, no-code, product-management, tailwindcss, vercel, web-optimization
- Language: HTML
- Homepage:
- Size: 3.82 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Zebrands Image Converter - An Interactive Case Study
This repository contains the source code for an interactive webpage that serves as a case study for the development of the "Zebrands Image Converter," an internal tool built through AI collaboration.
The page itself is a demonstration of how product vision and AI-driven development can create high-quality, engaging digital experiences.
➡️ **You can view the live case study page here:** [https://pxblx7.github.io/zebrands-image-converter/](https://pxblx7.github.io/zebrands-image-converter/)
## 🚀 About The Project
This project was born out of a real business need: an efficient, secure, and cost-effective way to convert images to modern web formats (.WebP) for web optimization.
This interactive case study documents the journey of creating this tool, led by a Product Manager (Pablo Arroyo) with no coding background, in under two hours. It highlights:
- **The Problem:** The limitations of existing free tools and the high cost of paid platforms.
- **The Journey:** A two-phased approach, starting with a prototype from Gemini and evolving into a professional application with Vercel V0.
- **The Power of Iteration:** How product management expertise guided the AI to refine UI/UX, fix bugs, and add enterprise-grade features.
- **The Final Impact:** A tool that saves time and money, built with zero engineering resources.
## 🛠️ Built With
This interactive webpage was built using modern, lightweight web technologies:
- HTML5
- Tailwind CSS for styling
- GSAP (GreenSock Animation Platform) for all animations and interactive elements
## ✨ Key Features of the Case Study Page
- **Interactive AI Conversation:** Simulate the iterative dialogue between the Product Manager and the AI to see how the tool was built.
- **Dynamic Animations:** Scroll-triggered animations and animated statistics bring the story to life.
- **Responsive Design:** Fully accessible on desktop, tablet, and mobile devices.
- **Clear Narrative:** A compelling story that explains the "why" and "how" behind the project, making it understandable for both technical and non-technical audiences.
## 👤 Author
**Pablo Arroyo** - Product Manager & Project Lead