What is this?
Snake Identifier is a mobile-friendly web tool that helps people in Bangalore identify a snake they’ve encountered, understand whether it is dangerous, and know what to do next. It covers 16 species commonly found in and around the city – four venomous, twelve non-venomous – with safety guidance, identification tips, myth-busting, and a directory of local rescuers.
The problem it solves
Snake encounters in Bangalore are common, especially during monsoon. The typical response is panic – people either try to kill the snake (most of which are harmless) or freeze with no idea what to do. The available information is either too technical (herpetology papers) or too vague (generic “stay calm” advice). There is no simple, trusted, locally-specific reference people can pull up on a phone in the moment.
Why we built it this way
The guiding principle was: it needs to work immediately, on any phone, with no friction. That ruled out a native app (requires download) and a server-side application (requires infrastructure and ongoing maintenance). A simple web page – one URL, opens in the browser, no login, no install – was the obvious answer.
We also wanted it to be maintainable by someone non-technical. Rescuer contact details change. New information comes in. The tool needed to be updatable without touching code. This shaped the admin panel design.
Architecture
The app is a single HTML page with no framework, no build step, and no server. All logic runs in the browser.
Data is split into three files:
- snakes.js – the 16 species, with identification tags, safety text, myths, and facts
- regions.js – Bangalore’s zones (North, South, East, West, Central, Outskirts) with rescuer contact slots
- locales.js – all UI strings, structured for future language support
The app logic (app.js) reads these data files and renders screens dynamically. There is no page reload – screens are shown and hidden in place.
Why no framework? The app is small enough that React, Vue, or similar tools would add complexity without benefit. Vanilla JavaScript is easier for a future maintainer to read and edit.
Why no backend? Rescuer data is stored in the browser’s localStorage, managed through a PIN-protected admin panel. This means no database, no API, no server costs. The trade-off is that data is per-device, but for a field tool used by a small team, this is acceptable.
How the identification quiz works
Each snake in the database is tagged with attributes: size, body pattern, head shape, and notable behaviour (hooded, coiled, vine-like, etc.). The quiz asks the user a sequence of questions and filters the snake list against these tags. The result is a ranked shortlist, not a single definitive answer – intentionally so, because the app includes a disclaimer that it is a reference tool, not a diagnosis.
Tech stack
| Component | Choice |
| Language | Vanilla HTML, CSS, JavaScript |
| Fonts | Playfair Display (headings), Lato (body), IBM Plex Mono (labels) |
| Hosting | Netlify (auto-deploys from GitHub on push) |
| Analytics | Google Analytics (GA4) |
| Version control | GitHub |
| Domain | snakes.shiftingradius.com |
No npm, no build pipeline, no dependencies to update.
Design decisions
The visual language is deliberate: serif headings give it the feel of a printed field guide rather than a tech product. Dark mode is the default because many snake encounters happen at dusk or at night. The emergency banner – what to do if someone is bitten – appears on the first screen before anything else, because that is the highest-stakes situation the tool might be used in.
What it is not
It is not a definitive identification tool. Behaviour, context, and lighting all affect how a snake looks. The app makes this explicit on every screen. The correct outcome of using this tool is either “I can see it’s a harmless rat snake, I’ll give it space” or “I’m not sure, I’ll call a rescuer” – not “I’ve confirmed it’s venomous, let me act on that.”
Launched on 27th Feb 2026 – https://snakes.shiftingradius.com
