YipYaps

A modern web app built with React, TanStack Router, and Cloudflare Pages.

Features

• 🗺️ Geolocation-aware greetings
• ⚡ Fast and responsive UI
• 🌐 Deployed on Cloudflare Pages

How It Works

┌─────────────────────────────────────────────────────────────────────────────┐
│                           User visits yipyaps.com                           │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
                         ┌────────────────────────┐
                         │  Has GPS cookie?       │
                         │  (yipyaps_city_slug)   │
                         └────────────────────────┘
                            │                │
                          Yes               No
                            │                │
                            ▼                ▼
              ┌──────────────────┐    ┌─────────────────────────┐
              │ Redirect 302 to  │    │ Show CityOnboardingModal│
              │ {citySlug}.yipyaps.com│    │                         │
              │                  │    │ User clicks "Find my city"│
              │ nashville ───────┼───▶│                         │
              └──────────────────┘    └─────────────────────────┘
                                              │
                                              ▼
                         ┌─────────────────────────────────┐
                         │ Request browser geolocation     │
                         │ (GPS permission)                │
                         └─────────────────────────────────┘
                                              │
                                              ▼
                         ┌─────────────────────────────────┐
                         │ Get coordinates (lat, lng)      │
                         └─────────────────────────────────┘
                                              │
                                              ▼
                         ┌─────────────────────────────────┐
                         │ Reverse geocode via             │
                         │ Google Maps API                 │
                         │ → Extract city name            │
                         └─────────────────────────────────┘
                                              │
                                              ▼
                         ┌─────────────────────────────────┐
                         │ Set cookie:                     │
                         │ yipyaps_city_slug={citySlug}    │
                         │ (cross-subdomain, 24hr expiry) │
                         └─────────────────────────────────┘
                                              │
                                              ▼
                         ┌─────────────────────────────────┐
                         │ Redirect to                     │
                         │ {citySlug}.yipyaps.com          │
                         └─────────────────────────────────┘
                                              │
                                              ▼
                         ┌────────────────────────┐
                         │  On city subdomain     │
                         │  (e.g., nashville.yipyaps.com)│
                         └────────────────────────┘
                            │                │
                            ▼                ▼
              ┌──────────────────┐    ┌─────────────────────────┐
              │ Check cookie      │    │ Filter posts by        │
              │ matches subdomain?│    │ subdomain              │
              │                  │    │                         │
              │ cookie = "nashville"│    │ Only show posts from   │
              │ subdomain = "nashville"│ │ nashville             │
              └──────────────────┘    └─────────────────────────┘
                            │
                            ▼
              ┌─────────────────────────┐
              │ cookie === subdomain?   │
              └─────────────────────────┘
                  │                │
                Yes               No
                  │                │
                  ▼                ▼
      ┌─────────────────┐    ┌─────────────────┐
      │   canPost: true │    │  canPost: false │
      │                 │    │                 │
      │ User can read   │    │ User can read   │
      │ AND post notes  │    │ but NOT post    │
      │                 │    │ (show "Verify   │
      │                 │    │  location" btn) │
      └─────────────────┘    └─────────────────┘

Example Scenarios

User Location	URL Visited	GPS Cookie	Result
Nashville	yipyaps.com	None	→ CityOnboardingModal → GPS → Redirect to nashville.yipyaps.com
Nashville	yipyaps.com	nashville	→ Auto-redirect to nashville.yipyaps.com
Nashville	nashville.yipyaps.com	nashville	Can post and read (cookie matches)
Nashville	knoxville.yipyaps.com	nashville	Can only read (cookie doesn't match)
localhost	localhost:3000	N/A	Dev mode: can post anywhere

Development

npm install
npm run dev

Deploy

npm run deploy