English · Bahasa Indonesia
Bitcoin Guru is how someone in Indonesia finds a real person to sit down with and learn Bitcoin from — one hour, one-to-one, online or in a café down the road. Pick a topic, pick a city, and the site shows you which Gurus are available and how to ask for a session.
It has been running at guru.bitcoinindonesia.xyz for Bitcoin Indonesia. This repository is the whole thing, and it is yours to take: if your community wants the same directory in Nairobi, Buenos Aires or Manila, you can have one running today. Nothing in here is specific to us except the words and the spreadsheet.
Bitcoin education online is endless, free, and mostly not working. People read twenty articles, watch ten videos, and still do not move their coins off an exchange, because the thing they are actually missing is not information — it is someone sitting next to them saying "no, do it like this."
So Bitcoin Indonesia does that in person. But the hard part was never teaching; it was the matching. Who knows about hardware wallets? Who is in Balikpapan? Who speaks Bahasa and English? That used to live in people's heads and in WhatsApp threads, which meant a newcomer had to already know someone to get started — exactly the barrier we were trying to remove.
This site is that matching, made public. Nothing more clever than that.
Pick what you want to learn, where you are, and online or in person — then the matching Gurus appear, with the languages they speak and where they teach.
Choosing one opens a short request form. It asks for a name, one way to reach you, and what you want to learn — no account, no password, no wallet connection.
The whole site works in English and Bahasa Indonesia, and in light and dark:
One route, one scroll, eight components. If you are about to change something, this is the map of where it lives:
There is no server, no database and no admin panel. The list of Gurus and the list of cities live in a published Google Sheet, which the browser reads directly as CSV when the page loads.
That one decision is what makes this practical for a volunteer-run community. The person who knows which Gurus are active is usually not the person who knows git — and they should not have to be. They open a spreadsheet, add a row, and the site is updated.
The Gurus tab has one row per person:
| Name | Organisation | Location | Languages | Picture |
|---|---|---|---|---|
| Cahya | Bitcoin House Bali | Bali, Canggu Bali, Ubud |
🇮🇩, 🇬🇧 | https://…/cahya.jpg |
Multiple locations go on separate lines inside the one cell. Languages are flag emoji, shown as-is. A missing picture is fine — the site generates a coloured initial from the name, the same colour every time.
The Locations tab is just the city list, in the order you want it in the dropdown.
1. Copy the spreadsheet. Make a Google Sheet with two tabs, Locations and Gurus, in
the shape above. Then File → Share → Publish to web, publish the entire document as a
web page, and copy the long 2PACX-1v… id out of the link it gives you.
2. Get a form endpoint. Sign up at Formspree (the free tier is
enough) and create a form. You get a URL like https://formspree.io/f/abcdwxyz. Session
requests land in that inbox. Please do set your own — if you skip this, requests go to the
Bitcoin Indonesia inbox, and we cannot book sessions in your city.
3. Click Deploy above, paste those two values when Vercel asks, and you are live.
It works the same on Netlify, Cloudflare Pages, GitHub Pages or any static host — it is just
npm run build and a folder of files. The one thing to configure is a rewrite of all paths
to index.html, which vercel.json in this repo already does for Vercel.
Everything below is optional, and none of it needs a build step to understand.
| Variable | What it is |
|---|---|
VITE_SHEET_PUBLISH_ID |
the 2PACX-1v… id from your published sheet link |
VITE_FORMSPREE_ENDPOINT |
your form URL, e.g. https://formspree.io/f/abcdwxyz |
VITE_SHEET_LOCATIONS_GID |
(optional) tab id for Locations, default 0 |
VITE_SHEET_GURUS_GID |
(optional) tab id for Gurus, default 1930814239 |
Copy .env.example to .env to set them locally.
The words. Every string on the page — both languages — is in
src/contexts/LanguageContext.tsx. If your community speaks Swahili or Spanish, that is the
one file to translate, and it is a flat object of plain strings.
The topics. The twelve things a visitor can ask to learn are the topics array in
src/components/SearchCard.tsx, each with a label, a one-line description and an icon.
The prices. src/components/PricingSection.tsx, written in plain rupiah. Change the
numbers and the currency.
The colours. src/index.css holds the design tokens as HSL triples, light theme on
:root and dark on .dark. --primary: 32 95% 53% is Bitcoin orange; change that one line
and the buttons, gradients, icons and the glow behind the hero all follow.
The city matching. citySlugToTerms() in src/services/googleSheets.ts is where the
local knowledge lives — "Bali" must not match "Balikpapan", "Bitcoin House Bali" should
resolve to Bali. Your region will have its own version of this problem; that is the function
to teach about it.
You need Node 18+ and npm.
git clone https://github.com/bitcoinindo21/bitcoin-guru.git
cd bitcoin-guru
npm install
cp .env.example .env # optional — it runs fine without one
npm run dev # http://localhost:8080Other scripts:
npm run build # production build into dist/
npm run preview # serve that build locally
npm run test # vitest
npm run lint # eslintsrc/
├── pages/Index.tsx the single page, composing the sections below
├── components/
│ ├── Hero.tsx headline, badge, animated ₿ particles
│ ├── SearchCard.tsx the three dropdowns and the search button
│ ├── SearchResults.tsx guru cards and the live count
│ ├── SessionRequestModal.tsx the booking form
│ ├── ProgramSection.tsx why learn with a Guru
│ ├── PricingSection.tsx in-person and online
│ ├── TestimonialsSection.tsx learner quotes
│ ├── CommunitySection.tsx links to meetups, the course, the book
│ ├── IndonesiaMap.tsx meetup map and contact options
│ ├── Footer.tsx apply to be a Guru, community links
│ └── ui/ shadcn/ui primitives (generated, rarely edited)
├── contexts/LanguageContext.tsx every string, in English and Indonesian
├── services/googleSheets.ts fetching, parsing and matching the sheet data
└── index.css design tokens, light and dark
The Gurus consented to being listed — name, city, languages and a photo they chose. Treat that list as what it is: real people who volunteered to teach, not leads.
For visitors, the site collects nothing. There is no account, no analytics script, no tracking cookie, no wallet connection, and no database to leak. The only thing that ever leaves the browser is the request form, and only when someone fills it in and presses send. If you run your own copy, please keep it that way.
Vite · React · TypeScript · Tailwind CSS · shadcn/ui · Radix UI · lucide-react · Vitest
Fonts are Space Grotesk and Inter. Hosting is a static build behind nginx.
Issues and pull requests are welcome, and small ones are the most welcome of all — a typo in the Indonesian copy, a city that does not match properly, a contrast problem in dark mode. See CONTRIBUTING.md for how to run it locally and what we look for.
If you are not a developer, you can still help: tell us what confused you on the live site. That is a genuinely useful bug report.
Are you in Indonesia and want to teach? Email info@bitcoinindonesia.xyz — becoming a Guru is not a GitHub thing.
Did you deploy this for your own community? Open an issue and tell us. We would like to link to you.
- Transparency Dashboard — show your community's real impact, also spreadsheet-driven
- Bitcoin Meetup Guide — how to start and run a meetup
- 21 Learnings from Indonesia — a checklist for Bitcoin projects
- My First Bitcoin, in Bahasa Indonesia — the full diploma, translated
- Everything else — games, graphics, stickers, tools
MIT. Use it, change it, run it for your own community. Attribution is appreciated but not required.
Built by Bitcoin Indonesia — a non-profit community for Bitcoin education and adoption across the archipelago.