Banjarsari Youth Organization Portal

The official website of Karang Taruna Desa Banjarsari — a youth organisation in Kandangan, Temanggung, Central Java — live at https://kartabanjarsari.fun/. A static multi-page site with no framework and no build step, where the community itself edits the content through a browser admin panel.

Highlights

• No framework, on purpose — plain HTML, CSS and ES6 JavaScript with no bundler and no TypeScript. The only npm dependency is dotenv; the serverless functions use Vercel's native module.exports = async (req, res) signature rather than Express, so CORS headers are set explicitly instead of by middleware.
• Firebase Realtime Database as the CMS — comments, gallery, articles, testimonials, committee records, visitor logs and community aspirations all live in Realtime Database with rules in database.rules.json, and Firebase Auth gates the admin login. The organisation updates its own site without a deploy.
• A three-layer cache-busting system sharing one version token — versioned asset URLs, per-folder Cache-Control headers (7 days for versioned CSS/JS, 1 day for photos, must-revalidate for HTML, no-store for version.json), and a runtime ASSET_VERSION check that reloads once when it disagrees. Admin pages are skipped so a reload never discards a half-written article.
• Visual effects were measured, then cut — tsParticles was removed and replaced with a pure-CSS starfield, and the canvas meteor animation carries a LITE profile for mobile. The rule that stuck was to check the per-frame cost before adding any effect.
• Third-party assets never block rendering — Font Awesome and Google Fonts load through preload+onload with a <noscript> fallback.
• The AI key stays server-side — the chatbot calls DeepSeek only through api/chat.js.

Key Features

1. Activities and articles — the organisation's programme and news, editable from the admin panel.
2. Photo gallery — lightGallery-backed browsing over Firebase-managed collections.
3. Interactive map — a Leaflet map locating the village and its activity sites.
4. Committee directory and testimonials — structured records in data/pengurus.json combined with live Firebase entries.
5. Aspiration channel — residents submit suggestions and feedback directly through the site.
6. AI chatbot — a DeepSeek-backed assistant answering questions about the organisation, proxied server-side.
7. Visitor logging and human verification — api/log-visit.js and api/verify-human.js behind the public endpoints.

Tech Stack

• HTML + CSS + vanilla JavaScript (ES6), no framework or bundler
• Firebase Realtime Database + Firebase Auth (compat SDK v8 via CDN)
• Vercel Serverless Functions (api/*.js, native handlers, 1024 MB / 30 s)
• DeepSeek API (chatbot, server-side only)
• Leaflet (map) + lightGallery (gallery)
• Font Awesome + Google Fonts (non-blocking)
• Vercel hosting on a custom domain

Status & Maturity

Active and serving a real organisation, with 265 commits the second most-worked project here. Content and UI are Indonesian only — <html lang="id">, no i18n layer and no language switcher, which is a deliberate fit to the audience. There is no automated test suite. An earlier shop feature (Midtrans, a product JSON) was removed entirely once it became clear it would not be finished, rather than left half-wired; the companion Android app was likewise deleted. The line count below includes tracked static media.

Measured Metrics