RouteResolve – Website Summary

Loaded SRC_URL

https://producingtechnology.com/65-apps/panwenqing_183212_15200482_routeresolve.html

Data source (JSON): panwenqing_183212_14904100_wp273.json

Author / user ID: Wenqing (wp273)

Summary of App Behavior

RouteResolve bills itself as a "Safety-Aware Navigation System." The landing view is a dashboard-style layout built around a user on or near the Cornell Tech / Roosevelt Island / Midtown NYC area. The header shows the app name with a "LIVE" indicator and a link out to the backing JSON endpoint (wp273.json), which the app pulls its data from on load.

The page is divided into several panels:

• Active Alerts – intended to list current hazards (weather, safety, etc.) pulled from the JSON.
• Location Map – an "AREA VIEW · Roosevelt Island / Midtown NYC" map surface with toggles for Campus and Transport layers.
• Tracked Locations – a list of saved places like the Cornell Tech campus and nearby subway stations, each with a risk level.
• Route Recommendations – suggested safer paths with an estimated time and a numeric safety score.
• User Preferences – notification toggle, theme (light/dark), and a budget level.

Looking at the underlying JSON, the app is designed to read a user object (name, preferences), an array of locations with coordinates and risk levels, active alerts tied to specific locations, and a list of recommendations with a safety score from 0–1. So the intended behavior is: fetch the JSON → render current alerts, plot tracked locations on the map, surface the top recommended route, and respect the user's preferences.

Things That Didn't Work How I Expected

• Most of the panels show "—" or "LOADING…" even after the page has fully loaded. The JSON endpoint itself returns valid data when opened directly, so the issue appears to be on the rendering side — the app fetches but doesn't actually populate the UI.
• The "Active Alerts" section never surfaces the "Heavy snow expected" high-severity alert that clearly exists in the JSON, which is the most important thing a safety-aware app should display.
• The "Location Map" is labeled as a map but renders as a static placeholder — there's no actual map tile layer, no pins for the two coordinates in the JSON, and the Campus / Transport toggles don't visibly change anything.
• The "Route Recommendations" panel doesn't show the recommendation that exists in the data ("Safe Route to Campus," 15 min, safety score 0.92), so the core value prop of the app is invisible to the user.
• User Preferences are present in the JSON (notifications on, light theme, medium budget) but there don't seem to be functional controls to change them — they look like read-only labels rather than interactive toggles.
• There's no visible way to add a new location, report a new hazard, or trigger a re-route, even though all of those are natural actions for a navigation + safety tool.
• The "LIVE" badge implies real-time updates, but the data is a single static JSON file with a fixed timestamp, so nothing actually streams or refreshes.

Prompt to Improve the App

Improve the RouteResolve safety-aware navigation app with the following changes:

1. Fix the data binding so the app actually renders the fetched JSON. Replace every "—" and "LOADING…" placeholder with the corresponding field from the endpoint (alerts, locations, recommendations, preferences), and show a clear error state if the fetch fails.
2. Replace the static Location Map placeholder with a real interactive map (Leaflet + OpenStreetMap tiles is fine). Plot each location from the JSON as a pin color-coded by riskLevel (green = low, amber = medium, red = high), and draw the recommended route as a polyline between pins.
3. Make the Active Alerts panel prominent: sort alerts by severity (high first), show the affected location names (not just IDs) using a lookup into the locations array, and color the alert card by severity. Include relative timestamps like "2 hours ago."
4. Render each Route Recommendation as a card showing the title, description, estimated time in minutes, and the safety score as a 0–100% progress bar. Add a "Start Route" button that highlights the route on the map.
5. Turn User Preferences into real interactive controls: a toggle for notifications (wired to the browser Notification API), a light/dark theme switch that actually re-themes the page, and a budget selector (low / medium / high) that filters recommendations.
6. Add a "Report a Hazard" button that lets the user submit a new alert (type, message, severity, location) and have it appear in the Active Alerts list immediately, persisted to localStorage so it survives reloads.
7. Make the "LIVE" badge meaningful: poll the JSON endpoint every 60 seconds (or use a visible "Refresh" button), show a "last updated" timestamp, and briefly flash the badge when new data arrives.
8. Add basic accessibility: real headings for each section, ARIA labels on the map and toggles, and sufficient color contrast on the severity colors so alerts are readable for colorblind users.