# everlynewilly/finalproject architecture

> Architecture diagram of the GitHub repository everlynewilly/finalproject, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/everlynewilly/finalproject
- Repository: https://github.com/everlynewilly/finalproject

## Overview

This is a pet-adoption web application with a React client and PHP/MySQL API. The main adopter journey is browsing pets, viewing a pet, submitting screening information, then completing payment after approval; administrators manage pets, users, and screening decisions. The sampled code confirms routing, API-service calls, screening persistence, and payment-callback effects. Payment initiation and several client screens are not sampled, so links through those stages are shown only where supported by the file tree or explicit code.

Main entry points: [`pet-project-react/src/App.jsx`](https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/App.jsx) (App routing), [`pet-project-react/src/services/api.js`](https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/services/api.js) (API service), [`pet-project-react/src/components/admin.jsx`](https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/components/admin.jsx) (Admin dashboard), [`petprojectt/api/screening`](https://github.com/everlynewilly/finalproject/tree/main/petprojectt/api/screening) (Screening endpoints)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["React client"]
  node_app["App routing<br/>[App.jsx]"]
  node_auth["Auth context<br/>[AuthContext.jsx]"]
  node_admin_ui["Admin dashboard<br/>[admin.jsx]"]
  node_api_service["API service<br/>[api.js]"]
end

subgraph group_adoption["Adoption workflow"]
  node_catalog["Pet browsing<br/>[petlist.jsx]"]
  node_pet_detail["Pet details<br/>[petdetails.jsx]"]
  node_screening_ui["Screening form<br/>[screening.jsx]"]
  node_payment_ui["Payment screen<br/>[payment.jsx]"]
  node_success_ui["Adoption outcome"]
end

subgraph group_backend["PHP API"]
  node_auth_api["Authentication API"]
  node_pets_api["Pet endpoints"]
  node_screening_api["Screening endpoints"]
  node_adoption_api["Adoption decisions"]
  node_payment_api["Payment endpoints"]
  node_callback["Payment callback"]
  node_db[("MySQL database<br/>[db.php]")]
end

subgraph group_integrations["External services"]
  node_mailer["Email sender<br/>[mailer.php]"]
  node_mpesa["M-Pesa<br/>[mpesa.php]"]
  node_smtp{{"SMTP server"}}
end

node_adopter(("Adopter"))
node_admin_actor(("Administrator"))

node_adopter -->|"uses"| node_app
node_admin_actor -->|"uses"| node_app
node_app -->|"provides session"| node_auth
node_app -->|"routes to"| node_catalog
node_app -->|"routes to"| node_pet_detail
node_app -->|"routes to"| node_screening_ui
node_app -->|"routes to"| node_payment_ui
node_app -->|"routes to"| node_success_ui
node_app -->|"protects route"| node_admin_ui
node_catalog -->|"loads pets"| node_api_service
node_pet_detail -->|"loads pet"| node_api_service
node_screening_ui -->|"submits form"| node_api_service
node_admin_ui -->|"manages records"| node_api_service
node_api_service -->|"requests auth"| node_auth_api
node_api_service -->|"requests pets"| node_pets_api
node_api_service -->|"requests screening"| node_screening_api
node_api_service -.->|"initiates payment"| node_payment_api
node_screening_api -->|"writes requests"| node_db
node_screening_api -->|"sends confirmation"| node_mailer
node_admin_ui -->|"approves or rejects"| node_api_service
node_callback -->|"updates payment and adoption"| node_db
node_callback -->|"sends confirmation"| node_mailer
node_payment_api -.->|"initiates transaction"| node_mpesa
node_mailer -->|"sends email"| node_smtp

click node_app "https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/App.jsx"
click node_auth "https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/context/AuthContext.jsx"
click node_catalog "https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/components/petlist.jsx"
click node_pet_detail "https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/components/petdetails.jsx"
click node_screening_ui "https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/components/screening.jsx"
click node_payment_ui "https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/components/payment.jsx"
click node_success_ui "https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/components/adoption-success.jsx"
click node_admin_ui "https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/components/admin.jsx"
click node_api_service "https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/services/api.js"
click node_auth_api "https://github.com/everlynewilly/finalproject/tree/main/petprojectt/api/auth"
click node_pets_api "https://github.com/everlynewilly/finalproject/tree/main/petprojectt/api/pets"
click node_screening_api "https://github.com/everlynewilly/finalproject/tree/main/petprojectt/api/screening"
click node_adoption_api "https://github.com/everlynewilly/finalproject/tree/main/petprojectt/adoption_requests"
click node_payment_api "https://github.com/everlynewilly/finalproject/tree/main/petprojectt/api/payment"
click node_callback "https://github.com/everlynewilly/finalproject/blob/main/petprojectt/payments/payment_callback.php"
click node_db "https://github.com/everlynewilly/finalproject/blob/main/petprojectt/config/db.php"
click node_mailer "https://github.com/everlynewilly/finalproject/blob/main/petprojectt/config/mailer.php"
click node_mpesa "https://github.com/everlynewilly/finalproject/blob/main/petprojectt/config/mpesa.php"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_auth,node_admin_ui,node_api_service toneBlue
class node_catalog,node_pet_detail,node_screening_ui,node_payment_ui,node_success_ui toneAmber
class node_auth_api,node_pets_api,node_screening_api,node_adoption_api,node_payment_api,node_callback,node_db toneMint
class node_mailer,node_mpesa,node_smtp toneRose
class node_adopter,node_admin_actor toneIndigo
```

## Components

### React client

- [App routing](https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/App.jsx): `pet-project-react/src/App.jsx`
- [Auth context](https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/context/AuthContext.jsx): `pet-project-react/src/context/AuthContext.jsx`
- [Admin dashboard](https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/components/admin.jsx): `pet-project-react/src/components/admin.jsx`
- [API service](https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/services/api.js): `pet-project-react/src/services/api.js`

### Adoption workflow

- [Pet browsing](https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/components/petlist.jsx): `pet-project-react/src/components/petlist.jsx`
- [Pet details](https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/components/petdetails.jsx): `pet-project-react/src/components/petdetails.jsx`
- [Screening form](https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/components/screening.jsx): `pet-project-react/src/components/screening.jsx`
- [Payment screen](https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/components/payment.jsx): `pet-project-react/src/components/payment.jsx`
- [Adoption outcome](https://github.com/everlynewilly/finalproject/blob/main/pet-project-react/src/components/adoption-success.jsx): `pet-project-react/src/components/adoption-success.jsx`

### PHP API

- [Authentication API](https://github.com/everlynewilly/finalproject/tree/main/petprojectt/api/auth): `petprojectt/api/auth`
- [Pet endpoints](https://github.com/everlynewilly/finalproject/tree/main/petprojectt/api/pets): `petprojectt/api/pets`
- [Screening endpoints](https://github.com/everlynewilly/finalproject/tree/main/petprojectt/api/screening): `petprojectt/api/screening`
- [Adoption decisions](https://github.com/everlynewilly/finalproject/tree/main/petprojectt/adoption_requests): `petprojectt/adoption_requests`
- [Payment endpoints](https://github.com/everlynewilly/finalproject/tree/main/petprojectt/api/payment): `petprojectt/api/payment`
- [Payment callback](https://github.com/everlynewilly/finalproject/blob/main/petprojectt/payments/payment_callback.php): `petprojectt/payments/payment_callback.php`
- [MySQL database](https://github.com/everlynewilly/finalproject/blob/main/petprojectt/config/db.php): `petprojectt/config/db.php`

### External services

- [Email sender](https://github.com/everlynewilly/finalproject/blob/main/petprojectt/config/mailer.php): `petprojectt/config/mailer.php`
- [M-Pesa](https://github.com/everlynewilly/finalproject/blob/main/petprojectt/config/mpesa.php): `petprojectt/config/mpesa.php`
- **SMTP server**

### Other components

- **Adopter**
- **Administrator**

## Connections

- Adopter → App routing: uses
- Administrator → App routing: uses
- App routing → Auth context: provides session
- App routing → Pet browsing: routes to
- App routing → Pet details: routes to
- App routing → Screening form: routes to
- App routing → Payment screen: routes to
- App routing → Adoption outcome: routes to
- App routing → Admin dashboard: protects route
- Pet browsing → API service: loads pets
- Pet details → API service: loads pet
- Screening form → API service: submits form
- Admin dashboard → API service: manages records
- API service → Authentication API: requests auth
- API service → Pet endpoints: requests pets
- API service → Screening endpoints: requests screening
- API service → Payment endpoints: initiates payment
- Screening endpoints → MySQL database: writes requests
- Screening endpoints → Email sender: sends confirmation
- Admin dashboard → API service: approves or rejects
- Payment callback → MySQL database: updates payment and adoption
- Payment callback → Email sender: sends confirmation
- Payment endpoints → M-Pesa: initiates transaction
- Email sender → SMTP server: sends email