Herny – Dětské koutky Praha

Interactive map of family-friendly restaurants, cafés, and playrooms with children's corners in Prague.

Built with React 19, TypeScript, Leaflet, Tailwind CSS 4, and Vite. Deployed as an Azure Static Web App.

Features

• Interactive map with 235 venue markers across 15 Prague districts
• Auto-detect location via browser Geolocation API
• Search by place name (Nominatim geocoding, Prague-bounded)
• Click the map to set a custom reference point
• Filter by venue type — Restaurace, Kavárna, Herna, Centrum, Ostatní
• Venue detail panel with name, type, children's amenities, district, and website link
• Mobile-first responsive design with 44 px touch targets

Getting Started

git clone https://git.vonolfen.eu/stefan/herny.git
cd herny
npm install
npm run dev

Opens at http://localhost:5173/.

Scripts

Command	Description
npm run dev	Start dev server with HMR
npm run build	TypeScript check + production build to dist/
npm run preview	Serve production build locally
npm run lint	Run ESLint
npm run format	Auto-format with Prettier
npm run format:check	Check formatting without changes

Project Structure

src/
├── App.tsx                  # Root layout: map + search + filters + detail
├── main.tsx                 # Vite entry point
├── types.ts                 # Venue, UserLocation, VenueTypeCategory
├── data/
│   └── parseVenues.ts       # CSV fetch + PapaParse parsing
├── components/
│   ├── MapView.tsx           # Leaflet MapContainer
│   ├── MapController.tsx     # Re-centre, click handler, user marker
│   ├── VenueMarker.tsx       # Marker + popup per venue
│   ├── VenueDetail.tsx       # Nearby venues panel (mobile bottom / desktop sidebar)
│   ├── SearchBox.tsx         # Nominatim geocoding search + reverse geocoding
│   ├── FilterBar.tsx         # Venue type category toggles
│   ├── LocateButton.tsx      # Leaflet control for browser geolocation
│   └── LoadingSpinner.tsx    # Accessible spinner
├── hooks/
│   └── useUserLocation.ts    # Browser Geolocation API
└── utils/
    └── geo.ts                # Haversine distance, coordinate validation

Data

public/praha_detske_koutky.csv — 235 venues with columns: Název, Typ, Dětské zázemí, Praha, Čtvrť, GPS_Lat, GPS_Lon, Web.

Venue types are grouped into 5 filter categories (Restaurace, Kavárna, Herna, Centrum, Ostatní).

Tech Stack

• React 19.1 + TypeScript 5.8 (strict mode)
• Vite 6.3 with Tailwind CSS 4.1
• Leaflet 1.9 + react-leaflet 5.0
• PapaParse 5.5 for CSV parsing
• OpenStreetMap tiles + Nominatim geocoding
• ESLint 9 + Prettier 3.5

Deployment

Hosted as an Azure Static Web App:

Live URL: https://wonderful-pond-09d403a03.7.azurestaticapps.net

Manual deploy via SWA CLI

npm run build
npx @azure/static-web-apps-cli deploy ./dist \
  --env production \
  --resource-group herny \
  --app-name herny \
  --subscription-id d9907a4e-6d56-4385-b4d3-14631f99b6c6

Requires Azure CLI login (az login) beforehand. The staticwebapp.config.json at the repo root configures SPA navigation fallback.

License

ISC