ShopScroll

Login Screen
Friends Circle
Taste Map
Budget Page
Mobile Scroll Post
View Details

Inspiration

Online shopping has become surprisingly exhausting. Between endless search results, sponsored listings, and recommendations that barely reflect what you're interested in, finding something you actually like can take more effort than it should. Meanwhile, apps like TikTok and Instagram have made discovering new content feel almost effortless.

We started wondering why shopping couldn't work the same way. What if you didn't need to know exactly what you wanted before you started browsing? What if a shopping platform could learn your preferences as you explored, rather than relying entirely on search history or purchases?

That's what inspired ShopScroll, an AI-powered product discovery platform designed to make online shopping feel more like exploring a personalized social feed.

What it does

ShopScroll replaces traditional product browsing with an interactive, personalized shopping experience. Instead of scrolling through pages of search results, users explore a continuous feed of products that becomes more relevant with every interaction.

The experience includes several features:

Personalized product discovery: Users can like, save, or skip products. Each interaction contributes to recommendations based on their evolving interests.
AI-powered semantic search: Users can search using natural language rather than exact keywords. Results appear in their own scrollable discovery feed.
Adaptive interest learning: ShopScroll maintains up to five positive user interests, updating them based on likes, saves, searches, and viewing behavior.
Context-aware negative feedback: Users can indicate that a product is too expensive or simply not their style. The system distinguishes between these reasons instead of treating every rejection identically.
Semantic hashtag connections: AI-generated product hashtags are organized into a similarity graph that connects related products and interests.
Friends and product sharing: Users can connect with friends and share products they discover.

What makes ShopScroll different is that recommendations aren't determined by a single action. The platform considers multiple signals, including category preferences, semantic meaning, price sensitivity, product quality, and how users interact with the feed.

How we built it

We built ShopScroll using Next.js and React for the frontend, Node.js and Express for our backend, and Supabase with PostgreSQL for authentication, user preferences, product data, and interactions.

The recommendation system uses Transformers.js with Hugging Face's Xenova/all-MiniLM-L6-v2 model to generate 384-dimensional semantic embeddings. We embed product titles and generated hashtags separately, allowing the system to identify relationships between products even when they don't share the same keywords.

We use pgvector to perform similarity searches and rank products based on four personalized signals:

Main category: 10%
Subcategory: 20%
Hashtag affinity: 35%
Semantic title similarity: 35%

We then incorporate additional signals such as price fit, review quality, and popularity.

Rather than training a large recommendation model from scratch, we developed a lightweight preference system that maintains up to five evolving positive interests per user. Likes and saves reinforce relevant interests, while negative feedback is modeled separately to avoid distorting positive preferences.

For example, when someone marks a product as "Too expensive," ShopScroll learns a price constraint within that product's context rather than rejecting the entire category. Quick skips and longer viewing times also provide different levels of feedback.

We implemented natural-language product search using the same embedding model and built authenticated API endpoints to support personalized feeds, search, interactions, friendships, and product sharing.

For product enrichment, we integrated a local language model through LM Studio to generate descriptive hashtags. These hashtags also support a semantic graph, where connections are determined through vector similarity in PostgreSQL.

Challenges we ran into

Our biggest challenge was building meaningful personalization without existing user data. Traditional recommendation systems often rely on large amounts of historical behavior, but we needed ShopScroll to provide useful results immediately while learning from a relatively small number of interactions.

We addressed this by combining general product information with a lightweight model that gradually adjusts recommendations based on user feedback.

Another challenge was interpreting negative interactions. Someone skipping an expensive pair of headphones doesn't necessarily mean they dislike headphones. Similarly, briefly viewing a product shouldn't carry the same weight as deliberately saving it. Designing separate feedback mechanisms helped us make recommendations more nuanced.

We also encountered challenges with inconsistent product metadata, generating meaningful semantic embeddings, handling products with missing information, and balancing ranking signals so popular products wouldn't consistently overshadow more personally relevant results.

Finally, bringing together the recommendation backend, persistent user data, and interactive scrolling experience required us to carefully coordinate how feedback affected future recommendations without disrupting the browsing experience.

Accomplishments that we're proud of

We're especially proud of creating a recommendation system that learns from more than just likes and dislikes. By distinguishing between different types of feedback, ShopScroll can better understand whether someone dislikes a product itself, its price, or the broader category it belongs to.

We're also proud of combining semantic search with personalized discovery. Users can actively search for something specific or casually explore the main feed, and both experiences contribute to the same evolving preference model.

Another accomplishment was developing our semantic hashtag graph, which creates connections between product interests based on meaning rather than simple keyword overlap.

Most importantly, we brought together personalized recommendations, semantic search, product discovery, and social sharing into one application during the hackathon.

What we learned

We learned that effective personalization is much more complicated than simply finding similar products. Semantic embeddings provide a useful foundation, but the quality of recommendations depends heavily on how different user interactions are interpreted.

We also learned how important it is to design recommendation systems that can recover from imperfect feedback. A single skipped product shouldn't completely change someone's preferences, and a price-related rejection shouldn't eliminate cheaper alternatives.

Technically, we gained experience working with Transformers.js, vector embeddings, pgvector, Supabase, PostgreSQL, database migrations, and authenticated APIs. We also learned how to integrate machine learning into a full-stack application without training an entirely new model.

Perhaps our biggest takeaway was that sophisticated technology is most useful when it makes the experience simpler for the person using it.

What's next for ShopScroll

We'd like to expand ShopScroll beyond its current personalized feed by developing a fully interactive 3D hashtag exploration experience, allowing users to navigate relationships between products and interests visually.

We also want to expand our social features with shared wishlists, collaborative shopping collections, and recommendations based on common interests between friends.

Another feature we're interested in is virtual shopping budgets, where users could build collections of products and explore different purchasing combinations without losing track of their spending goals.

On the technical side, we want to improve recommendation accuracy through additional behavioral signals, a larger product catalog, and more transparent explanations for why individual products are recommended.

Our long-term goal is to make online shopping feel less like sorting through a massive catalog and more like discovering things that genuinely match your interests.