Watermelon

A web platform template built on Lit, TypeScript, Vite, and Firebase. Use this repository as a starting point for new web applications. Search the codebase for the string watermelon (and Watermelon) to find every place that needs to be customized for your new project.

Stack

Layer	Technology
Frontend	Lit web components
Backend	Firebase Firestore
Hosting	Firebase Hosting
Auth	Firebase Auth — Email Magic Link
CI/CD	GitHub Actions → Firebase
Build	Vite + TypeScript

Getting Started

npm install
npm run dev

Building

npm run build

Deployment

Development

Push to main to automatically build, test, and deploy to the development Firebase project.

Production

Production deploys are triggered manually from the GitHub Actions UI:

1. Go to Actions → "Deploy to Production"
2. Click "Run workflow"
3. Enter the branch name, tag, or commit SHA to deploy
4. Click "Run workflow" to start the build and deploy

Environment Variables

Create a .env file with your Firebase configuration:

VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=

Analytics & Cookie Consent

Analytics (Google Analytics via gtag.js) are only loaded after the user grants consent through a cookie consent modal that appears on first visit.

• No analytics or tracking are performed until consent is explicitly granted.
• The user's preference is stored in localStorage (watermelon_analytics_consent).
• Users can change their choice at any time via the Cookie Settings link in the navigation bar.
• When consent is revoked, the page reloads to fully remove analytics scripts.

For details on tracked events and privacy, see design/ANALYTICS_EVENTS.md.

Using This Template

To customize this template for a new project:

1. Replace watermelon / Watermelon everywhere — search the codebase for both casings (case-insensitive search for watermelon will catch them all).
2. Update the Firebase project IDs in .github/workflows/*.yml.
3. Replace the Google Analytics measurement ID in src/services/analytics.ts.
4. Replace public/images/watermelon-logo.png, the favicon set, and the web-app-manifest-*.png icons under public/.
5. Rewrite src/components/page-home.ts, page-privacy.ts, and page-terms.ts with your real copy.
6. Add your domain-specific routes, components, services, and Firestore collections (and their security rules in firestore.rules).