# BLUEPRINT: 4_CONFIGURE + POLISH

**Goal:** Finalize configuration, test, and optionally add i18n.

**Done when:** Config complete, tests pass, mobile responsive.

**Prerequisite:** Phase 0-3 complete. App is functional.

---

## Step 1: Update Configuration

### app.ts

**READ:** `src/config/app.ts`

- [ ] `APP_NAME` - Your app name (from spec)
- [ ] `APP_SHORT_NAME` - Abbreviation
- [ ] `preset` - From spec (landing/admin/moolti/docs/blog/game/plain)
- [ ] Footer legal links

### legal.ts

**READ:** `src/config/legal.ts`

- [ ] Company name and registration
- [ ] Contact emails
- [ ] Hosting provider info
- [ ] Jurisdiction

### .env

Required:
- [ ] `VITE_FIREBASE_*` - Firebase config
- [ ] `VITE_DONOTDEV_LICENSE_KEY` - License key

Optional (from spec features):
- [ ] `VITE_STRIPE_*` - If billing enabled
- [ ] `VITE_SENTRY_DSN` - If error tracking

---

## Step 2: Firebase Setup

1. Go to [Firebase Console](https://console.firebase.google.com)
2. Enable auth providers (from spec):
   - [ ] Email/Password
   - [ ] Google
   - [ ] GitHub
   - [ ] etc.
3. Create Firestore Database
4. Deploy rules: `firebase deploy --only firestore:rules`

---

## Step 3: Test with Emulators

```bash
dndev emu start
bun dev
```

### Auth Tests
- [ ] Can create user account
- [ ] Can login/logout
- [ ] Public pages work without auth
- [ ] Protected pages redirect to login
- [ ] Admin pages require admin role

### CRUD Tests
- [ ] Can create entities
- [ ] Can read/list entities
- [ ] Can update entities
- [ ] Can delete entities
- [ ] Data persists

### Access Control Tests
- [ ] Guest can only see guest-visible fields
- [ ] User can only edit own data (if owner access)
- [ ] Admin can edit all data

---

## Step 4: Theme Customization

**READ:** `src/themes.css`

Key variables:
- `--primary` - Brand color
- `--accent` - Accent color
- `--background` - Page background
- `--foreground` - Text color
- `--radius` - Border radius

---

## Step 5: Mobile Check

1. Open DevTools (F12)
2. Toggle device toolbar (Ctrl+Shift+M)
3. Test at 375px width

Check:
- [ ] Navigation works (mobile menu)
- [ ] Forms are usable
- [ ] Text is readable
- [ ] Buttons are tappable (44px min)
- [ ] No horizontal scroll

---

## Step 6: i18n (Optional)

**Only after Steps 1-5 are validated!**

### Extract Strings

Create `src/locales/[namespace]_en.json`:
```json
{
  "hero": {
    "title": "Your App Name",
    "subtitle": "Your tagline"
  }
}
```

### Replace Hardcoded Strings

```tsx
const { t } = useTranslation('home');

<HeroSection
  title={t('hero.title')}
  subtitle={t('hero.subtitle')}
/>
```

### Add Languages

Copy `home_en.json` → `home_fr.json`, translate values.

---

## Final Checklist

- [ ] app.ts configured
- [ ] legal.ts configured
- [ ] .env configured
- [ ] Firebase connected
- [ ] Auth working
- [ ] CRUD working
- [ ] Access control working
- [ ] Mobile responsive
- [ ] (Optional) i18n added

---

## Output

Production-ready app with:
- Complete configuration
- Working auth & CRUD
- Mobile responsive
- (Optional) Multi-language support
