Interactive Sri Lanka Map & Progress
Marks Mannar project progress visually and grows real mangrove seedlings live on the map as transfers are verified.
Project 01 / 15 · Conservation / Full Stack / Web
Harithayu · Mangrove Restoration
A bilingual Sinhala-first & English donation platform built for the Leo Club of SLTC supporting an initiative to plant 500 mangrove seedlings in Mannar, Sri Lanka.
The project.
Harithayu (“A little seedling. A living tomorrow.”) is a coastal conservation donation web platform developed for the Leo Club of SLTC to support planting 500 mangrove seedlings along the Mannar coastline in Sri Lanka (LKR 100 per seedling, LKR 50,000 total target).
To connect storytelling with measurable ecological impact, the site features a cinematic AI mangrove video introduction, seamless Sinhala-first and English language switching, a live growing mangrove donation tree, and an interactive Sri Lanka map tracking Mannar conservation progress.
Behind the scenes, an administrative verification workflow allows club reviewers to inspect uploaded bank transfer slips stored via Vercel Blob, verify transaction references in Neon Serverless PostgreSQL, prevent duplicate submissions, and export structured reports via ExcelJS—automatically triggering live seedling growth animations on donors’ browsers once approved.
What it does.
Bilingual Sinhala & English Experience
Sinhala-first UX with instant toggle to English across the story, contribution flow, terms and policies, plus light & dark themes.
Bank Transfer & Proof Upload
Supports LKR 100 / 500 / 1,000 presets or custom amounts with Bank of Ceylon transfer details and encrypted bank slip image uploads via Vercel Blob.
Admin Verification & ExcelJS Exports
Authenticated admin dashboard for reviewing slips, blocking duplicate transaction references, and exporting verified contributor records to spreadsheets.
How it comes together.
Frontend & Storytelling → Vanilla JavaScript, responsive semantic CSS and SVG/HTML animations render the bilingual UI, interactive map, and mangrove film intro with zero heavy bundle overhead.
Server & Database → Node.js backend paired with Neon Serverless PostgreSQL tracks donations, enforces duplicate-reference checks, and updates verified public totals in real time.
Storage & Deployment → Bank transfer receipts upload securely through Vercel Blob, while Vercel handles production hosting and analytics.
A closer look.
Open an image to see the full detail. Use the arrow keys to move through the gallery.
Tools & technologies.
JavaScriptNode.jsNeon PostgreSQLVercel BlobExcelJSHTML5 / CSS3Vercel
Explore the project.
- Live applicationExplore Harithayu & the live Mannar seedling tracker
- Source code on GitHubFull-stack source, Neon DB schema & admin tools
- Project post on LinkedInOriginal announcement & community story
- Discuss this projectOpen a draft in your email application
Technology documentation
Official references for the tools used in this project.