DEV Community

Sean Velasco
Sean Velasco

Posted on

1 1

memegraph - search and explore memes

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

What I Built

Memegraph is a search engine and recommendation engine for memes using OpenAI CLIP.

Search memes via keywords, explore memes with the same template, and discover memes that are visually similar.

Demo

Please check it out here - memegraph.netlify.app!

Source available here - github.com/seanvelasco/memegraph!

Don't know the name of a meme? Just describe the meme!

Guy Thinking In Bed meme

Discover memes about your favorite topics

The Office memes

Look up that obscure meme you saw

Memes about Spongebob and Myers-Briggs Type Indicator (MBTI)

Discover memes that are visually similar

Boardroom meme

New way to browse memes

Memegraph home

Platform Primitives

This uses Netlify Image CDN to deliver and transform memes efficiently to enhance user experience.

Because memes stay the same throughout its lifetime, the cache policy is to cache the memes by default, for the longest amount of time possible. The challenge is, memes are retrieved at random on the homepage, so some memes are cached and some are not.

All the memes are stored in another Blob storage provider, however I plan to migrate them to Netlify Blobs (just need to figure out how to upload in bulk or in batches efficiently).

Top comments (0)

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!