Live sync

App & Website
Integration

Your Travel Diary app and website work together in real time. Record locations on the road, then come home and write your travel stories on a laptop — everything stays in sync automatically.

📱
🖥️
🗺️

What you need

The website integration runs on your own web server. You need a hosting environment and a few minutes to set it up.

1

A web server with PHP & MySQL

You need a hosting environment running PHP 7.4+ and MySQL 5.7+ (or MariaDB). A standard shared hosting plan is sufficient. The Travel Diary web files can run on a subdomain (e.g. traveldiary.yoursite.com) or a subfolder (e.g. yoursite.com/traveldiary).

2

Download and install the web integration package

Download web_setup.zip below, upload the files to your server subdomain, edit config.php with your database credentials and API token, then run setup.php once to create all database tables. Delete setup.php afterwards.

3

Do a first sync from the app

Open the Travel Diary app, go to Settings, enter your server URL and API token, and tap Sync to Website. This populates the database with your collections and locations.

📦

web_setup.zip

All server-side files: setup.php, config.php, API endpoints, admin panel and public website.

⬇ Download
⚠️
After running setup.php, delete it from your server immediately. It creates the admin account with a default password — change the password on your first login.

How it works

The Travel Diary app stores all your locations, collections, photos, and notes locally on your phone. Through the website integration, this data is synchronised with a web server — making your journeys visible on a public website and editable from any browser.

Data flow
📱 App
🔄 Sync
🗄️ Database
🖥️ Website
The sync is two-directional: edits made on the website are sent back to the app on the next sync.
📍

Locations & Collections

All your locations, GPS routes, ratings, categories, and photos are synced to the website.

✏️

Edit on the web

Write or edit descriptions, notes, and location details in a browser — much easier than typing on your phone.

🔁

Two-way sync

Changes made on the website are automatically pulled back into the app on the next sync. The newest version always wins.

🔐

Public & private

You control which collections are publicly visible. Toggle visibility from the app or the admin panel.


Syncing your collections

In the app, go to Settings and scroll to the Website Sync section. Enter your server URL and API token, then tap Sync to Website to push your data.

1

Open Settings

Tap the Settings tab in the bottom navigation bar of the app.

2

Enter your server details

Fill in the Server URL (e.g. https://traveldiary.yoursite.com) and your API Token. These match the values in your server’s config.php.

3

Select collections to sync

Tap Choose collections to select which collections you want to publish. You can include or exclude individual trips.

4

Tap Sync

The app first pulls any website edits, merges them locally, then pushes your data to the server. A confirmation shows how many collections, locations, and photos were synced.


Managing collections on the website

After syncing, log in to the admin panel at /admin.php to manage your collections. You can toggle visibility and edit content directly from your browser.

1

Log in to the admin panel

Go to /admin.php on your Travel Diary server and log in with your admin credentials. The default username is admin — change the password immediately after first login.

2

Toggle visibility

Use the Visible / Hidden button next to each collection to control what appears on the public website. This setting syncs back to the app.

3

Edit a collection

Click the ✏️ Edit button to open the full editor. You can update the collection name, emoji, description, and travel notes, as well as each location’s name, notes, rating, and pin colour.

4

Save & sync back

After saving, the collection is marked as Website edited. The next time you sync in the app, these changes are pulled back automatically — no manual action needed.


How the two-way sync works

The sync uses timestamps to decide which version of a field is most recent. You can safely edit on both the phone and the website at the same time — changes are never lost.

Sync logic — newest version wins per field
📱 App edit
🕐 app timestamp
vs
🖥️ web timestamp
Newest wins
Example: you add a photo on your phone (app wins for photos) while editing the description in a browser (website wins for description). Both changes are kept.

Phase 1 — Pull

When you tap Sync, the app first contacts the server and downloads any edits made on the website since the last sync.

Phase 2 — Merge

The app compares timestamps per field. If the website edited a description more recently than the app, the website version is used. Otherwise the app version is kept.

Phase 3 — Push

The merged data is sent to the server. The server applies the same timestamp logic — it will not overwrite a field that was more recently edited on the website.

⚠️
Edits made on the website are marked with a ✏️ Website edited badge in the admin panel. This badge disappears once the app has synced and confirmed the changes.

What visitors see

Anyone visiting your public site can browse all collections you’ve marked as visible. Each collection shows a map with your route or GPS track, numbered location markers, photos, weather data, altitude, and your travel notes.

🗺️

Interactive map

GPS tracks or auto-routed lines between locations. Click a marker to see the location name and city.

📸

Photo gallery

Photos are shown per location with a fullscreen lightbox on click.

Ratings & categories

Star ratings and category badges are shown per location.

🌤️

Weather & altitude

Weather conditions and altitude recorded at the time of the visit.