# System Architecture

Nounspace follows the MVC (Model-View-Controller) architecture and Atomic Design principles to structure our project into modular reusable components. 

Initially Nounspace will leverage Neynar’s API, Supabase and IPFS storage, but in the future may decide to maintain its own Farcaster Node infrastructure, storage, and/or indexing layers. Nounspace Fidgets and other native functionality requiring blockchain node infra will utilize Alchemy’s API.

### Current Flow

\[ *As of 5/13/2024* ]

| <p><a data-footnote-ref href="#user-content-fn-1"><strong>Homebase Page</strong></a></p><p>The Homebase page handles switching the Edit Mode on and off.</p><p> </p><p>Passes which Mode it is in, the SpaceConfig and the SaveConfig on to the <a data-footnote-ref href="#user-content-fn-2">Space Template</a>.</p><p></p><p>↓ </p> |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

| <p><a data-footnote-ref href="#user-content-fn-2"><strong>Space Template</strong></a><br>The Space Template handles saving any layout changes to the SaveConfig. It also unpacks the SpaceConfig to extract the FidgetConfig from it. <br></p><p>Passes on the FidgetConfigs as well as the current Mode to the selected LayoutFidget. </p><p><br>↓</p> |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

| <p><a data-footnote-ref href="#user-content-fn-3"><strong>Layout Fidget</strong></a></p><p>The Layout Fidget generates a GridConfig from the LayoutConfig and the current Mode as well as a set of GridItems from the FidgetConfigs.</p><p></p><p>Passes the GridConfig and the GridItems on to the ReactGridLayout.</p><p><br>↓</p> |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |

| <p><strong>React Grid Layout</strong></p><p>The React Grid Layout handles visually arranging and sizing the Fidgets as well as the editing functionality. </p> |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------- |

### Component Architecture

"Complete" [Fidgets](/nounspace-alpha/fidgets.md) act as Controllers linking the following subcomponents:

* **UI-Fidgets** which act as Views. \
  Functionally just React Components that receive and display data.
* **Data-Fidgets** which act as Models. \
  An API layer providing access to specific data sources/streams.
* **Algo-Fidgets** (optional)\
  Reusable and configurable methods that define how Fidgets to access data.

[^1]: .../src/pages/homebase/index.tsx

[^2]: .../src/common/ui/templates/Space.tsx

[^3]: .../src/fidgets/layout/Grid.tsx


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nounspace.com/nounspace-alpha/system-architecture.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.