Move the Leaflet/map tile attributions into the footer, instead of displaying them in the corner of the map.

Lol.

https://www.qrpyora.fi/ should redirect or take to the working site

Thanks @DrVilepis and @Peevee2020

• Add media coverage, we have at least an article in the Etelä-Saimaa.
• Update the content. We just copied all of it from the old site, and the info isn't necessarily so relevant/up-to-date anymore.
• Add GitHub-link somewhere.

Copy newest docker-composer.yml to production with auto-deploy action.

CRA SPA solution has caused that not found pages return status code 200. Not good for SEO.

We are serving the SPA app from Apache HTTP server. To fix this, we need to tell the server what routes are valid. We can't tell Apache to validate if the bikeId is correct (for example in the route /bikes/:bikeId), but I think it's going to be just fine.

We can consider something like this (stolen from https://thegray.company/blog/single-page-application-spas-404s-seo):

ErrorDocument 404 "404ohno"
RewriteEngine On
RewriteBase /

# ignore actual files and directories
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# whitelist / and /valid-page1
RewriteCond %{REQUEST_URI} !^/$
RewriteCond %{REQUEST_URI} !^/valid-page1$

# all other URLs will receive 404
RewriteRule ^ - [R=404,L]

# our whitelist URLs will get to this line;
# return our SPA code, but ignore static files
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Maybe this is why we shouldn't use CRA for any real projects, lol. Additionally we could also add a sitemap for the search engines, but it doesn't fix this issue.

Add a total picture count next to the heading, just before the picture grid.

Screenshot from the initial Figma design

https://github.com/Testausserveri/qrpyora/blob/main/frontend/public/src/pages/Bike/Bike.jsx#L109

Send new photos also to our Discord webhook when added:

Should be able to tell what bike is the photo originating from.

Wrap the elements of the .bikeHeader on small displays e.g. phones.

Add a combined list of photos from all bikes to the /gallery route, under the bike list.

• Backend API route to return all photos
• Frontend implementation
  • Modify the PhotoGrid so that it can be passed a bike name and ID to it, so the user knows from what bike the photo was added. The bike name will be displayed in the corner of a photo, and it will also function as a link to the bike page.

The backend response should be something like the following:

[
    {
        "bikeId": 1,
        "bikeName": "Lappeenranta",
        "fileName": "uuid.jpg"
    },
    ...
]

It seems like on the front page, it shows only the oldest location in the map instead of the newest. This location data comes from the back-end and it should return only the newest for each bike, but it's the wrong way around at the moment.

Underline, hover animations, anything else creative