DEV Community

Cover image for "IN MEMES WE TRUST, ALL HAIL THE EXPLORER!"
Brian Kim
Brian Kim

Posted on

"IN MEMES WE TRUST, ALL HAIL THE EXPLORER!"

#architecture #ruby #web #programming

Meme Explorer 🚀

Overview

Meme Explorer is not your typical Sinatra CRUD app — it’s a micro social and recommendation platform built with elegance and performance in mind.

By combining:

  • Personalized meme delivery
  • Hybrid content sources
  • Real-time metrics
  • Trending algorithms
  • Caching
  • Lightweight UX

…it demonstrates that Sinatra can support sophisticated, scalable applications far beyond the basics.

🌟 Key Features

1. Personalized Meme Delivery

Tiered Randomness Algorithm:

  • Tier 1: Pure random memes
  • Tier 2: Weighted by user likes
  • Tier 3: Advanced algorithm combining:
    • Unseen memes
    • Top subreddits
    • Fresh API integration from meme-api.com

Likes influence the probability of seeing memes again (weighted_sample helper).

2. Hybrid Content Sources

  • Local memes stored in memes.yml
  • External memes fetched dynamically from Reddit via API
  • Automatic deduplication ensures a clean feed

3. Real-Time Metrics & Observability

  • Tracks cache hits/misses, API calls, request durations, and usage of each tier algorithm
  • Metrics accessible in-app via /metrics for transparency

4. Trending Algorithm

  • Time-decayed trending score: 
(likes * 2 + views) / (days_since_update + 1)
Enter fullscreen mode Exit fullscreen mode
  • Balances recency and popularity, similar to major social platforms

5. Persistent Engagement Tracking

  • Tracks views and likes in SQLite
  • No authentication required — personalization achieved via sessions and cookies

6. Caching for Performance

  • Redis-backed cache refreshed every 180 seconds in a background thread
  • Cache hits/misses monitored for fine-grained performance insights

7. Security & Request Throttling

  • Uses Rack::Attack to throttle requests (60/min per IP)
  • Dev-friendly safelists for localhost testing

8. Lightweight UX Design

  • Minimal friction — no login required
  • AJAX-powered like/unlike system with instant UI feedback
  • Random meme navigation via keyboard arrows
  • Responsive, mobile-friendly layout with subtle animations

9. Advanced Ruby/Sinatra Patterns

  • Background threads for scheduled tasks
  • before and after filters for metrics and cookie handling
  • Clean separation of business logic from routes
  • Hybrid use of API + DB + Redis + personalization + metrics, rare for Sinatra apps

🗄 Database Structure (db/setup.rb) 

CREATE TABLE IF NOT EXISTS meme_stats (
  url TEXT PRIMARY KEY,
  title TEXT,
  subreddit TEXT,
  views INTEGER DEFAULT 0,
  likes INTEGER DEFAULT 0,
  updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
Enter fullscreen mode Exit fullscreen mode
  • increment_view(url) and increment_like(url) update counts & timestamps
  • SQLite enables persistent tracking without requiring user accounts

Sample Meme Data (memes.yml) 

funny:
  - title: "WaterBottleSchoolBoy"
    file: "/images/funny1.jpeg"
wholesome:
  - title: "Finding a job"
    file: "/images/wholesome2.jpeg"
dank:
  - title: "AWS-East-1"
    file: "/images/dank2.jpeg"
selfcare:
  - title: "stop crying"
    file: "/images/selfcare1.jpeg"
Enter fullscreen mode Exit fullscreen mode
  • Memes are categorized for easy filtering
  • Works seamlessly with API-fetching for a hybrid content model

📊 Metrics Example

Metric Value
Total Memes 34
Total Likes 14
Total Views 69
Avg Likes per Meme 0.41
Avg Views per Meme 2.03

Top Liked Memes

Title Subreddit Likes Views
Mom Knows Best [OC] wholesomememes 3 1
Egyptian god Medjed... dankmemes 1 1
Unknown local 1 0

Top Subreddits by Likes

Subreddit Total Likes Meme Count
local 10 26
wholesomememes 3 2
dankmemes 1 2

🚀 Standout Technical Highlights

  • Redis-Based Caching: Background refresh every 180 seconds, tracks cache hits/misses
  • Tiered Random Selection: Pure → weighted → advanced logic combining unseen memes, top subreddits, and API fetches
  • Persistent Engagement Tracking: Likes & views tracked per meme without user accounts, session/cookie-based personalization
  • API Integration: Pulls fresh memes dynamically, deduplicates results, handles subreddit-specific errors
  • Real-Time Metrics: METRICS hash tracks requests, cache performance, and algorithm usage
  • Trending Algorithm: Combines likes, views, and recency for meaningful trending results
  • Security: Rack::Attack throttling protects against abuse while maintaining a dev-friendly safelist
  • UX Patterns: AJAX-powered likes/unlikes, keyboard navigation, lightweight responsive design
  • Advanced Ruby/Sinatra Features: Background threads, filters, and hybrid API + DB + Redis + metrics + personalization

🛠 Roadmap / Future Improvements

  • User Accounts & Social Features: Save favorites, commenting, sharing
  • Enhanced Analytics: Historical trends, heatmaps
  • Search & Tagging: Full-text search, meme tagging by content type
  • Recommendation Engine: Collaborative filtering, ML-driven personalization
  • Mobile Optimization & PWA Features: Offline caching, push notifications
  • Scalability: Move to PostgreSQL, integrate background job processing via Sidekiq

✅ Overall Analysis

Meme Explorer is a feature-rich, scalable Sinatra app that elevates the framework from CRUD-only to a mini content platform.

Its blend of:

  • Caching
  • Real-time metrics
  • Personalization
  • Trending algorithms
  • Hybrid API integration
  • Advanced Ruby patterns

…makes it a showcase of modern Sinatra development and a must-see for anyone looking to explore lightweight, high-performing content platforms.

https://meme-explorer.onrender.com/random

Top comments (1)

Collapse
 
mannu profile image
Manpreet Singh •

Heyo!

Just a reminder that you likely want to add tags to your post to help with discoverability. Folks follow tags to discover posts in their "relevant" feed on the DEV homepage, so tags are really important for getting your posts seen.

You can add popular, established tags, more niche tags, or create a brand new tag if there's one that has yet to be created. Some tags are centered around a technology (#python, #javascript) and others are more functional (#discuss, #help, #tutorial)... you can use a combination of 4 tags on your post, so choose wisely.

Always make sure that the tags you choose fit the subject matter of your post. Different tags have submission guidelines set up for them which you can view on a tag's landing page. For example, view the landing page for #career - dev.to/t/career and you'll see that the submission guidelines read:

All articles and discussions should relate to careers in some way.

Pretty much everything on dev.to is about our careers in some way. Ideally, though, keep the tag related to getting, leaving, or maintaining a career or job.

Note that we recruit Tag Moderators to help us create submission guidelines and ensure that posts are properly tagged.

Those are some of the basics of tags! Feel free to visit DEV Help for other helpful information!