# Design Philosophy of Allo Starter Kit

#### tldr;
- Patterns and nuances emerge from iteration
- Consistent interfaces and patterns in code and design create a shared language of how we build
- Battle-tested and well-documented tools directs focus to building value

#### TODO
- Architecture overview
- API Interface
- Adapters (eg. AlloIndexer, Allo2)
- These describe how data is fetched and contracts called
- Hooks
- Used to call API (query data, call Allo contract)
- Components
- Visual representation of data
- Interactivity via forms and buttons
- Getting Started Tutorial
- create app
- install @allo/kit
- simple DirectGrants app
- Extending functionality
- Allo Strategies
- Project Registries

### Introduction
In "Atomic Habits", there's an example of a photography class where the teacher divided class into two groups: one tasked with creating a single, technically perfect photograph, and the other with producing as many photos as possible.

The experiment revealed that the second group, which emphasized quantity and experimentation, ultimately produced better quality work, highlighting the value of iterative learning and creative risk-taking.

### Background
Over the past year I have worked on several funding platforms: Grants Stack, Optimism Round 3, EasyRPGF, and Optimism Round 4. They all share many similarities:
- Users connect their Web3 wallet
- Projects can be explored via a grid, often with search and filter
- A page with more information about the project
- Allocating votes or donations to Projects
- Grantee can create application for their project
- Round admin functionality such as creating and updating a round
- Distribution of funds to projects

Despite their common ground, each platform has nuances that set them apart, such as visual style and slight variations in user flows when managing rounds or supporting projects.

### Components & Patterns

When building the same or similar things multiple times, patterns begin to emerge. We start to identify common elements and recognize the nuances. This helps us understand the shared aspects and how the subtle differences can be expressed.

Discovering these similarities and nuances is important because we dont want to just rebuild components, we want to build something that can be expressed as any of the nuances in the component.

As mentioned above, there are these larger components or modules that web3 capital allocation platforms are built with:
- ConnectWallet
- DiscoverProjects
- ProjectDetails
- Allocation
- ProjectApplicationForm
- AdminCreateRound
- Distribution

#### Design & Development Alignment
We have recently started to experiment on aligning Design and Development by introducing a component library called ShadcnUI. It comes with React and Figma components and enable us to drag and drop components in designs as if they were Lego bricks. This approach has several benefits:
- Components are battle-tested and well-documented meaning we don't need to spend time on testing, documenting, maintaining, and learning them. Testing and documentation is crowdsourced because ShadcnUI is open-source and learning is easy because it is built on industry-standard TailwindCSS.
- Same interface for design and development means if we change a component in Figma, this change can easily be changed in code. There is flexibility and customizability yet still maintains a common language.

I have written more about this here: https://hackmd.io/@carlb/rk8VgvxQ0

#### Patterns in codebases
Similarly, patterns exist within codebases. For example, there are many ways to fetch data in an application, either built from scratch or using third-party libraries.

While it might seem simple to call an API and store the returned data as state. But we want to persist state when navigating between pages so we don't show a loading spinner every time. And creating new projects should upate the state of all the listed projects to show the newly added one. We want to filter and search the list of projects and we want to cache this in a smart way so we don't call the API on every key-press or with the same query we have already fetched. We also want to have an interface were all of this is done in a consistent way across the codebase.

There are tools that helps us do this in a consistent way with great documentation for how.

By aligning on data fetching and component structures, we create a shared language for how we build, resulting in clean, simple, and easy-to-read code and making it easier to onboard developers to new projects.

Tools empower us to build faster with higher quality. We're no longer using jQuery or Photoshop for a reason. Let's find the best tools of today, learn them, and use them.

### Inspiration for Allo Starter Kit

#### Clerk

> Need more than just a sign-in box? Clerk is a complete suite of embeddable UIs, flexible APIs, and admin dashboards to authenticate and manage your users.

Building authentication flows can be complex and takes time and effort. Clerk provides ready-made components for the most common use-cases.

https://clerk.com/docs/components/overview

#### Lens Protocol

> A React Native UI kit for Lens Protocol. Get started building with as little as 2 lines of code. Mix and match components to supercharge your mobile development workflow.

https://github.com/lens-protocol/react-native-lens-ui-kit