Builder

<h1><strong>What is it this?</strong></h1><p>A component library— a set of lightly styled, reusable pieces of UI. These components make it easy both developers and non-technical users to create websites for their Nouns Builder DAO.</p><p>Starting a DAO is hard. Our goal is to reduce the barriers to entry by allowing DAO founders to keep using the website solutions they already know, while adding their Nounish DAO elements to the site.</p><p><strong>proposed by&nbsp;</strong><a href="https://twitter.com/ripe0x" rel="noopener noreferrer" target="_blank" style="color: var(--brand-pink) ;"><strong>ripe</strong></a> <strong>and&nbsp;</strong><a href="https://twitter.com/badublanc" rel="noopener noreferrer" target="_blank" style="color: var(--brand-pink) ;"><strong>badublanc</strong></a></p><p><br></p><p><strong><img src="https://www.onenouneverydayforever.wtf/component-selection-flow.png"></strong></p><h1><br></h1><h1>Who’s it for?</h1><p><strong>Two audiences</strong></p><ul><li><strong>Technical users:</strong>&nbsp;front-end developers building a Nounish DAO website can use the NPM package and easily add components to their preferred codebase.</li><li><strong>Non-technical users:</strong>&nbsp;anyone who wants to use a no-code site builder like Squarespace or Webflow can easily add dynamic Nounish DAO components to their website.</li></ul><h1>Why a component library?</h1><p>It gives DAO founders the elements they need on a website without locking them into a specific tool or platform. In addition to visual site builders this will support developers with a JS package that makes it fast and easy to pull in on-and-off-chain data from a DAO.</p><p>As veteran designers and engineers ourselves, we know how complex website builders can be. Products like Squarespace and Webflow have large teams of designers and engineers working to create customizable websites. There’s no need to reinvent the wheel here. Instead, let’s make it easy to add the components of a DAO website to any website you’d like.</p><h2>Benefits</h2><ul><li>Tailored to the specific needs of Nounish DAOs built on the Nouns Protocol.</li><li>Pre-written code that can be embedded into existing website builders like SquareSpace, Webflow, and Wordpress.</li><li>Or, developers can use the components as a base for building their own custom websites.</li></ul><p><br></p><h1>How it works</h1><h2>1 - JS Package</h2><p>NPM package allows devs to import components with light theming.</p><p><img src="https://www.onenouneverydayforever.wtf/component-selection-code.png"></p><h2>2 - Embed code in visual site builders</h2><p>Use our UI to enter your DAO address and we’ll generate an embed code for you to paste into a site builder.</p><p><img src="https://www.onenouneverydayforever.wtf/component-selection-flow-wide.png"></p><p><br></p><h2>WORKING PROTOTYPE DEMO</h2><p>Here's a demo of how easy it is to add an auction component via a visual site builder like Squarespace.</p><p><a href="https://aardvark-salmon-yjx5.squarespace.com/" rel="noopener noreferrer" target="_blank" style="color: var(--brand-pink) ;">See the embedded component on the demo site here</a></p><p><br></p><p><img src="https://www.onenouneverydayforever.wtf/component-add-live.gif"></p><p><br></p><h1>Components included</h1><ul><li>Auction</li><li>DAO proposals list</li><li>DAO proposal</li><li>Collection list</li><li>Members list</li><li>Individual NFT w/ details</li><li>Prop house rounds</li><li>Prop house props</li><li>Treasury</li></ul><p><img src="https://www.onenouneverydayforever.wtf/components-list.png"></p><h1>Team ⌐◨-◨</h1><p><a href="https://twitter.com/ripe0x" rel="noopener noreferrer" target="_blank" style="color: var(--brand-pink) ;"><strong>ripe</strong></a><strong>—</strong>&nbsp;Nounish builder, designer, and developer with over 15 years of experience creating digital products &amp; websites. Winner of multiple prop house rounds. A few of my Nounish contributions include:</p><ul><li><a href="https://nouns.wtf/explore" rel="noopener noreferrer" target="_blank" style="color: var(--brand-pink) ;">Nouns Explorer</a>: a visual exploration of the full Nouns collection on nouns.wtf.</li><li><a href="https://nounish.netlify.app/" rel="noopener noreferrer" target="_blank" style="color: var(--brand-pink) ;">Nounish CV</a>: a prototype of Nounish builder profiles (winner of prop house round)</li><li><a href="https://github.com/ripe0x/noggles.app" rel="noopener noreferrer" target="_blank" style="color: var(--brand-pink) ;">⌐◧-◧.app</a>: MacOS toolbar app to quickly copy unicode noggles to your clipboard</li><li><a href="https://www.nogs.wtf/" rel="noopener noreferrer" target="_blank" style="color: var(--brand-pink) ;">nogs.wtf</a><strong>:</strong>&nbsp;a Nounish identity system</li><li><a href="https://create.zora.co/collections/0xed975db5192ab41713f0080e7306e08188e53e7f" rel="noopener noreferrer" target="_blank" style="color: var(--brand-pink) ;">Rainbow Zorb Noggles</a>: a Nounish derivative of Rainbow Zorbs</li></ul><p><strong>badublanc —&nbsp;</strong>Nouncillor, Prop House winner, and the nounish builder behind&nbsp;<a href="https://cloudnouns.com/" rel="noopener noreferrer" target="_blank" style="color: var(--brand-pink) ;">CLOUDNOUNS</a>. In previous lives, I worked in strategy in fintech, led business intelligence in private equity, and built internal tooling at startups.</p><p>Feel free to ping me on Twitter or Discord to answer any questions.</p><ul><li>discord: badublanc.eth#6417</li><li>twitter:&nbsp;<a href="https://twitter.com/badublanc" rel="noopener noreferrer" target="_blank" style="color: var(--brand-pink) ;">@badublanc</a></li></ul>

0x655cb30c5e20019a70952825c40d965b45ec73b17b577b30febeda2f1f278967