Palestine Profile Pic Maker
Overview
This is a simple browser-only web app that allows users to upload their profile picture and adds the Palestine border to show support for the Palestinian cause. The app provides an easy way for individuals to express solidarity and raise awareness.
How to Use
- Visit the Palestine Profile Pic Maker.
- Click on the "Upload" button to select your profile picture.
- Wait for the app to process the image and apply the Palestine border.
- Optionally tick "Add ppm.t4p.al to the frame" to curve the short URL along the bottom of the border, so anyone who sees your picture knows where to make theirs. Left unticked, the border stays plain.
- Once processed, click on the "Download" button to save your modified profile picture.
Contribution
Feel free to contribute to the project by submitting issues or pull requests. Your contributions are highly appreciated.
Development
This project uses devbox to provide a
reproducible development environment (Node.js 22, git, and npm) without relying
on a globally installed toolchain.
With devbox (recommended)
- Clone the repository:
git clone https://github.com/TechForPalestine/profile-pic-maker.git
- Open the project directory:
cd profile-pic-maker
- Install dependencies:
devbox run npm install
- Run the project:
devbox run npm run dev
Run the full required test suite with:
devbox run test
Run the live upstream tests with:
devbox run test:live
Without devbox
If you already have Node.js 22 and git installed:
Requires Node.js 22+ (see .nvmrc).
- Clone the repository:
git clone https://github.com/TechForPalestine/profile-pic-maker.git
- Open the project directory:
cd profile-pic-maker
- Install dependencies:
npm ci
- Run the project:
npm run dev
Post-download survey
Once a picture is downloaded, a one-tap survey appears below the share and
download buttons, asking the things Plausible can't answer: where the framed
picture is actually going, where that person's attention lives, whether anyone
else in their circle has framed a picture, and what nearly stopped them.
Each visitor is asked exactly one question, drawn at random from the current
wave in src/lib/survey.ts. Answers are fixed choices sent to Plausible as
Survey: … custom events, so nothing personal or free-form ever reaches
analytics. The survey is asked once per browser.
Keep a wave to three or four questions: every visitor answers one, so a larger
wave splits the same downloads more thinly and each question takes
proportionally longer to reach a readable sample. To start the next wave, swap
the set (there are spares in PARKED_QUESTIONS) and bump SURVEY_VERSION,
which re-asks everyone.
Optional: written feedback via Tally
Set NEXT_PUBLIC_TALLY_FORM_ID to a Tally form ID and a
"Tell us more" link appears on the thank-you step, carrying the tapped answer
across as a hidden field (the question's id — destination, attention,
network or friction — plus from=ppm) so a written comment can be read
next to it. Leave it unset and the link is simply hidden.
Tally's free plan covers unlimited responses; no third-party script is loaded on
the page either way.
Promoter leaderboard
Personal referral links (?ref=<code>) and a moderated leaderboard of the
people who bring the most others. It ships switched off; see
docs/leaderboard.md for how it works, its
configuration and how to launch it, and
docs/cloudflare-pages.md for deploying.
Testing
| Command | What it runs |
|---|
npm test | Integration tests (API route, upstream mocked) — fast & deterministic |
npm run test:e2e | Browser e2e (upload → fetch → generate → download) on Chromium, Firefox and WebKit, upstream mocked |
npm run test:e2e:live | Full-stack e2e against the real tech4palestine pic (needs network) |
npm run test:live | Live integration smoke against the real api.fxtwitter.com |
Or use the devbox shortcuts: devbox run test and devbox run test:live.
Browsers
The e2e suite runs on Chromium, Firefox and WebKit — the app rasterises a DOM
node client-side (html-to-image → canvas → download), which is where the
engines disagree. CI runs one job per engine; locally npm run test:e2e runs
all three and npm run test:e2e -- --project=webkit narrows to one.
Install them with npx playwright install chromium firefox webkit. In
sandboxes where that download is blocked, ./scripts/run-e2e-local.sh installs
an npm-hosted Chromium and points Playwright at it via
PLAYWRIGHT_CHROMIUM_PATH (Chromium only).
License
This project is open source and available under the MIT License.
Disclaimer
This app is created for the purpose of expressing support for the Palestinian cause. Please use it responsibly and respect the rights and privacy of others.
