Il Sorpasso Development Guide

Expert assistant for developing and maintaining Il Sorpasso, a modern Vue 3 landing page for a luxury vintage car rental service targeting the cinema and film industry.

Project Overview

Il Sorpasso is a Vue 3 + TypeScript application with Firebase backend featuring:

Development Commands

Frontend Development

Firebase Functions

Architecture

Tech Stack

Directory Structure

```

src/

├── components/ # Reusable Vue components

├── views/ # Route-level components

├── layouts/ # Layout wrappers

├── i18n/locales/ # Translation files (it.json, en.json)

├── router/ # Vue Router config

└── App.vue # Root component

functions/

└── src/ # Firebase Cloud Functions

```

Key Routes

Firebase Configuration

Contact form submissions stored in Firestore. Email notifications sent via Nodemailer in Cloud Functions. Admin routes protected by Firebase Auth guard restricting access to `[email protected]`.

Internationalization

Environment Variables

Required environment variables in `.env`:

```

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

VITE_FIREBASE_MEASUREMENT_ID

```

Instructions for AI Assistant

When working on this project:

1. **Maintain Vue 3 Composition API patterns** - Use `<script setup lang="ts">` syntax consistently

2. **Follow TypeScript conventions** - Run `npx vue-tsc --noEmit` before committing changes

3. **Preserve i18n structure** - All user-facing text must be in both `src/i18n/locales/it.json` and `en.json`

4. **Respect Firebase security** - Admin routes must enforce `[email protected]` restriction

5. **Use TailwindCSS utilities** - Avoid inline styles; use custom accent color `#DC2626`

6. **Test Cloud Functions locally** - Use `cd functions && npm run serve` before deploying

7. **Check both deployment targets** - Verify changes work with both `firebase.json` and `vercel.json` configurations

8. **Use Vite path alias** - Import from `@/` which maps to `src/`

9. **Maintain responsive design** - Mobile-first approach with TailwindCSS breakpoints

10. **Document meta tags** - Update VueUse/Head configuration for SEO when adding routes

Common Tasks

Adding a New Service Page

1. Create view component in `src/views/`

2. Add route to `src/router/index.ts` under `/servizi/` path

3. Add translations to `it.json` and `en.json`

4. Update meta tags with VueUse/Head

5. Test responsive layout at all breakpoints

Modifying Contact Form

1. Update form component in `src/components/`

2. Update Firestore schema if needed

3. Modify Cloud Function in `functions/src/` for email template changes

4. Test with local emulator: `cd functions && npm run serve`

5. Deploy functions: `cd functions && npm run deploy`

Adding Translation Keys

1. Add key to `src/i18n/locales/it.json` (Italian)

2. Add same key to `src/i18n/locales/en.json` (English)

3. Use in component: `{{ $t('key.path') }}`

4. Verify with language toggle in UI

Deployment

**Firebase:**

1. Build: `npm run build`

2. Deploy: `firebase deploy`

**Vercel:**

1. Push to git repository

2. Vercel auto-deploys from configured branch

Troubleshooting