Developer Handover Pack

1. Project Overview

• Project Name: Hair by Angela
• Purpose: A premium, static-first portfolio website for a Fulham-based hairstylist, built for speed, SEO, and easy content editing.
• Primary Live URL: https://hairbyangela.co.uk
• Firebase Hosting URL: https://hairbyangela-co-uk.web.app
• Firebase Project ID: hairbyangela-co-uk
• Admin URL: /admin/

2. Tech Stack

The application is a static site with Firebase services used for content management and hosting.

Firebase Hosting

Serves the public website, admin dashboard, guide, and handover pages. Rewrites in firebase.json route requests to /index.html.

Cloud Firestore

Used for editable site content and contact form submissions. Key collections/documents include:

• settings/contact_details for business details and external links.
• settings/homepage_text for hero, services, about, and contact copy.
• settings/brand_assets for image URLs such as logo, top-right accent image, and about image.
• portfolio and reviews for public-facing content.
• mail for contact form submissions if the Firebase Trigger Email workflow is enabled.

Firebase Authentication

Email/password authentication protects the /admin dashboard.

Firebase Storage

Stores uploaded brand assets and portfolio images managed through the admin area.

3. Repo & File Structure

hair-by-angela/
|-- public/
|   |-- index.html              # Public homepage
|   |-- handover.html           # Developer handover document
|   |-- admin/
|   |   |-- index.html          # Admin dashboard
|   |   `-- guide.html          # Editor guide for the admin user
|   |-- assets/
|   |   |-- css/
|   |   |   `-- styles.css      # Main public-site styling
|   |   `-- js/
|   |       |-- firebase-config.js
|   |       |-- main.js         # Public-site data loading
|   |       `-- portfolio-loader.js
|   `-- images/                 # Public static image assets
|-- firebase.json
|-- .firebaserc
|-- firestore.rules
|-- firestore.indexes.json
`-- storage.rules

4. Current Content Model

Admin Tabs

• Contact Details
• Hero & Brand
• Homepage Text
• Portfolio (Selected Work)
• Reviews

Homepage Hero Area

The homepage no longer uses a separate large hero image upload. The hero now uses:

• Site Logo
• Top Right Accent Image
• Hero text from settings/homepage_text

The about section still supports a dedicated About Image.

5. Config Files

• firebase.json defines hosting, Firestore, and Storage configuration.
• .firebaserc maps the default local project to hairbyangela-co-uk.
• public/assets/js/firebase-config.js contains the client-side Firebase web app configuration used by both the public site and admin.

6. Setup & Deployment

Local Setup

1. Install Node.js.
2. Install the Firebase CLI:

   npm install -g firebase-tools

3. Log in to Firebase:

   firebase login

Development

For local preview, use a static server or Firebase local serving:

firebase serve

Deploying Frontend Changes

For typical site or admin changes, deploy Hosting only:

firebase deploy --only hosting --project hairbyangela-co-uk

Deploying Full Firebase Config

If rules or indexes also changed, run:

firebase deploy --project hairbyangela-co-uk

7. Moving to a New Firebase Project

If this project needs to move to another Firebase account or project:

1. Create the new Firebase project and enable Hosting, Firestore, Storage, and Authentication.
2. Update public/assets/js/firebase-config.js with the new web app credentials.
3. Update .firebaserc so the default project points to the new project ID.
4. Create at least one admin user in Firebase Authentication.
5. Deploy the site and any required rules/indexes.

{
  "projects": {
    "default": "your-new-project-id"
  }
}