Brainstorming about a real-world, runs-offline photo app

[tacman]

My local newspaper wants to collect and publish photos of the high school sports games, crowd-sourced by coaches, parents and players. I've volunteered to do this, and currently have a Symfony app with a database of games, and we'll post QR codes at the game for people to scan to open the photo submission page.

Because I live in a rural county, with no traffic lights, more cows than people, and lousy internet, uploading the photo is often slow or impossible. And a QR code for each game isn't optimal. Obviously, this is a perfect candidate for a PWA.

As I see it, this is what I need to do.

Phase One

• Add a manifest for downloading the app. pwa-bundle makes this so easy to do!
• Cache the index page and photo submission pages, so the user can get to the game page without a connection.
• Take the picture, and configure background-sync to handle the upload.

When that works, I'd be pretty excited.

Phase Two

• Sync and Search the game database
• User authentication
• Better User Experience

There are only a few hundred games per season, so everything could fit into the DOM and I can do searches from the browser and not worry about online searches. Or I could use IndexDB, CouchDb, Firebase or something like that. I've read about them, but have no experience with them (and am looking for advice!)

The games are a perfect candidate for caching, the season is scheduled ahead of time, but while there are changes (rain, etc.), changes are infrequent. Of course, people may want to use the app to see other (approved) photos, but that will work online.

The photos via background-sync, though, feels like there must be a better way. Like saving the photos to the Camera Roll and then pushing it to some sort of sync.

Users need to be authenticated which is always messy but not too bad in Symfony. However, I don't know how it plays with a mobile app when offline. Store the user token in LocalStorage?

Lastly, I'm not UX designer, I'm happy with bootstrap on the desktop but I haven't been happy with my bootstrap designs on mobile. I don't like tailwind, and would prefer a free theme.

[davidromani]

Hi @tacman

I would like to follow your project if you can share it into a public Github repository. Let me know, thanks. I'm involved in a similar project to work with photos inside a PWA.

[tacman]

The site is live now, in beta: https://ff.survos.com/

It installs as a PWA, which is the first step in eliminating the QR code, since getting to the app without the app being installed meant remembering a URL.

To test, click on the foothills link, the "events" in there are test events. Choose home, office or outside, then take a picture and submit (after registering).

There's a lot of Symfony in the app: workflow, security, ApiPlatform, Stimulus, mailer, slack notifier, etc. But the site is also a bit of a mess, since it started out as a news archive, then sports photos got added on, and now the sports photos are really community events, government meetings, etc, so version 2 will refactor the classes.

I'm loving the PWA part, though. The repo is at https://github.com/survos-sites/foothills-forum, and the photo submission part is just VichUploadBundle. Although background-sync will work out of the box (it's working in the demo app), I'm probably going to write something that interacts with the server via ApiPlatform rather than re-submitting the POST. But I'm not sure, this is new territory for me!