Shout-out Generator Kit

A shout-out image generation API template.

It generates an image with a thank you message and a contour background. Each contour is unique and derived from the username.

Usage

Click on the Deploy to Netlify button above to create your own site directly and push this repository to your own account.

Once deployed, try navigating to https://your_app.netlify.app/image?id=GITHUB_USERNAME.

Architecture

The whole thing is powered by an image generation API. The shout-out image is implemented as a React component. A Netlify Functions handles the requests, spins-up a headless browser with Playwright to screenshot the DOM 📸 And returns an image.

It's a pared back version of Christopher Biscardi's wonderful Building an OpenGraph image generation API course.

The build setup is configured via the Makefile.

Run it locally

$ cd image-component
$ npm i
$ npm run storybook