Database correction PWA
Budget: €8 – €30 EUR
Of course. Here is a clear and concise summary for a freelancer. It explains the project, details the exact problem, and lists the required actions.
Freelancer Brief: Bug Fix for "Rutenfest Navigator" PWA
Project Overview
The project is a simple Progressive Web App (PWA) called "Rutenfest Navigator," built to help a private group of 10-15 friends organize themselves during a local festival. The entire application is built using Vanilla JavaScript for the frontend and Firebase for the backend (Firestore database and Hosting).
Core Functionality
The app has three main features:
Password-Protected Access: There are no individual user accounts. All users access the app via a single, shared password (88212) and then set a temporary username which is stored locally in their browser.
Shared Event Calendar: Users can add events (with time, location, description) to a shared calendar. All users can see all events for a given day. This part works correctly.
Live Location Map: Users can share their live location on an OpenStreetMap map for a duration of 4 hours. The map is supposed to display a marker for every user who is currently sharing their location.
Beer Counter (New Feature): A simple counter has been added at the bottom. It allows users to log the number of beers they've had. The app then shows a summary for the day. This seems to be working.
The Problem to Solve: Live Location Sharing is Not Working
The core functionality of the live map is broken.
What Happens: When a user shares their location, they can sometimes see their own marker on the map, but they can never see the location markers of any other friends who are also sharing their location. The map remains empty of other users' markers.
What Should Happen: The map should display markers for all users whose location data in the Firestore database has not yet expired (i.e., is within the 4-hour window). The markers should appear and disappear in real-time as users share or their locations expire.
What I've Already Tried: I have already updated the Firestore Security Rules to allow public read and write access to the locations and events collections. The problem does not seem to be a PERMISSION_DENIED error.
The issue is almost certainly located in the client-side JavaScript code that is responsible for fetching the location data from Firestore and rendering it onto the Leaflet.js map.
Your Task
Diagnose the Bug: Review the JavaScript code (app.js). Use the browser's developer tools to inspect the network requests to Firestore and debug the function that listens for location updates.
Fix the Code: Implement the necessary changes to correctly:
Fetch all documents from the locations collection in real-time using an onSnapshot listener.
Correctly filter out any locations where the expiresAt timestamp is in the past.
Properly render a Leaflet.js marker on the map for every valid, active location.
Ensure the map dynamically updates when new locations are shared or old ones expire.
Test and Verify: Confirm that the fix works by testing with at least two browser sessions. When a location is shared in one session, its marker must appear correctly in the other session.
Technical Stack
Frontend: Vanilla JavaScript, HTML, CSS
Backend/Database: Firebase (Firestore)
Hosting: Firebase Hosting
Mapping Library: Leaflet.js
Access
I will provide you with access to the source code (e.g., via GitHub or a ZIP file) and invite you to the Firebase project so you can inspect the database and rules.
Freelancer Brief: Bug Fix for "Rutenfest Navigator" PWA
Project Overview
The project is a simple Progressive Web App (PWA) called "Rutenfest Navigator," built to help a private group of 10-15 friends organize themselves during a local festival. The entire application is built using Vanilla JavaScript for the frontend and Firebase for the backend (Firestore database and Hosting).
Core Functionality
The app has three main features:
Password-Protected Access: There are no individual user accounts. All users access the app via a single, shared password (88212) and then set a temporary username which is stored locally in their browser.
Shared Event Calendar: Users can add events (with time, location, description) to a shared calendar. All users can see all events for a given day. This part works correctly.
Live Location Map: Users can share their live location on an OpenStreetMap map for a duration of 4 hours. The map is supposed to display a marker for every user who is currently sharing their location.
Beer Counter (New Feature): A simple counter has been added at the bottom. It allows users to log the number of beers they've had. The app then shows a summary for the day. This seems to be working.
The Problem to Solve: Live Location Sharing is Not Working
The core functionality of the live map is broken.
What Happens: When a user shares their location, they can sometimes see their own marker on the map, but they can never see the location markers of any other friends who are also sharing their location. The map remains empty of other users' markers.
What Should Happen: The map should display markers for all users whose location data in the Firestore database has not yet expired (i.e., is within the 4-hour window). The markers should appear and disappear in real-time as users share or their locations expire.
What I've Already Tried: I have already updated the Firestore Security Rules to allow public read and write access to the locations and events collections. The problem does not seem to be a PERMISSION_DENIED error.
The issue is almost certainly located in the client-side JavaScript code that is responsible for fetching the location data from Firestore and rendering it onto the Leaflet.js map.
Your Task
Diagnose the Bug: Review the JavaScript code (app.js). Use the browser's developer tools to inspect the network requests to Firestore and debug the function that listens for location updates.
Fix the Code: Implement the necessary changes to correctly:
Fetch all documents from the locations collection in real-time using an onSnapshot listener.
Correctly filter out any locations where the expiresAt timestamp is in the past.
Properly render a Leaflet.js marker on the map for every valid, active location.
Ensure the map dynamically updates when new locations are shared or old ones expire.
Test and Verify: Confirm that the fix works by testing with at least two browser sessions. When a location is shared in one session, its marker must appear correctly in the other session.
Technical Stack
Frontend: Vanilla JavaScript, HTML, CSS
Backend/Database: Firebase (Firestore)
Hosting: Firebase Hosting
Mapping Library: Leaflet.js
Access
I will provide you with access to the source code (e.g., via GitHub or a ZIP file) and invite you to the Firebase project so you can inspect the database and rules.