https://shufl-pearl.vercel.app/
Consumers love meaningful content. Often as developers we may be serving meaningful quotes by way of daily affirmation apps, vocabulary apps, or religious apps.
We see these apps have lots of success in the marketplace, for example the Motivation App by Monkey Taps has an incredible 1.3million followers, ~300k monthly downloads, and ~$400k MRR
These static quote images are a significant marketing effort for Monkey Taps. Generating these images at scale is tedious, and very time consuming to generate without automated tooling.
The core problems with existing offerings:
- No good solution for generating content based on an API endpoint
- Very timely to pull in records from a DB, engineering might be a bottleneck for marketers responsible for content creation
We have a large database of engaging content, but it’s very time consuming to pull in an image, grab some content from the database, and generate our final marketing material that’ll go on IG, Pinterest, Facebook, etc.
It’d be a huge time saver to auto generate this content from an API endpoint. Existing offerings like Canva do support bulk creation, but in a limited way given their UI.
SHUFL lets you upload your own images, set a basic font styling, and either use a pre-existing API configuration to generate content at scale, or allows you to enter a custom API endpoint.
For example, let's generate a static image content strategy for another app I built ArabicBridge.
I updated the ArabicBridge webapp (also built in NextJS) to add the endpoint /api/getIslamicQuote. This outputs the following:
{
"title": "He is the Omnipotent over His bondmen; and He is the Wise, the Aware.",
"subtitle": "Al-An'aam:18"
}
This is a randomly selected Islamic quote that we'll use to build our static images.
I use midjourney to generate a handful of topically relevant images to serve as background images as well:
Inputting the images and API endpoint into SHUFL, and generating the images gives us this output:
Done! Each of these images can be downloaded and ready for upload into Pinterest, Instagram, etc.
This project leverages NextJS. We get the following benefits using this as our framework:
- App router to build the app leveraging React Server Components under the hood keeps the initial bundle size low
- NextJS’s mono repo structure to create a end-to-end typed environment between our front and backends using tools like
zod- Shared types in
src/lib/types
- Shared types in
- Serverless deployment means I don’t have to worry about scaling either of my APIs
- Benefit of pricing structure prevents traffic spikes from bankrupting me
- Applies to both SHUFL and the ArabicBridge API endpoint I have setup
- Nextjs’s
/publicfolder automatically adds Vercel CDN support to our images - shadcn component library helps quickly scaffold the UI
<Image />to render image results efficiently
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.