• 

• 

• 

• 

DripGram — See a Fit. Remix It. Make It Yours.

Inspiration

I've always been interested in how fashion allows people to express themselves, but I noticed a frustrating disconnect between discovering outfits online and actually recreating them.

Whenever I see an outfit I like on Instagram or another social platform, I usually have two options: spend time searching for similar clothing online or forget about the outfit entirely. The frustrating part is that I might already own several pieces that could recreate the same look, but I wouldn't immediately think to combine them.

I also realized that most fashion platforms focus on encouraging people to purchase more clothing rather than helping them make better use of what they already own.

That inspired me to build DripGram, an AI-powered social fashion platform that connects outfit inspiration, personal wardrobes, and real-time shopping.

My goal was simple: What if you could see an outfit you love, instantly recreate it using clothes you already own, and find affordable alternatives for anything you're missing?

What It Does

DripGram combines a social fashion platform with an AI-powered personal stylist.

Users can create digital wardrobes by uploading photographs of their clothing, allowing AI to identify garment categories, colors, fits, and other relevant characteristics.

The platform also features a social feed where users can share outfit photographs, discover fashion inspiration, interact through likes and comments, and connect with friends.

The feature I'm most excited about is AI Outfit Remix.

When someone discovers an outfit they like, they can ask DripGram to recreate that look using clothing from their existing wardrobe. Meta AI analyzes the original outfit, identifies its components, and compares them against the user's available garments.

If the user already owns similar clothing, DripGram recommends a combination that recreates the original look.

If they're missing something, SerpApi connects that recommendation to real-time shopping results, helping users discover similar products and compare prices across online retailers.

I also implemented personalized outfit recommendations, allowing users to generate looks for different occasions using clothing they already own.

Rather than treating social networking, AI styling, and shopping as separate experiences, DripGram brings them together into one connected platform.

How I Built It

I developed DripGram independently using React Native, Expo, and TypeScript, allowing me to build a mobile-first application while also supporting the web.

For the backend and cloud infrastructure, I used Firebase Authentication, Cloud Firestore, and Supabase Storage.

The two most important integrations were Meta Model API and SerpApi.

Meta AI Integration

I integrated Meta's Muse Spark model to power the application's AI functionality.

Meta AI helps DripGram:

• Recognize clothing from uploaded photographs.
• Extract garment information, including colors, categories, and fits.
• Understand outfits shared through the social feed.
• Generate personalized outfit recommendations.
• Match outfit inspiration against clothing users already own.
• Identify missing pieces needed to recreate a particular look.

One of my main architectural goals was grounding AI recommendations in actual wardrobe data rather than allowing the model to invent clothing the user doesn't own.

SerpApi Integration

I used SerpApi to connect AI recommendations with real-world shopping information.

The integration allows DripGram to retrieve clothing listings, discover visually similar products, compare prices, and help users find missing outfit components.

For example, if Meta AI identifies that a user owns a suitable shirt but doesn't have pants resembling those in an inspirational outfit, DripGram can use SerpApi to search for comparable pants available online.

This creates a direct connection between AI-powered outfit analysis and actionable shopping recommendations.

Backend and Storage

I used:

• Firebase Authentication for user accounts.
• Cloud Firestore for wardrobe metadata, social posts, user profiles, and interactions.
• Supabase Storage for clothing and outfit photographs.
• Node.js and REST APIs to handle application logic and external service integrations.
• React Native and Expo for the mobile application and web support.

I also worked on caching and minimizing unnecessary AI and shopping requests to improve responsiveness and manage the limited API credits available during the hackathon.

Challenges I Ran Into

1. Getting AI to Understand Clothing Accurately

One of my biggest challenges was making image recognition reliable.

Clothing photographs can vary dramatically in lighting, camera angle, background, and image quality.

During development, I encountered cases where the AI incorrectly identified a garment's primary color or failed to recognize its fit.

I spent time improving image handling, refining prompts, validating structured responses, and making it easier for users to correct AI-generated information.

This taught me that integrating a multimodal model is only the beginning. Making its outputs useful and reliable requires careful engineering.

2. Making AI Recommendations Grounded in Real Data

Generating a fashionable outfit is relatively straightforward for a language model.

Generating a fashionable outfit using only clothes someone actually owns is a much more interesting challenge.

I needed to represent wardrobe items in a structured format, provide the model with relevant information, and validate its recommendations.

I also had to account for situations where users didn't own an exact match for an inspirational outfit.

That challenge helped shape DripGram's central workflow: recreating what you can and shopping for what you're missing.

3. Optimizing Real-Time Shopping

Another challenge was balancing search quality, speed, and API usage.

Some shopping requests took several seconds, which made the application feel less responsive.

I explored caching, query optimization, result deduplication, and incremental loading to make product discovery smoother.

Since I was working with a limited number of sponsored API credits, I also had to think carefully about when external requests were genuinely necessary.

4. Building and Testing Across Mobile and Web

Developing with React Native and Expo introduced its own challenges.

I encountered issues involving image uploads, mobile navigation, keyboard behavior, screen spacing, and responsive layouts.

Making the application look polished on both a phone and a desktop browser required additional work beyond simply getting the functionality running.

I learned how important consistent design, intuitive navigation, and careful testing are to the overall user experience.

5. Finding the Right Product Direction

Perhaps my biggest challenge wasn't technical—it was deciding what DripGram should actually be.

My original concept was a smart wardrobe manager that tracked clothing availability, laundry, wear counts, and daily outfits.

As I continued building and testing, I realized that although these features were useful, they distracted from the most exciting part of the application.

I decided to remove much of the wardrobe-management functionality and focus on a more compelling experience: discovering fashion through a social feed and recreating those looks using AI.

Making that pivot during a 24-hour hackathon was challenging, especially because I was developing the entire project myself, but it ultimately gave DripGram a much clearer identity.

Accomplishments That I'm Proud Of

The accomplishment I'm most proud of is bringing together multiple technologies into a single, cohesive application.

Instead of creating a standalone AI chatbot or a basic shopping interface, I built a platform where AI understanding, personal wardrobe data, social interactions, and live product discovery work together.

I'm especially proud of the AI Outfit Remix concept because it demonstrates how generative AI can help people solve a practical problem.

I'm also proud that I was able to design, develop, integrate, and iterate on the application independently within the constraints of a hackathon.

Building DripGram pushed me to think beyond individual features and consider the entire user experience.

What I Learned

This project taught me a tremendous amount about building AI-powered applications.

I gained experience with:

• Integrating multimodal generative AI into a full-stack application.
• Designing structured prompts and validating AI-generated outputs.
• Connecting AI reasoning with external real-time data.
• Managing API costs, caching, and performance.
• Working with Firebase and Supabase.
• Developing responsive mobile and web interfaces.
• Designing social features around actual user interactions.
• Iterating quickly based on testing and feedback.

Most importantly, I learned that a strong product isn't necessarily the one with the most features. It's the one that connects its features in a way that genuinely helps people.

What's Next for DripGram

I see several exciting opportunities to expand DripGram.

One is developing a more personalized recommendation system that learns from the outfits users save, share, and actually wear.

I also want to improve wardrobe creation through voice input, more advanced clothing recognition, and better visual matching.

On the social side, I'd love to develop smarter outfit discovery and recommendations based on users' interests and personal styles.

Finally, I want to expand the shopping experience with more accurate product matching, better deal discovery, and recommendations that consider both affordability and the clothing users already own.

My long-term vision is to make DripGram a place where people can discover inspiration, express themselves, and explore fashion without feeling like they need to constantly purchase new clothes.

DripGram — See a fit. Remix it. Make it yours.

Built With

• cloud-firestore
• expo.io
• firebase
• javascript
• meta-model-api-(muse-spark)
• node.js
• react-native
• rest-apis
• serpapi
• supabase
• typescript