About Pickture
Pickture is a Chrome web extension developed during HackUDC 2025 that transforms the way you discover fashion online. With a single click on an image, Pickture displays several similar clothing options from various Inditex brands, making it easier than ever to save or purchase the outfit you love.
Inspiration
When Inditex presented his challenge, and showed us their APIs, we started thinking how we would like to use that technology in our daily life. Truth is, nowadays the most common place to get inspired is through the Internet and social media. Looking at pictures and images of friends or famous people. Here is where our idea got born.
We wanted to simplify the process of finding beautiful clothes online, bridging the gap between casual browsing and a seamless shopping experience. This vision led to the creation of an extension that not only enhances the way we interact with visual content but also leverages cutting-edge API technology to deliver a even smoothier purchase experience.
What We Learned
- Chrome Extension Development: Building Pickture deepened our understanding of browser extension architecture and user interface integration within Chrome.
- API Integration: Working with the Visual Search Inditex Tech API and the Product Search Inditex Tech API taught us how to efficiently handle external data sources and manage asynchronous operations.
- IndexedDB Usage: Implementing a persistent favorites menu using IndexedDB offered insights into client-side storage solutions and data management across user sessions.
- Frontend Technologies: Enhancing our skills in HTML, CSS, and JavaScript was key to creating a responsive and user-friendly experience.
How We Built the Project
- Design & Structure: We started by designing a simple and intuitive interface, ensuring that every interaction—from clicking an image to saving a favorite, was as seamless as possible.
- API Integration: We integrated the Visual Search API to analyze images and return similar clothing items, while also incorporating the Product Search API to allow users to type in what they’re looking for, even specifying their favorite Inditex brand.
- Persistent Storage: We implemented IndexedDB to create a persistent favorites menu that saves users’ preferred products between sessions.
- Responsive Features: We added features such as real-time pricing (including discounts), quick navigation to product pages, and easy social media sharing. A day/night mode toggle was also included to enhance user comfort.
- Deployment: The landing page was developed with modern web standards and deployed on Vercel, ensuring a smooth and accessible user experience.
Challenges Faced
- API Conectivity: Connect to the APIs, as well as getting used to it with, was a testing experience, especially because of our narrow previous knowledge on APIs.
- User Interface Balance: Designing a minimal yet effective UI that could handle both image-based and text-based searches without overwhelming the user was a delicate balance.
- Data Persistence: Finding a suitable solution for data persistency, as well as implementing IndexedDB for a seamless favorites experience involved overcoming challenges related to data synchronization and state management.
- Licences: Beeing our first time working with an open source project also lead to some challenges such as looking for open source alternatives or even trying to find out what licences did every component of the project use.
Features
- Visual Search: Instantly find similar clothing items by clicking on an image.
- Text-Based Search: Type in your desired item and even select a specific Inditex brand.
- Persistent Favorites: Save your favorite products using IndexedDB for access across sessions.
- Real-Time Pricing: See current prices and discounts for all displayed products.
- Easy Navigation: Quickly access product pages or share items on social media with just one click.
- User Experience: Enjoy a sleek, simple interface with both day and night mode options.
- Quick Setup: Deploy the extension easily by downloading the repository, adding your own configuration, and loading it via Chrome’s "Load unpacked" feature.
License
This project is distributed under the Apache License 2.0. This open-source license ensures that Pickture remains accessible for modification and distribution, fostering an environment of collaboration and continuous improvement.
For more information about the license, please refer to the LICENSE section in the repository.
Built With
- api
- css3
- html5
- indexeddb
- javascript
Log in or sign up for Devpost to join the conversation.