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 ]

The Homebase page handles switching the Edit Mode on and off. Passes which Mode it is in, the SpaceConfig and the SaveConfig on to the . ↓

The Space Template handles saving any layout changes to the SaveConfig. It also unpacks the SpaceConfig to extract the FidgetConfig from it. Passes on the FidgetConfigs as well as the current Mode to the selected LayoutFidget. ↓

The Layout Fidget generates a GridConfig from the LayoutConfig and the current Mode as well as a set of GridItems from the FidgetConfigs. Passes the GridConfig and the GridItems on to the ReactGridLayout. ↓

React Grid Layout The React Grid Layout handles visually arranging and sizing the Fidgets as well as the editing functionality.

Component Architecture

"Complete" Fidgets 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.