| .. | ||
| data_validation_tool | ||
| geojson_viewer | ||
| netlify/functions | ||
| odk_viewer | ||
| polygon_analysis_editor | ||
| res | ||
| sugar_mill_locator | ||
| index.html | ||
| login.html | ||
| netlify.toml | ||
| README.md | ||
| SETUP_COMPLETE.md | ||
| theme.css | ||
SmartCane Web Apps
Collection of lightweight web applications for farm management and data analysis. Each app is self-contained and can be deployed independently to Netlify or any static hosting provider.
Apps
🗺️ Sugar Mill Locator
Location: sugar_mill_locator/
Interactive map showing sugar cane mill locations across East & Southern Africa. Features include:
- View all mills with detailed information
- Color-coded by country, sized by production volume
- Draw tool to add new mill locations
- Export additions as CSV for database integration
- No backend required - fully static
Files:
index.html- Main interfaceapp.js- Map logic and interactionssugar_cane_factories_africa.csv- Mill location dataREADME.md- Detailed documentation
Usage: Open index.html in a browser or deploy to Netlify
✓ Data Validation Tool
Location: data_validation_tool/
Validates and checks data quality for crop analysis inputs.
Files:
index.html- Main interfacevalidator.js- Validation logicREADME.md- Documentation
Deployment
Deploy to Netlify (Recommended)
- Connect your GitHub repository to Netlify
- Set build command: (leave empty - static files only)
- Set publish directory:
webapps/
Or drag & drop each app folder individually.
Deploy Locally
Each app is a standalone HTML/JS application:
# Sugar Mill Locator
cd sugar_mill_locator
python -m http.server 8000
# Open http://localhost:8000
Development
Adding a New App
-
Create a new folder:
webapps/myapp/ -
Create these files:
index.html- Main pageapp.js(optional) - LogicREADME.md- Documentation- Any assets (CSS, images, data files)
-
Update main
index.htmlwith a card linking to your app:
<div class="app-card">
<div class="app-icon">🎯</div>
<div class="app-content">
<h2>My New App</h2>
<p>Description here</p>
<a href="./myapp/" class="app-btn">Open App</a>
</div>
</div>
Hosting Data Files
- Place CSV/JSON files in the app folder
- Reference with relative paths:
./data.csv - The browser can load and parse them client-side
- No backend authentication needed
External Libraries
- Leaflet.js: Maps (sugar_mill_locator)
- OpenStreetMap: Base map tiles (free)
- Others: Add via CDN in HTML
<head>
Workflow: Adding Mills to Database
For Team Members:
- Open Sugar Mill Locator
- Switch to "Draw & Add" mode
- Click marker tool and draw points for new mills
- Fill in details in the form
- Export as CSV
- Send CSV to Timon
For Timon (Integration):
- Receive exported CSV:
sugar_mills_additions_YYYY-MM-DD.csv - Open
sugar_cane_factories_africa.csv - Append new rows from exported file
- Commit changes to repository
- Updates visible immediately on next deploy
Technical Notes
- All apps are static (no server required)
- Data stored in CSV/JSON files in app folders
- Client-side processing only
- CSV parsing handled by JavaScript
- No database backend needed for basic functionality
Future Enhancements
- Google Sheets integration for live data updates
- Form submission via Formspree/Firebase
- Real-time collaboration features
- Data export to multiple formats (Excel, GeoJSON, etc.)
Created December 2025 | Resilience BV