Give Garden: Integrating Donations into a Game Using Pledge

This is a submission for Weekend Challenge: Generosity Edition

What I Built

When I read about the generosity theme, I immediately thought of integrating donations as a feature into an app or rather a game.

But given the complexities of managing funds as well as the weekend time limit, I thought it was impossible. So then I researched platforms that could act as the middleman. One that would allow me to include and encourage donations without having the money go through me at all.

That's when I found out about Pledge.

The Pledge API is an API-first charitable giving platform designed specifically to let you embed global charity search and donation processing directly into your application without you having to hold, manage, or legally route the funds yourself.
By acting as the intermediary through a donor-advised fund model (the Pledgeling Foundation), they handle the heavy compliance lifting—like verifying 501(c)(3) statuses, distributing money to nonprofits, and instantly automating tax-deductible receipts to the donors.

Perfect!

The Game

The game is called Give Garden. It's a card game where you collect plants/trees as cards and strategically place them into your grid-like garden.

You have cards with rarity ranging from common to legendary. Your placements of specific cards dictate how efficient your garden is at generating the game currency (Blessings).

You water these plants to grow them and advance them to their next growth cycle up until the Fruit-Bearing stage. Then you harvest them and get the blessings.

With these blessings you can buy Garden Decorations. These decorations help make your farm even more efficient. For example: The Geyser Fountain allows the two cards on either side of it to automatically be watered at a certain interval.

You get free spins to have a chance at getting common cards. Each card has an associated type. And each type corresponds directly to a cause. For example: the Bear Bearer is a tree that bears literal bears as its fruits. And that directly corresponds to the Animals cause group.

How the Donations Fit

While you get free spins for a chance to get common cards, uncommon, rare, and legendary cards are collected through premium spins.

You get a crack at a premium spin when you donate to a charity. And depending on the cause of that charity, you will get a random uncommon to legendary card of that type. So donating to to an animal charity will likely yield you a spin for an Animals type tree card.

These donations are managed directly by Pledge, as I said. You'll donate on an official Pledge widget form.

Here's the charity list where you can choose where to donate to:

Charity detail:

And here's where you donate:

Spinning for Cards

You get 3 free regular spins per account and additional ones with in-game currency. For premium spins, you donate to a charity of your choice. Here's an example of a premium spin:

Collect All the Cards

You can click the collection menu to view **Your Album to see which cards you have in your deck:

You can also go to the Arborary, where you can see the full list of available cards to see which ones you've yet to unlock:

Leaderboard

Compete with other players! You can click on the leaderboard to see how you fare against other players in terms of card collection and total blessings:

Demo

You can try the live app here: https://give-garden.vercel.app/

Video demo:

For donations, everything is currently running on Pledge's sandbox environment, so you can use these card credentials to make donations:

• Card number: 4242 4242 4242 4242
• Expiry date: any future date
• CVC: any 3 digits

Code

Here's the GitHub repo in case you want to see how Pledge was integrated.

AnsellMaximilian / give-garden

Give Garden

Give Garden is a cozy card-collection garden game built with Next.js, Clerk, Neon, and Drizzle.

Local setup

1. Copy the variables from .env.example into .env.local.
2. Add the Neon pooled connection string as DATABASE_URL.
3. Apply the checked-in database migration with npm run db:migrate.
4. Start the app with npm run dev.

The Clerk development application is already linked on this machine and its development keys are stored in the ignored .env.local file. Never commit that file.

Useful commands

• npm run dev — run the local Next.js app.
• npm run build — create and validate a production build.
• npm run db:generate — generate migrations after changing db/schema.ts.
• npm run db:migrate — apply pending migrations to the configured Neon database.
• npm run db:studio — inspect the configured database with Drizzle Studio.

For production, configure a Clerk production instance and add the production Clerk keys, DATABASE_URL, and PLEDGE_SECRET_TOKEN…

View on GitHub

How I Built It

I actually spent an entire day and a half trying to come up with a game and its mechanics, so that took a big chunk of development time.

Thankfully Codex was able to get me an MVP rather quickly. It took quite a bit of iterations and asset regeneration, but I think the end result is rather satisfactory.

Conclusion

The current donations system is running on sandbox, so you won't actually be donating real money. But hopefully I've showed you the potential of Pledge as a service to include and encourage donations into your application for your users.

Hopefully I've exposed enough people to Pledge as I think it's a really important tool that not too many people know about but should!