Setup & everyday use · Version 1.0
Your holiday photo album
Shared moments is a private album for four people. Everyone can upload and view photos, filter by date, place and contributor, and download sharing copies. Each person can edit and delete their own photos.
START-HERE.html to read these instructions. The website to upload is the site folder. The app is built, but your Cloudflare and Supabase accounts still need to be connected.What is included
| Item | Purpose |
|---|---|
site/ | Complete website, including its JavaScript libraries. No build step or CDN dependency. |
supabase-setup.sql | Creates the photo records, four-member list and private storage rules. |
site/setup.html | Generates your public connection file and SQL to register the four people. |
admin-reset-password.mjs | Optional organiser tool for password resets without email delivery. |
DEVELOPER.md | Maintenance, security design, test results and known limitations. |
One-time setup: create Supabase
- Visit Supabase and create an account. Create a new project in a Free organisation. Choose a region near your group if available. Use a new project dedicated to this album.
- Save the database password privately. It is not needed in the website. Wait until the project finishes starting.
- Open SQL Editor, create a query, paste the entire contents of
supabase-setup.sql, and run it. The script creates two tables and the privateholiday-photosstorage bucket. A successful query may say “Success. No rows returned”. - In Authentication settings, disable new public sign-ups. Leave email/password sign-in enabled. The app does not use invitation emails, magic links, public registration or automatic password-reset emails.
- Under Authentication → Users, use Add user / Create new user to create each of the four email/password accounts. Use the administrator-created user option, not Send invitation. Confirm the email during creation if offered. Choose a different temporary password of at least 12 characters for each person.
- Open the extracted
site/setup.htmlin your browser. Enter the four names and the same email addresses under “Add your four people”. Generate the member SQL, copy it into Supabase SQL Editor and run it. You should see four names. If the query cannot find an email, correct it or create the missing account, then rerun the whole block.
Menu labels may change slightly. The essential result is four confirmed Authentication users and four matching rows in album_members. The seat numbers 1–4 enforce the four-person limit.
Connect and publish the website
- In Supabase’s Connect dialog or Project Settings → API Keys, find the Project URL and publishable key beginning
sb_publishable_. An olderanonpublic key also works. Never use asb_secret_orservice_rolekey in the website. - In
site/setup.html, enter an album name, Project URL and public key. Choose Download config.js. - Replace the package’s
site/config.jswith the downloaded file. Ensure the browser did not rename itconfig (1).jsor add a.txtextension. - Create a free Cloudflare account. Open Workers & Pages, start a new application, choose Pages, then the Direct Upload / drag-and-drop option. Use Pages, not a Worker script. You do not need a domain, GitHub repository, paid Workers plan or Cloudflare R2 storage.
- Give the project a name, then upload the contents of the site folder. Include its
vendorfolder and_headersfile. Alternatively ZIP those contents withindex.htmlat the ZIP root. Do not upload the whole development package or its outer folder. - Deploy and open the supplied
https://your-name.pages.devaddress. There is no build command. Save the address as your group’s album link. - In Supabase Authentication → URL Configuration, set the Site URL to this HTTPS address. The current password sign-in flow does not require email redirects, but setting the correct URL keeps the project configured consistently.
- Sign in with your own account, then give the other three people the album link and their individual account details privately. They need album accounts only; they do not need Cloudflare or Supabase administrator accounts.
Check before adding your holiday collection
- Sign in as the first person and upload one test photo with a date, location and caption.
- On another device or in a separate browser profile, sign in as the second person. Confirm that the photo appears after Refresh and is tagged with the first person’s name.
- Confirm the second person can view and download it but cannot see Edit or Delete for that photo.
- Sign out and check the gallery is no longer visible. Confirm the
holiday-photosbucket is marked Private in Supabase Storage. - Try one photo from each type of phone your group uses, especially an iPhone HEIC photo, before uploading a large batch.
Add your photos
- Open the album link and sign in. Use Account to replace your temporary password with your own.
- Tap Add photos → Choose photos. Select up to 50 per batch from your phone, iPad or computer. For large phone images, smaller batches of 10–20 are easier on memory.
- Wait while the app prepares the pictures. It reads available photo metadata and creates resized JPEG sharing copies plus thumbnails.
- Check each date. If a photo has no recorded date, it stays blank until you enter one; the app does not mistake the upload date for the date taken.
- Enter a place such as “Florence” or “Dove Lake”. To label a batch, enter its location and click Apply to photos. A batch location replaces the current location on each pending photo. A batch date only fills missing dates. You can still change individual entries.
- Add optional captions, then tap Upload photos. Keep the tab open and your device awake until it finishes. Successfully uploaded photos remain online even if another upload fails.
- If an upload needs retry, tap Upload photos again. If you have already closed the page, reselect the original files; exact duplicates are skipped.
GPS coordinates are read when available and give you a View map link after uploading. Place names are entered manually; this version does not call a paid or third-party place-name lookup service. Opening View map sends that photo’s coordinates to OpenStreetMap.
Browse, edit and download
- Browse: choose a day, location or contributor. Date taken is the default order; Recently added shows the latest contributions. Tap Refresh to see other people’s new photos or edits.
- Enlarge: tap a picture. Use the arrows, swipe left/right, or use keyboard arrow keys. Escape closes the photo.
- Edit: open one of your photos and choose Edit details. You can change the date, location and caption. The contributor tag is assigned by your account and cannot be changed in the app.
- Download: choose Download photo. On iPad/iPhone, it may go to Files / Downloads; from there you can share or save it to Photos.
- Delete: you can delete your own shared photos after confirming. This removes them for everyone but leaves your device’s original untouched. Deletion has no album undo.
- Sign out: use Sign out on shared devices. Your sign-in otherwise remains on that browser.
Photo quality and formats
Sharing copies have a longest edge of up to 2,400 pixels, with JPEG compression adjusted to aim below 1 MB. Small originals are not enlarged. Downloads are these sharing copies, not full-resolution originals. Thumbnail files are separate. JPEG, PNG and WebP are supported; HEIC/HEIF conversion is included but unusual encodings can require exporting a JPEG first. Only a still image is retained from a multi-image HEIC or Live Photo; videos, RAW files, animations and Live Photo motion are not included.
The app extracts available date/GPS information before resizing. Sharing JPEGs do not retain the original EXIF metadata; the album stores the date, place, caption and available coordinates separately. Metadata removed by another app cannot be recovered. Duplicate detection recognises identical original file bytes, even if filenames differ; edited, re-encoded or differently exported copies can be uploaded separately.
Keep it free and keep your originals
Supabase’s current Free plan includes 1 GB of file storage, 500 MB of database storage, 5 GB of ordinary outgoing traffic and a separate 5 GB cached allowance. The app stops new batches above an estimated 850 MB of photo data to leave some space. For example, 500 sharing photos averaging 1 MB use approximately 500 MB plus thumbnails. The album’s meter estimates recorded photo files; Supabase’s usage dashboard is authoritative.
Stay on the Free plans and use the supplied pages.dev address. Free quotas and terms can change. If you reach a limit, remove unneeded photos, wait for traffic quotas to reset, or reduce usage rather than enabling a paid plan.
Supabase can pause a free project after about a week of low activity. If the album stops connecting, the organiser should check the Supabase dashboard and restore the paused project. Check it periodically if you want the album to remain available. Keep the original photos independently backed up; this app is a sharing album, not your only archive.
For an additional record, the organiser can export album_photos and album_members as CSV using the dashboard, and download important shared copies. A database export does not include the image files.
Troubleshooting
| What you see | What to do |
|---|---|
| “Your app is ready to connect” | Replace site/config.js with your generated configuration and redeploy the complete site folder. |
| Sign-in rejected | Check the email/password and whether the Authentication user is confirmed. Public registration is intentionally disabled. |
| “Not on this album’s member list” | Run the member SQL after creating all four accounts. Authentication alone does not grant access. |
| Cannot load album or upload | Check internet access, Supabase project status and quotas. Check that the database setup ran successfully and the URL and public key belong to that same project. |
| HEIC conversion fails | Export or share a JPEG version from the device’s photo app, then upload it. Try smaller batches. |
| No date or location | The photo may not contain this information. Enter the date and place manually. GPS does not automatically create a place name. |
| Old or missing thumbnails | Tap Refresh. Private image links expire after an hour; refreshing obtains new ones. |
| Cloudflare shows 404 | Check that index.html is at the deployment root, not inside another site or package folder. |
| Interrupted upload or deletion | Retry from the still-open page. For an upload after reloading, reselect the same files. A failed upload can leave unlisted files; the organiser can review these using the maintenance instructions. |
Forgotten passwords
The default setup deliberately avoids email delivery services. A person who can still sign in can change their password under Account. If someone cannot sign in, the organiser can use the supplied admin-reset-password.mjs utility on a computer with Node.js 22 or newer:
npm ci --omit=dev node admin-reset-password.mjs
Run these commands in the extracted package folder. The utility prompts privately for the project’s secret/service_role key and the new password, keeps them in memory, and resets only the specified existing account. It does not save them to a file. Never put that key in config.js, upload the utility to the website, or share the key with group members. If terminal tools are unfamiliar, ask for help with this step; do not delete and recreate the person’s account, because their photos belong to its existing user ID.
Updating the website
Keep a copy of your configured site/config.js. For a future app update, copy that configuration into the new site folder, then create a new production deployment in the same Cloudflare Pages project. Photos and accounts stay in Supabase. Do not delete the project or rerun unrelated replacement database scripts.
Try it before setup
Open site/index.html in a desktop browser and choose Try practice mode. On some devices, local HTML has limited support; you can instead upload the unconfigured site folder to Cloudflare first, practise there, then add your configuration and redeploy. Practice mode keeps your photos only in that tab. Reloading, closing or exiting practice clears them; they are never uploaded or shared.
Reference links
- Cloudflare Pages: Direct Upload instructions
- Supabase: current free-plan limits
- Supabase: public and secret API keys
- Supabase: private storage policies
- Supabase: free-project pausing and production considerations
Prepared 15 September 2026. No Cloudflare or Supabase project has been created or connected by this download. Native phone behaviour and live multi-user uploads should be checked with the short checklist above after setup.