[Python] Case Study: Deploying a VOC Dashboard with a Flask Backend for Dynamic CSV Uploading...

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

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

I've already:

• 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

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 and 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

Continue reading...