Pied Piper

Effortless Style Discovery with sophisticated recommendation system.

Comment

Inspiration

We were inspired by the often tedious and overwhelming experience of online clothes shopping. We wanted to transform it into a fun, fast, and personalized journey. By adopting an intuitive "Tinder-style" swipe interface, we aimed to make discovering new fashion feel less like a chore and more like an exciting game of style discovery.

What it does

Our recommendation algorithm is designed to create a dynamic and personalized user experience by adapting to user preferences in real-time. The core logic operates on three key rules:

Duplicate Prevention: To maintain a fresh selection, the algorithm tracks user swipes. If a user rejects the same product within a 25-swipe cycle, that item is permanently flagged and will not be shown to them again.

Forced Discovery: Every 10 swipes, the algorithm intentionally introduces new products or categories that are outside the user's immediate liked items. This ensures the user is consistently exposed to a diverse range of options, preventing a recommendation feedback loop.

Preference-Based Loading: After an initial 40 swipes, the system has gathered enough preference data to begin loading a more tailored feed. Subsequent items are then primarily selected based on the user's established likes and dislikes.

How we built it

We built this project as a cross-platform mobile application using React Native and the Expo platform, which allowed us to streamline development for iOS, Android, and the web from a single codebase. TypeScript was chosen as the primary language to ensure code quality and type safety, while Python was used for the initial data processing and preparation of the clothing datasets. The user interface was built with React, and navigation was handled by Expo Router, which provided a clean, file-based routing structure. For the core interactive experience, we used React Native Reanimated and Gesture Handler to create fluid, high-performance animations and gesture controls.

Expo over Bare React Native: We chose Expo to accelerate development, simplify the build process with EAS Build, and make deployment significantly easier.

TypeScript for Code Quality: Adopting TypeScript from the start helped us prevent common runtime errors and improve the overall developer experience with better autocompletion and code reliability.

File-Based Routing with Expo Router: This approach was selected to create a more intuitive and maintainable navigation structure compared to traditional programmatic routing.

Context API for State Management: For managing app-wide data like user preferences, we used React's built-in Context API as a lightweight alternative to more complex state management libraries.

AsyncStorage for Data Persistence: To keep the application simple and self-contained, we opted for AsyncStorage for local data storage instead of implementing a more complex remote database.

Challenges we ran into

Technical Challenges:

  1. Complex Swipe Implementation - Initially struggled with gesture handling and card animations
  2. State Management - Coordinating wishlist persistence across app restarts
  3. Data Processing - Handling large clothing datasets (7,475+ items) from multiple sources
  4. TypeScript Integration - Managing type safety with React Native components
  5. Cross-Platform Compatibility - Ensuring consistent behavior on iOS, Android, and Web

Development Challenges:

  1. AsyncStorage Persistence - Debugging data saving/loading issues
  2. Component Architecture - Balancing simplicity with functionality
  3. Performance Optimization - Managing memory usage with large datasets
  4. Debugging Complex Flows - Tracking user interactions through multiple components

Accomplishments that we're proud of

  • MVP First: Build core functionality before adding complexity
  • User-Centric Design: Simple, intuitive interfaces perform better
  • Robust Logging: Essential for debugging complex state interactions
  • Type Safety: Prevents runtime errors and improves development experience
  • Data Quality: Clean, structured datasets are foundation of good apps

What we learned

Technical Skills Gained:

  1. React Native + Expo - Streamlined mobile app development workflow
  2. TypeScript Best Practices - Type safety for better code reliability
  3. State Management - Context API for global state management
  4. Data Persistence - AsyncStorage for local data storage
  5. Component Architecture - Building reusable, maintainable UI components

Development Insights:

  1. Simplified Approach Wins - Complex gesture systems → Simple button interface worked better
  2. Data Quality Matters - Clean, structured data is crucial for app functionality
  3. Progressive Enhancement - Start basic, add complexity gradually
  4. User Experience Focus - Intuitive interactions trump complex features
  5. Debugging Strategy - Comprehensive logging is essential for complex state flows

Project Management:

  1. Scope Management - Balancing ambitious features with realistic delivery
  2. Technical Debt - Importance of clean, maintainable code architecture
  3. Testing Strategy - Real device testing vs simulator limitations

What's next for Pied Piper

The future of ClothingSwipe is centered on creating a more intelligent and intuitive recommendation engine. The next major step is to implement a sophisticated Image Classification system. This will go beyond simple categories, allowing the app to understand nuanced details about each clothing item, such as its style, pattern, fabric, and occasion. Building on this, we plan to introduce Reverse Image Preference Searching, a feature that will let users upload a photo of an outfit they like. The app will then use visual analysis to find similar items in our database, offering a powerful new way for users to discover fashion that matches their real-world inspiration.

Built With

Share this project:

Updates