GeoShapr

A local country-outline guessing game. A random sovereign country's silhouette flashes on screen for a configurable duration; then you pick the correct name from a searchable list. After all rounds, review your score and every answer.

Run locally

npm install
npm run dev

Open the URL shown in the terminal (typically http://localhost:5173).

Build

npm run build
npm run preview

Deploy to Cloudflare (free)

GeoShapr is a static Vite app. Border GeoJSON is not committed to git; it is generated during npm install / npm run build from the world-borders package, so Cloudflare’s build step handles everything automatically.

Cloudflare’s current UI creates a Worker project (not the older standalone Pages flow). There is no “Build output directory” field in the dashboard — that path is set in wrangler.toml under [assets] directory.

1. Push the repo to GitHub

If you have not already:

git add .
git commit -m "Add Cloudflare deployment config"
gh repo create geoshapr --private --source=. --push

Use --public instead of --private if you prefer a public repo.

2. Create a free Cloudflare account

1. Go to https://dash.cloudflare.com/sign-up.
2. Confirm your email and sign in.

3. Create a Worker connected to Git

1. Dashboard → Workers & Pages → Create → Import from Git (or Workers tab → import repo).

2. Authorize GitHub and select the geoshapr repository.

3. In Build configuration, set:

   Setting	Value
   Production branch	main
   Build command	npm run build
   Install command	npm install
   Root directory	/

   You will not see a “Build output directory” field — that comes from wrangler.toml:

   [assets]
   directory = "./dist"

4. Under Variables and secrets (production), add:

   Variable	Value
   NODE_VERSION	20

5. Save and deploy.

The first deploy takes a few minutes: npm installs dependencies, syncs ~54 MB of border data, builds the site, then uploads dist/ as static assets.

4. Open your site

When the deploy finishes, Cloudflare gives you a URL like:

https://geoshapr.<your-subdomain>.workers.dev

Every push to main triggers a new production deploy.

Optional: custom domain

In the project → Domains, attach a domain you own.

Classic Pages UI (alternative)

If you prefer the older flow with a dashboard “Build output directory” field, create Pages → Connect to Git instead of a Worker. Use build command npm run build and output directory dist. Both approaches work for this project.

How to play

1. Choose the number of rounds and how long each outline is shown (down to 0.01 seconds).
2. Memorize each gray country shape on the black background.
3. When the outline disappears, search the country list and submit your guess.
4. View the summary screen with thumbnails, your guesses, correct answers, and final score.

Stack

• Vite + React + TypeScript
• Country boundaries from geoBoundaries via world-borders
• Country metadata from world-countries
• Map rendering with d3-geo