> For the complete documentation index, see [llms.txt](https://docs.nounspace.com/nounspace-alpha/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nounspace.com/nounspace-alpha/system-architecture.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.