Project Handover Pack | Hair by Angela

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 ease of management.
URL (Live): hairbyangela.co.uk
URL (Firebase): hair-by-angela.web.app
Firebase Project ID: hair-by-angela

2. Tech Stack

The application is built as a static site with Firebase as the backend-as-a-service (BaaS).

Firebase Hosting

Main platform for serving the public website and the admin panel. Rewrites are configured in firebase.json to support single-page navigation logic.

Cloud Firestore

Used for dynamic content management:

settings/contact_details: Stores address, phone, email, and social links.
mail: Collection used for the Trigger Email extension to handle contact form submissions.
reviews & portfolio: Collections for dynamic site content.

Firebase Authentication

Email/Password authentication is used to secure the /admin dashboard.

Firebase Storage

Used to host high-resolution portfolio images uploaded via the admin panel.

3. Repo & File Structure

hair-by-angela/
├── public/               # Root of the hosted site
│   ├── index.html        # Main landing page
│   ├── admin/            # Dashboard for Angela to manage content
│   ├── assets/           
│   │   ├── css/          # Vanilla CSS (Modern design)
│   │   └── js/           # Main logic & Firebase init
│   └── images/           # Static image assets
├── firebase.json         # Firebase configuration
├── firestore.rules       # Database security rules
└── storage.rules         # Storage security rules

4. Config Files

Key configuration files you should know about:

firebase.json: Defines hosting rules, firestore rules path, and storage rules path.
.firebaserc: Maps local environment to the hair-by-angela Firebase project.
Client Config: The Firebase API configuration is hardcoded in public/assets/js/main.js (for the public site) and public/admin/index.html (for the admin panel).

Deploying to a New Firebase Project

If you need to move this site to a different Firebase account or project, follow these steps:

1. Create New Firebase Project

Go to the Firebase Console and create a new project. Enable the following services:

Authentication: Enable Email/Password provider.
Firestore Database: Create a database in production mode.
Storage: Create a default bucket.
Hosting: Initialize Hosting for the project.

2. Update Configuration Files

The Firebase configuration is currently hardcoded in three locations. You must replace the firebaseConfig object in each with the credentials from your new project settings (Project Settings > General > Your Apps):

public/assets/js/firebase-config.js
public/assets/js/main.js
public/admin/index.html

Also, update the .firebaserc file in the project root to point to your new project ID:

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

3. Setup Authentication

Since the new project will have an empty user list, you must manually add an admin user in the Firebase Console (Authentication > Users) so you can log in to the admin dashboard.

4. Deploy

Run firebase deploy from your terminal to push the rules, indexes, and hosting files.

5. Setup & Deployment

Local Environment

Install Node.js: Ensure you have the latest LTS version.
Install Firebase CLI:
```
npm install -g firebase-tools
```
Login to Firebase:
```
firebase login
```

Development

Since this is a static site, you can serve it locally using any static server or the Firebase emulator:

firebase serve

Deployment

To deploy changes to the live site:

firebase deploy

Note: Use firebase deploy --only hosting if you only made frontend changes.