SlpSoftware/aidlc-docs/features/react-frontend/construction/react-frontend-app/functional-design/business-logic-model.md

Business Logic Model — react-frontend-app

Overview

This unit's business logic is small and UI-centric: rendering static marketing content and managing the theme (red default / purple alternate) selection and persistence. There is no backend business logic in this iteration.

Process Flow: Page Load and Theme Resolution

graph TD
    start_load["Visitor loads the site"]
    read_storage["Read stored theme preference from localStorage"]
    check_stored["Stored preference found?"]
    use_stored["Use stored theme (red or purple)"]
    use_default["Use default theme: red"]
    apply_theme["Apply theme class/attribute to document root"]
    load_content["Load static content module (nav, hero, packages, steps, about, contact)"]
    init_query["Initialize QueryClientProvider and packages placeholder query"]
    render_page["Render page sections via TanStack Router index route"]

    start_load --> read_storage
    read_storage --> check_stored
    check_stored -->|"Yes"| use_stored
    check_stored -->|"No"| use_default
    use_stored --> apply_theme
    use_default --> apply_theme
    apply_theme --> load_content
    load_content --> init_query
    init_query --> render_page

    classDef process fill:#9ae6b4,stroke:#2f855a,stroke-width:1px,color:#000;
    classDef decision fill:#fbd38d,stroke:#92400e,stroke-width:1px,color:#000;
    classDef terminal fill:#63b3ed,stroke:#2b6cb0,stroke-width:1px,color:#000;

    class start_load,render_page terminal;
    class read_storage,use_stored,use_default,apply_theme,load_content,init_query process;
    class check_stored decision;

Text alternative: On load, the app reads a stored theme preference; if found it is used, otherwise red is used as default; the theme is applied to the document, static content is loaded, the query provider is initialized, then the page renders.

Process Flow: Theme Switch Interaction

graph TD
    click_toggle["Visitor clicks the theme toggle button in the nav"]
    determine_next["Determine next theme (red to purple, or purple to red)"]
    update_state["Update in-memory theme state (ThemeProvider context)"]
    persist_storage["Persist chosen theme to localStorage"]
    reapply_theme["Re-apply theme class/attribute to document root"]
    update_toggle["Update toggle button visual state and aria-pressed"]

    click_toggle --> determine_next
    determine_next --> update_state
    update_state --> persist_storage
    persist_storage --> reapply_theme
    reapply_theme --> update_toggle

    classDef process fill:#9ae6b4,stroke:#2f855a,stroke-width:1px,color:#000;
    classDef terminal fill:#63b3ed,stroke:#2b6cb0,stroke-width:1px,color:#000;

    class click_toggle terminal;
    class determine_next,update_state,persist_storage,reapply_theme,update_toggle process;

Text alternative: Clicking the toggle determines the other theme, updates in-memory state, persists it to localStorage, reapplies the theme to the document, and updates the toggle button's visual/accessible state.