Real-Time Product Recommendation Engine
I built this e-commerce storefront with Next.js and GraphQL, using MongoDB as the database. The homepage actually rearranges itself based on what each visitor looks at most - not just their last click, but what they keep coming back to. And the best part? I track returning visitors with just a simple cookie, no login required.
System Architecture
Here's how it's structured: the frontend handles the store and admin panel, GraphQL manages all the data requests through one clean endpoint, and MongoDB keeps product data separate from interaction logs. That way, personalization doesn't mess with the actual product catalog.
Anonymous VisitorGuest Cookie Identity
Store AdminPassword-Gated Panel
Next.js 14 + TailwindStorefront • Admin UI • Cart
GraphQL + Apollo ServerSingle API Endpoint • Resolvers
Interaction LogView History • Frequency Scoring
MongoDB CatalogProducts • Admin Order • Featured
Core Features
Cookie-Based Recognition
Frequency-Ranked Suggestions
Admin Curated Defaults
Cursor-Based Pagination
Data Flow
Product View
→
Log Interaction
→
Score by Frequency
→
Personalized Row
→
Homepage Update
Personalization Engine
Recommendations are ranked by how often a visitor views a category and a specific product - not just their most recent click - so one stray click can't override a real, repeated pattern of interest. If a matched category comes up short, the row is padded with the admin's featured picks instead of showing empty cards.