🧩 Objective
As a Data Analyst, I was tasked with converting a static HTML VOC (Voice of Customer) dashboard (generated using an AI tool) into a fully hosted, production-ready solution where:
The dashboard is live and shareable via a public link
Only I (the analyst) should be able to upload fresh data (CSV)
The dashboard should reflect the latest uploaded data on refresh — without needing to re-upload HTML files or touch the code
🛠️ What I've Done So Far
✅ 1. Dashboard Hosting
Created a static index.html dashboard file (from AI tool export)
Pushed it to GitHub → Deployed it via Render as a static site
🔗 Live Dashboard Link
✅ 2. Flask Backend Setup
Built a Flask app with password-protected CSV file uploading
Uploaded file gets saved as latest_data.csv in the static/ directory
This file is served from /latest_data.csv endpoint
🔗 Upload App Link
✅ 3. CORS Handling
Added flask-cors and enabled CORS(app) so the dashboard can fetch from this backend
✅ 4. JavaScript in Dashboard
Removed hardcoded CSV embedded in JS
Replaced with a fetch() call to pull latest_data.csv from Flask backend
On success: populate data
On failure: display "Failed to load live data." in red
🔥 Problem I'm Facing
Everything is deployed correctly and individually works:
The Flask app saves the CSV (latest_data.csv) — ✅
The dashboard is live and publicly accessible — ✅
The endpoint https://flash-voc-30-1.onrender.com/latest_data.csv works fine in browser — ✅
CORS is enabled — ✅
But the dashboard fails to fetch the CSV at runtime. It displays the error message:
"Failed to load live data."
And in the browser console (DevTools → Console tab), I see errors like:
TypeError: Failed to fetch
CORS policy blocks the request OR
Unexpected token errors when parsing the CSV
🔎 What I’ve Already Checked
Confirmed the fetch() URL in index.html is correct
Confirmed CORS is active in app.py (CORS(app))
Accessing the file manually works
Tried hard-refreshing with Ctrl + Shift + R
JS is wrapped in async function fetchAndLoadCSV() and executed at load
💬 What I Need Help With
Why isn’t the dashboard JavaScript fetching latest_data.csv successfully from the Flask backend — even though it's publicly accessible and CORS-enabled?
Could there be something wrong with:
Render’s internal networking rules?
The way JS parses the fetched CSV?
Timing issues with script execution or dashboard rendering functions?
What’s the best way to debug fetch() errors for a CSV being pulled cross-origin in a static site?
Is there a better pattern to separate front-end rendering from data ingestion using Flask?
📁 Files & Tech Stack
| Component | Details |
|---|---|
| Frontend | Static HTML file hosted via Render |
| Backend | Flask (Python) app hosted via Render |
| Data | CSV file uploaded via Flask |
| Integration | JS fetch in index.html → loads latest_data.csv
|
| Access Control | Password-based CSV upload |
| Hosting | Render.com |
| GitHub | Code pushed and connected via GitHub repo |
💡 Bonus: Willing to Share
I'm happy to share:
My app.py Flask backend code
My index.html (with JS)
Console errors if needed
Any help would be greatly appreciated — whether it’s pointing to a bug, a better approach, or a working example. Thank you in advance! 🙏
Top comments (0)