# Deploy to Vercel — exact steps

The site is **static** (plain HTML/CSS/JS), so Vercel needs **no build step**. You only do this once; after that, every `git push` re-deploys automatically.

## Step 1 — Push the code to GitHub (once)

Already done by the tutor session, or run:

```powershell
cd C:\Altamash-Next-js-Project\spoken-english-learning
git init
git add .
git commit -m "Initial commit: spoken English learning workspace"
git branch -M main
git remote add origin https://github.com/Al-tamash/spoken-english-grammar-vocabulary.git
git push -u origin main
```

## Step 2 — Import the repo in Vercel

1. Go to **https://vercel.com** → sign up / log in **with your GitHub account**.
2. Click **Add New… → Project**.
3. Find `spoken-english-grammar-vocabulary` in the list → **Import**.
4. On the configuration screen set:
   - **Framework Preset:** `Other`
   - **Build Command:** leave **empty** (override off)
   - **Output Directory:** leave **default** (the repo root)
   - **Install Command:** leave **empty**
5. Click **Deploy**. Wait ~30 seconds.

Done. Your site is live at a URL like:
`https://spoken-english-grammar-vocabulary.vercel.app`

## Step 3 — Open it on your phone

1. Open that URL in **Chrome** (Android) or **Safari** (iPhone).
2. **Android:** menu (⋮) → **Add to Home screen** → *Install*.
   **iPhone:** Share button → **Add to Home Screen**.
3. Open a lesson → tap a **Say it** button → tap **Allow** on the microphone prompt.

The microphone prompt only appears on **HTTPS** — that's exactly why we deploy to Vercel instead of opening files directly.

## Everyday use after this

- New lessons appear when the tutor adds files and you run:
  ```powershell
  git add .
  git commit -m "Add lesson 004"
  git push
  ```
  Vercel re-deploys automatically within a minute. Nothing else to do.

## Troubleshooting

| Problem | Fix |
|---|---|
| Mic button says "browser cannot listen" | Mic drills need HTTPS — check the address starts with `https://`. |
| No sound on "hear it" buttons | Turn **media** volume up (not ring volume); iPhone: flip the silent-mode switch off. |
| Robotic/wrong voice | Android: Settings → System → Languages → Text-to-speech → pick **Google (English US)**. iPhone: Settings → Accessibility → Spoken Content → Voices → English → **Samantha / enhanced**. |
| Page looks zoomed/tiny | Rotate the phone, or Settings → Display → Font size. The site is already phone-sized. |
| Old version after push | Vercel takes ~1 min to deploy; then pull-down-refresh the page. |

## What works on the phone (support matrix)

| Feature | Android Chrome | iPhone Safari |
|---|---|---|
| Reading, quizzes, word-order builder | ✅ | ✅ |
| "Hear it" audio (speechSynthesis) | ✅ | ✅ (needs one tap first) |
| Mic drills (speech recognition) | ✅ good | ✅ works, accuracy varies |
| Add to Home Screen | ✅ installs like an app | ✅ icon + full screen |