Making Changes

File Structure Overview

Here is a map of the most important files and folders:

excelcare-webapp/
│
├── client/
│   ├── src/
│   │   ├── lib/
│   │   │   └── siteData.ts        ← ⭐ Main content file (phone, email, addresses)
│   │   ├── pages/                 ← Each website page is a file here
│   │   │   ├── Home.tsx           ← Home page
│   │   │   ├── About.tsx          ← About Us page
│   │   │   ├── Services.tsx       ← Services listing page
│   │   │   ├── Contact.tsx        ← Contact page
│   │   │   └── ...
│   │   ├── components/            ← Reusable parts (header, footer, etc.)
│   │   └── index.css              ← Global styles
│   └── public/                    ← Images, logos, PDFs
│       ├── logo1.png
│       └── flags/
│
├── functions/
│   └── src/
│       └── index.ts               ← Email Cloud Function
│
├── .github/
│   └── workflows/
│       └── firebase-deploy.yml    ← Deployment automation
│
├── .firebaserc                    ← Firebase project aliases (dev/prod)
├── firebase.json                  ← Firebase hosting configuration
└── .env                           ← Local environment variables (not in Git)

The Most Important File — siteData.ts

Most text content on the website (phone numbers, email addresses, office addresses, opening hours) is stored in one central file:

client/src/lib/siteData.ts

Here is what it currently contains (key fields):

export const SITE = {
  name: "Excel Care Group",
  phone: "1300 392 352",
  email: "admin@excelcaregroup.com.au",
  address: "40 Futures Road, Cranbourne West VIC 3977",
  // ... more fields
};

How to Edit Content

Example 1: Change the phone number

1. Open VS Code and open the project folder.
2. Navigate to client/src/lib/siteData.ts.
3. Find the line with phone: "1300 392 352" and change the number.
4. Save the file (Cmd+S on Mac, Ctrl+S on Windows).
5. The browser at http://localhost:5173 will automatically refresh and show the new number.

Example 2: Change an address

In siteData.ts, update the address field:

address: "123 New Street, Suburb VIC 3000",

Example 3: Update opening hours

In siteData.ts, update the hours array:

hours: [
  { day: "Mon – Fri", time: "9:00 AM – 5:00 PM" },
  { day: "Saturday",  time: "10:00 AM – 2:00 PM" },
],

Example 4: Replace an image

1. Prepare your new image (JPG or PNG, ideally under 500 KB for fast loading).
2. Copy the image file into client/public/ folder.
3. If you're replacing the logo, name the file logo1.png (it will overwrite the old one).
4. For other images, find where the old image filename is referenced in the page files (client/src/pages/) and update the filename.

Understanding Git — Save Your Changes

Git tracks every change you make. Think of each "commit" as a saved snapshot you can return to.

The Basic Git Workflow

Every time you finish a set of changes, follow these steps in Terminal:

1. Check what you changed:

   git status

   This lists all the files you've modified.
2. Stage your changes (mark them for saving):

   git add .

   The . means "add everything I changed".
3. Commit (save a snapshot) with a description:

   git commit -m "Update phone number and opening hours"

   Write a short, clear message describing what you changed.
4. Push to GitHub (upload your saved snapshot):

   git push origin develop

Keeping Your Code Up To Date

Before making any changes, always download the latest code from GitHub first. This prevents conflicts.

git checkout develop
git pull origin develop

What To Do If You Make a Mistake

Undo changes to a single file (before committing)

git checkout -- client/src/lib/siteData.ts

Replace client/src/lib/siteData.ts with the file you want to undo.

Undo all changes (before committing)

git checkout -- .

Undo the last commit (already committed, not yet pushed)

git reset --soft HEAD~1

This removes the commit but keeps your changes so you can re-edit and re-commit.

Common Editing Tasks

Building and Previewing a Production Build

To preview exactly how the site will look when deployed (useful before deploying):

pnpm build
pnpm preview

Then open http://localhost:4173 in your browser.