Introduction

Gather around!

We are going to describe the story behind Co-x3's Digital Gardening Initiative! Get some popcorn and grab a chair. This is going to be a long one. Now, before we get into the meat of our adventure, we need to describe Co-x3 and a couple of terms for those new around here.

What is Co-x3?

Co-x3 is a non-profit community of co-creators and collaborators.

Our mission is to equip creatives, students, and second winders with knowledge to level up every day, tools to put their learning into action, and a community to never struggle alone.

Our community creates educational resources, tools, and events to empower creatives, students, and retirees who face barriers to personal/professional growth. We help them realize their potential, improve quality of life, and make positive impact.

We support members of our community by connecting them with mentors and peers to bring multiplayer to personal development and ensure they do not struggle alone. We celebrate wins together, share challenges, and find ways to be helpful on their growth journeys.

We’re building a global self-actualized community of co-creators and collaborators tackling global challenges and unleashing breakthroughs together.

What is a Digital Garden?

A Digital Garden is essentially a blog where Digital Gardening takes place. When compared with blogging, Digital Gardening is the complete opposite when compared to it in the general sense. Instead of taking weeks to publish an essay, all you need is a title, a sentence or two, and some categorical information. That’s it. You are developing your ideas over time and in public.

What is a Community Digital Garden?

A Community Digital Garden is a Digital Garden where multiple people participate in the submission of notes and essays. People are also able to work on the same piece. There usually is a moderation side of this as well.

This sounds like Wikipedia. How is a community digital garden different?

Benjamin makes the difference quite clear:

Benjamin Covington

"Wikipedia pages are limited to specific nouns and facts, leaving no room for creativity or dialogue. A community digital garden, on the other hand, is a vibrant and dynamic space where ideas can grow and flourish. It invites readers to participate and contribute their own thoughts and perspectives, rather than just consume information."

The initial premise behind this initiative

Conrad, the founder of Co-x3, started off this project with an implementation that used Obsidian, Gatsby, and Gatsby Garden. For reference, Gatsby Garden is a set of packages/libraries that help you create a digital garden using Gatsby.

This was his original goal for this project:

Conrad Lin

"I'm planning to open-source this so that people in the community can also add their notes to our ever-growing content library and to really help people level up in their lives and learn what we know and hopefully take some action on the things that we care about as well. It’s about being intentional in our lives and making work fun."

You can watch the entire livestream that he did here:

What if this was an app?

After this livestream, ideas started to bubble up about what this could potentially look like as an app.

Joshwin suggested the following idea:

Joshwin Greene

"Here's a possible approach on how we could develop the Co-x3 knowledge base: 1) We manage the contributions of the articles/notes via an Obsidian Vault and a GitHub repo. To keep things simple, people can create forks and submit PRs when they want to submit or update an article/note. 2) We create a backend that fetches the articles/notes from the GitHub repo. We may be able to use n8n for this. 3) We create a basic web app frontend that fetches and renders the articles/notes from the backend. GitHub has a rate limit. So, that's why I'm not suggesting that the frontend should fetch the articles/notes from the GitHub repo directly. 4) When it comes to commenting, we could use Disqus or an open-source alternative, like Cusdis ( https://github.com/djyde/cusdis ). 5) When it comes to liking articles/notes, we could use something like https://likebtn.com/en/. 6) As for seeing a visualization on how an article/note connects to other items, we could probably bring over the system that Gatsby Garden uses. - I feel like this approach would save us a lot of time and effort."

Ultimately, there were three MVPs (Minimum Viable Products) that we were considering:

(1) Content MVP - start pooling our notes together and create a repository

(2) System MVP - find a way to make a dynamic repository that spits out the content in a way that a front end can read

(3) Front End MVP - make it pretty

We would have our first official meeting about this project in the beginning of February 2022.

In the end, we decided to use the following technologies:

GitHub - We would create a repository where all of the notes and essays would be initially submitted and reviewed by moderators

n8n - When a note or essay or essay was approved and added to a specific folder in our GitHub repository, its contents and metadata would be pushed to a Supabase backend

Supabase - Our Supabase backend would serve as the data source for our community digital garden.

Locofy - We would use this tool to convert our designs in Figma to React. We would use the resulting code for the frontend of our community digital garden.

Some people might be wondering why we develop apps

Conrad Lin

"We all are constantly learning more about the world, and often only get to share our findings with our immediate friends and family. Worse still, most information is communicated via analogies and distilling down to first principles is difficult and uncommon. So, to tackle this, the Co-x3 Family are creating applications that make it easy to distill knowledge into first principles; building and sharing on what we know in a collaborative fashion."

Off to the Races! Let's get this built!

User Stories

Here’s a list of our MVP User Stories:

(1) As a reader, I want to be able to view the content that’s posted so that I can consume the posted knowledge.

(2) As a reader, I want see the edit history for content so that I can how an item has evolved over time.

(3) As a reader, I want to see the most recent posts so that I can see what has been newly created.

(4) As a reader, I want to see the all of the posts that have been written so that I can browse content that has been published.

Wireframes

Here are the initial wireframes that we put together:

Landing Page:

Content Page:

Mockups

Conrad converted our wireframes into mockups using Figma and added some much needed polish.

Here are a couple of previews of those mockups:

Locofy

Conrad met with the Locofy team during one of Co-x3’s livestreams and they guided him through the process to convert our Figma designs to React code using Locofy.

You can watch that livestream here:

n8n workflow

Here’s the n8n workflow that Joshwin put together:

How could we give this technology to other communities and how can we make this product super intuitive?

As things were coming together and we were choosing domain names, an interesting question was brought forward:

Conrad Lin

"I wonder how we could give this community digital gardening technology to other communities."

Additionally, while testing the process of submitting an item to our digital garden's repository on GitHub, we quickly realized that the number of steps to set things up for people, especially those new to tech, was honestly not acceptable.

The Third Iteration

With this iteration, it was time to go all in when it came to the user experience. So, we started with some user research.

User Research

We first asked ourselves what we wanted individually and then we asked our community for their feedback so that we could have a better picture of the features that should be developed first.

In the end, we were able to survey the community for their “Must Haves,” “Nice to Haves,” and “Delighters” for the digital gardening technology that we were building.

Benjamin created the Notion database that was used to survey our community.

Here were the Must Haves:

The Proposal that we went with

We were inspired by Wordpress and the successes that it had.

Based off this and the user research that we had done, Joshwin came up with a proposal on how this could become a reality:

The idea was that there would be a central space where users would be able to make submissions to personal and collaborative digital gardens. Collaborative digital gardens would be connected to the platform but be hosted by outside parties. Every piece on the “network” would be able to reference each other.

External communities would be able to use the Co-x3 Digital Garden’s codebase in order to create their own collaborative digital garden and connect it to the central space.

We decided to move forward with this approach and Joshwin said that he would create a small demo.

The Initial Demo

This is the demo that Joshwin put together. For reference, this demo made use of the Supastarter template, which is a SaaS (Software as a Service) starter template for Next.js and Supabase.

Note: The demo shows how you would submit an edit to a piece that you had already published. The demo doesn't include any audio.

Recognizing the Project Leader

Based on his contributions up to this point, Joshwin was recognized as the leader of this project going forward.

We need to talk about the non-profit that we are building!

Based on our past discussions and where things were heading, Joshwin and Conrad decided to meet up in San Francisco in order to talk about their thoughts regarding the governance structure of Co-x3 and how it could be the future of collaborative work.

It was at this meeting where Joshwin brought up the name for the central space / hub and the domain:

Name of the Hub: The Digital Gardening Collective

Domain: dgc.rocks

Joshwin Greene

"I wanted to focus on the community side of the hub. I took inspiration from the old television show that was called "Codename: Kids Next Door" and initially came up with "The Digital Gardening Corp." However, in order to make it sound a little less militaristic, it made more sense to use "Collective" instead of "Corp." Additionally, the DGC has a nice ring to it."

Joshwin Greene

"As for the domain…Digital Gardeners…We rock. Don’t we? 😎 💪 🤘"

Here's the livestream that Conrad and Joshwin did:

Laying the Foundation for this Project and our Projects Going Forward

Joshwin decided to explore our options when it came to the frontend for this project and our web-based projects going forward.

Joshwin Greene

"One of my goals for the Co-x3 Digital Garden is that the public should be able use it as a template in order to create their own community digital gardens. If someone is technically minded, I would like this to ideally be free."

Based on this perspective, it no longer made sense to use the Supastarter template based on its updated pricing. However, we highly recommend it for other projects, especially those where the code is completely proprietary.

Joshwin Greene

"I would like for our web-based projects to have a consistent tech stack so that we could all be speaking the same language. I also would like to select technologies that are sought out by employers for the aspiring software developers in the community. So, React and TypeScript are a must."

He decided to explore the use of RedwoodJS and see if it made sense for this project and for a boilerplate for our future web-based projects.

He mentioned the following quote that he found in a Hacker News post about RedwoodJS:

"…I like redwood for probably the same reasons that devs raised on ruby like ruby on rails. I get to keep using all the tech i’m comfortable with but the tooling is all preconfigured and the dev experience is smooth and optimized."

- cephalization (RedwoodJS 1.0)

In the end, RedwoodJS turned out to be quite the capable toolset for what we were trying to do. Plus, with our future collaborative development plans, it made sense for the eventual development pipeline that we would be creating.

He created a boilerplate using RedwoodJS, React, TypeScript, Supabase, Chakra UI, and a host of other technologies. This boilerplate was used for The Digital Gardening Collective and the Co-x3 Community Digital Garden.

Designing the App Icon for the Digital Gardening Collective

Besides showing some type of pen and some greenery to show that notes and essays were ever-growing, we really wanted to highlight the collaborative side of this product.

Ashley was able to make this a reality:

This is what she had in mind when she was designing it:

Ashley Crouch

"I really wanted to show the collaborative nature of the digital gardening collective, as well as, of course, the aspect of it being a garden that is ever-changing and ever-growing due to its individual contributors. It was also important to show that this is not a heavily curated space, unlike most other parts of the internet. I wanted to give a more sketchy feel to the icon to show that this is a place where you can bring those partial thoughts in to grow bigger later, either with the help of others or just from the individual's growth. I also really liked the idea of roots and branches of the plant going in all directions, like the variety of topics and ideas that each individual is pursuing in their own lives. Each of the feather pen 'leaves' are drawing the branches, expanding the knowledge tree individually, like we hope our users will do on this platform."

Launching the Invite-only Early Access Version

The Invite-only Early Access Version of The Digital Gardening Collective and the Co-x3 Community Digital Garden was officially launched on Tuesday, May 2nd.

On that same day, Joshwin gave a demo of both apps at the Annual Linking Your Thinking Conference, which was running from May 1st to May 5th.

Note: The intro for the demo begins at 26:19.

What's Next

In the meantime, we suggest that you sign up to the early access waitlist. We will be giving people access in waves.

Getting to the Public Early Access Version

The development team has been set. We should be done with the public early access version in three months. Now, we will be building this in public (#buildinpublic). What does this mean? Our goal will be to post an update every two weeks on social media and in our community on Sunday. If we have any extra updates, you may get an early update.

A word about sustainability

Since it is so important, here’s our message on the Digital Gardening Collective’s landing page about sustainability:

"The Digital Gardening Collective and the Co-x3 Community Digital Garden will be supported through the use of ads and sponsorships. More specifically, ads won't be shown on published pieces unless individual authors give us permission to do so. Other locations within both apps and in our newsletters will be fair game. However, our goal is to always ensure that the user experience takes absolute priority."

We don’t want to annoy our users with annual requests for donations. So, we believe ads and sponsorships are the answer.

In the end, we want the digital gardening community to be a big part of this initiative. As stated on the landing page for the Digital Gardening Collective, this initiative is being…

~ Developed for the Community; Developed by the Community ~

We hope you will join us.