gleemo

Designers constantly seek inspiration from well-designed websites. Bookmarking URLs works, but you lose visual context - you need to visit each site to remember why you saved it. Screenshots help, but organizing and tracking changes manually is tedious.

Gleemo is a design inspiration tool I built to crawl websites, capture visual versions over time, and organize them into collections.

live project

  • Gleemo - Design inspiration tool

the design problem

When building a new interface, designers often reference existing work. But tracking inspiration is fragmented:

  • Browser bookmarks show titles, not visuals
  • Screenshots clutter your desktop without organization
  • Pinterest isn't specific to web design
  • Manual versioning is time-consuming when sites update

We wanted a tool that automatically captures website screenshots and tracks visual changes as designs evolve.

how it works

Gleemo operates on three main concepts:

  1. Pages - Crawled websites with automatically captured thumbnails
  2. Versions - Historical snapshots showing how a page changed over time
  3. Collections - User-created groups of pages organized by theme or project

You add a URL, Gleemo crawls it, captures a screenshot, and stores it. When the site updates, a new version is saved, creating a visual timeline of design evolution.

crawling architecture

The backend uses Firebase Cloud Functions to:

  • Accept URL submissions
  • Fetch the webpage content
  • Render it in a headless browser
  • Capture full-page screenshots
  • Generate thumbnails for performance
  • Extract metadata (title, product association)
  • Store everything in Firestore

This automated pipeline means users simply paste URLs - no manual screenshots or uploads required.

version tracking

When a page is re-crawled, Gleemo compares the new screenshot to previous versions. If changes are detected, a new version is created with a timestamp.

This creates a visual history of how popular websites evolve their design - incredibly valuable for understanding trends and design decisions over time.

collections

Users can create themed collections like "E-commerce checkout flows" or "SaaS landing pages" and add relevant page versions to them.

Collections support:

  • Multiple collaborators
  • Custom naming and organization
  • Adding specific versions (not just latest)
  • Deletion and management

This transforms Gleemo from a gallery into a research tool.

filtering and discovery

The gallery uses infinite scroll with lazy loading - as you scroll, more pages load automatically. A filter service manages pagination and queries to Firebase.

The interface includes filtering by product, tags, and other metadata, making it easy to find specific types of designs.

theme customization

Understanding that designers have strong opinions about aesthetics, we added theme customization. Users can switch between light and dark modes, with their preference persisted in Firebase and synced across devices.

technical stack

Built with:

  • Angular for the frontend
  • Firebase Firestore for the database
  • Firebase Cloud Functions for crawling
  • Firebase Authentication for user management
  • Kor UI components for the interface
  • Firebase Analytics for usage tracking

The serverless architecture meant we didn't need to manage crawling infrastructure - Cloud Functions scaled automatically based on demand.

challenges

Several technical hurdles required creative solutions:

  1. Screenshot consistency - Different browsers render sites differently; we standardized on headless Chrome
  2. Memory limits - Cloud Functions have strict memory constraints; we improved image processing
  3. Subdomain handling - Some products use subdomains; we added logic to group them correctly
  4. Versioning frequency - Too frequent crawls waste resources; too infrequent miss changes

analytics integration

We tracked user behavior to understand what worked:

  • Gallery lazy load events
  • Collection creation and management
  • Page additions
  • Theme changes

This data informed which features got the most use and where to focus development effort.

design decisions

Building for designers required understanding their workflows - knowing what features would actually be useful versus what seemed clever but unnecessary.

Focusing on the target user's actual needs made decision-making much clearer.

lessons learned

Building Gleemo taught us:

  1. Automation creates value - Manual screenshot capture would have killed adoption
  2. Visual context beats text - Thumbnails make browsing infinitely faster than reading descriptions
  3. Versioning reveals trends - Tracking design changes over time uncovered interesting patterns
  4. Serverless scales - Cloud Functions handled sporadic crawl requests perfectly

reflection

While Gleemo remains a side project, it demonstrates how specialized tools can serve niche audiences better than generic alternatives.

Designers don't need another bookmark manager - they need visual organization with automated capture and historical tracking. That specific focus made Gleemo useful for its audience.

The name "Gleemo" doesn't have deep meaning - it's short, memorable, and had an available domain. Sometimes that's enough.