@powerhousedao/academy 0.1.0-dev.0

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "svg.preview.background": "transparent"
+}

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+## 0.1.0-dev.0 (2025-05-24)
+
+### 🚀 Features
+
+- **academy:** added authorization docs ([470231bfd](https://github.com/powerhouse-inc/powerhouse/commit/470231bfd))
+
+### ❤️ Thank You
+
+- Frank

package/Dockerfile

@@ -0,0 +1,31 @@
+# syntax=docker/dockerfile:1
+
+# Stage 1: Base image.
+## Start with a base image containing NodeJS so we can build Docusaurus.
+FROM node:lts AS base
+## Disable colour output from yarn to make logs easier to read.
+ENV FORCE_COLOR=0
+## Enable corepack.
+RUN corepack enable
+## Set the working directory to `/opt/docusaurus`.
+WORKDIR /opt/docusaurus
+
+# Stage 2b: Production build mode.
+FROM base AS prod
+## Set the working directory to `/opt/docusaurus`.
+WORKDIR /opt/docusaurus
+## Copy over the source code.
+COPY . /opt/docusaurus/
+## Install dependencies with `--frozen-lockfile` to ensure reproducibility.
+RUN pnpm install --frozen-lockfile
+## Build the static site.
+RUN pnpm build
+
+# Stage 3a: Serve with `docusaurus serve`.
+FROM prod AS serve
+## Expose the port that Docusaurus will run on.
+ENV PORT=3000
+EXPOSE $PORT
+## Run the production server.
+ENTRYPOINT pnpm serve --host 0.0.0.0 --no-open --port $PORT
+

package/ProcFile

@@ -0,0 +1 @@
+web: npm run serve -- --port $PORT --host 0.0.0.0

package/README.md

@@ -0,0 +1,43 @@
+# Website
+
+This documentation website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+To contribute to the documentation please work on a feature branch in case of big refactors, and build & serve before pushing to the development branch. 
+Pushing from the dev branch to the main branch will trigger an auto deployment in Heroku for the staging deployment. 
+
+### Installation
+
+```
+$ npm install
+```
+
+### Local Development
+
+```
+$ npm run dev
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ npm run build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

package/blog/BeyondCommunication-ABlueprintForDevelopment.md

@@ -0,0 +1,88 @@
+---
+title: Beyond Communication - A Blueprint for Development
+description: GraphQL Schema’s as a common language for software design
+slug: Graphql-schema-as-a-common-language
+authors:
+  - name: Call me T. 
+    title: Product Manager at Powerhouse
+    image_url: https://avatars.githubusercontent.com/u/148560082?v=4
+    socials:
+      x: https://x.com/0xCallme_t
+tags: [Design thinking, Tooling, Product, GraphQL, Schema's]
+image: https://i.imgur.com/mErPwqL.png
+hide_table_of_contents: false
+---
+GraphQL Schema’s as a common language for software design, bridging the gaps between all stakeholders with the help of a single source of truth document model.
+
+<!-- truncate -->
+
+#### In software development, all to common, communication barriers between designers, developers, and non-technical stakeholders are a common cause of inefficiency. Misunderstandings lead to wasted effort, missed deadlines, and ultimately, a product that fails to meet its intended purpose. These "lost in translation" moments plague projects of all sizes, creating a gap between what stakeholders envision and what gets built.
+
+#### GraphQL, with its intuitive schema definition, offers a solution. Acting as a lingua franca—a common language—GraphQL bridges communication gaps, aligning stakeholders across disciplines and ensuring that everyone speaks the same language when discussing data and workflows.
+
+#### **GraphQL Schema as a Lingua Franca**
+
+#### At its core, a GraphQL schema is a structured representation of a system’s data: its types, relationships, and operations. Unlike traditional API documentation, GraphQL schemas are inherently interactive and precise, making them accessible as a single source of truth that aligns both technical and non-technical stakeholders.
+
+#### For non-technical contributors, schemas offer a clear, readable map of how data flows through a system. Business analysts, product managers, and designers can quickly grasp the relationships between data types and operations without needing to dive into code. “**For developers, schemas serve as a contract, reducing ambiguity during implementation**”. Queries and mutations clearly define how data can be fetched or modified, leaving little room for misinterpretation.
+
+#### 
+
+#### By bringing clarity to these conversations, GraphQL fosters collaboration within cross-functional teams and accelerates onboarding for new contributors.
+
+### **Beyond Communication: A Blueprint for Development**
+
+The utility of GraphQL schemas extends far beyond communication. They act as a blueprint that shapes every phase of the development lifecycle:
+
+* **Planning and Design**:  
+  * During the design phase, schemas enable teams to validate assumptions early. Data requirements and workflows can be reviewed collaboratively, ensuring alignment before development begins.  
+* **Implementation**:  
+  * Developers use schemas as a definitive source of truth, minimizing the need for rework caused by unclear specifications.  
+* **Testing and Maintenance**:  
+  * When the schema evolves, it highlights changes or inconsistencies, making it easier to adapt systems without breaking existing functionality.
+
+The result is a smoother development process, where every stakeholder operates with a shared understanding of the system’s architecture.
+
+### **GraphQL and CQRS: A Perfect Match**
+
+GraphQL's design pairs naturally with the Command Query Responsibility Segregation (CQRS) pattern, which separates read and write operations to improve scalability and performance.
+
+In a CQRS-driven architecture:
+
+* **Queries** retrieve data efficiently.  
+* **Mutations** handle data modifications.  
+* **Subscriptions** enable real-time updates.
+
+GraphQL’s separation of these operations ensures clarity and scalability, especially in distributed systems. Developers can optimize read and write models independently, leading to improved performance and maintainability. This structured approach also simplifies troubleshooting and ensures a smoother evolution of complex systems.
+
+### **GraphQL and TypeScript: A Dynamic Duo**
+
+GraphQL’s strong typing makes it a natural ally for TypeScript, a language known for its type safety and developer-friendly features. Together, they form a powerful combination that enhances developer experience and system reliability.
+
+* **Type Safety Across the Stack**:  
+  * Developers can auto-generate TypeScript types from GraphQL schemas, ensuring consistency between client and server. This reduces boilerplate code and eliminates many common runtime errors.  
+* **Improved Developer Productivity**:  
+  * With type safety built into both the API and the client code, developers can catch potential issues during development, saving time and reducing bugs.  
+* **Seamless Front-End Integrations**:  
+  * For front-end teams, GraphQL and TypeScript streamline the process of building data-driven applications, ensuring that APIs and components stay in sync.
+
+This synergy results in cleaner, more reliable code and a significantly improved development experience.
+
+### **Efficiency Gains from GraphQL**
+
+Beyond fostering better communication and aligning stakeholders, GraphQL drives efficiency in several key ways:
+
+* **Streamlined API Development**:  
+  * With its declarative queries, GraphQL eliminates over-fetching and under-fetching of data, allowing front-end teams to request only what they need.  
+* **Empowered Non-Technical Contributors**:  
+  * The interactive nature of GraphQL schemas makes them accessible to non-technical stakeholders, enabling them to explore APIs independently and contribute more effectively to design discussions. The ‘lingua franca’ characteristic now truly starts to live up to its promises as designer or business analysts now can interact with the base schema and steer and discuss potential solutions together with the development team.   
+* **Real-Time Introspection**:  
+  * Tools like GraphQL Playground allow teams to inspect and test APIs dynamically, making development and debugging faster and more collaborative.
+
+These features combine to create a more agile, responsive development environment, where teams can adapt quickly to changing requirements.
+
+### **A Shared Vision Through GraphQL**
+
+The success of any software project hinges on clear communication and shared understanding. GraphQL schemas provide the common language that teams need to align around a unified vision. From clarifying data relationships to supporting scalable architectures, GraphQL empowers organizations to overcome the "lost in translation" problem and focus on what truly matters: building great products.
+
+For teams seeking to improve collaboration, efficiency, and scalability, GraphQL is more than a tool—it’s a framework for shared success,

package/blog/TheChallengeOfChange.md

@@ -0,0 +1,86 @@
+---
+title: The Challenge of Change
+description: Rapid Application Development with document models. 
+slug: Rapid-Application-Development-with-document-models.
+authors:
+  - name: Call me T. 
+    title: Product Manager at Powerhouse
+    image_url: https://avatars.githubusercontent.com/u/148560082?v=4
+    socials:
+      x: https://x.com/0xCallme_t
+tags: [Dao, Tooling]
+image: https://i.imgur.com/mErPwqL.png
+hide_table_of_contents: false
+---
+### **The Challenge of Change**
+
+The pace of innovation is relentless. Organizations today find themselves in a race to adapt to new technologies, shifting consumer demands, and evolving or opaque regulations. Yet, the traditional methods of building and maintaining software systems often lag behind the speed of change, creating bottlenecks that stifle growth and innovation.
+
+The pace of innovation often outstrips an organization’s ability to adapt, keep up with rapidly changing requirements, shifting goals, and technological advancements.
+
+<!-- truncate -->
+
+Across many industries, this comes down to a familiar struggle of common trade-offs in product and solution development. 
+
+**\- Speed vs. Accuracy:** The balance between haste or precision  
+**\- Customizability vs. Scalability:** Meeting specific needs or relentless standardisation 
+
+As businesses push to innovate, they face a crucial question: how can they accelerate development without sacrificing quality or flexibility?
+
+---
+
+### **The Power of Accelerated Development**
+
+![Rapid Application Development Processn](./images/RAD.png)
+
+The answer lies in embracing methodologies that prioritize agility and adaptability. Rapid Application Development (RAD) represents a fundamental shift in how organizations approach software and workflow creation. It is not just a faster way to build systems—it’s a way to empower teams to iterate, test, and refine their ideas with unprecedented efficiency.
+
+Key benefits of RAD include:
+
+* **Rapid Prototyping**: Organizations can quickly test ideas without committing to large-scale development, allowing for faster feedback and iteration.  
+* **Iterative Development**: Instead of delivering a finished product all at once, RAD emphasizes incremental improvements, reducing the risk of misaligned expectations.  
+* **Adaptability to Change**: By designing with flexibility in mind, RAD allows organizations to pivot and respond to new demands or challenges with ease.
+
+These principles have been widely embraced in industries ranging from DAO’s, incubators, tech startups to multinational corporations (in the case of the latter often with the help of a high ticket consultant). Other methodologies from adjacent domains of RAD, that you might be more familiar with include: 
+
+* **Lean Start-up Methodology**: Focussing on finding product market fit early with a minimum viable product through a build, measure, learn cycle.   
+* **Pre-totyping:** A method by Google's first engineering director focused on validating that you are building the ‘right it’ before you ‘build it’ right with the help of smoke tests or mock-ups.   
+* **Design-thinking:** Where designers & developers go through non-linear, iterative processes of discovery, definition, development & delivery of their ideas with the help of prototyping together with end-users.
+
+
+![Iteration](./images/Iteration.png)
+*Figure 1: Notice how  Design thinking, Lean Startup Methodology and Rapid Application Development all rely on tooling that put rapid iteration at the center of the methodology? It remains crucial to select the right tool with the correct prototype fidelity at any of the stages these methodologies prescribe*
+
+---
+
+### **Why Traditional Methods Fall Short**
+
+Despite their success in simpler times, traditional development methodologies are currently often falling short in today’s dynamic environments.
+
+* **Long Lead Times**: Developing complex systems from scratch can take months or even years, by which time business requirements may have shifted.  
+* **Limited Customization**: Off-the-shelf solutions may be fast to deploy but rarely align perfectly with an organization’s unique workflows.  
+* **High Costs of Change**: Adjusting systems mid-development often incurs significant costs and delays, making organizations hesitant to pivot.
+
+To overcome these challenges, businesses need a new approach—one that combines speed, flexibility, and precision.
+
+---
+
+### **How Powerhouse Bridges the Gap**
+
+Powerhouse is proposing a framework built to address these very challenges, offering a platform that marries the speed of RAD with the depth of customization modern organizations demand.
+
+At the core of Powerhouse’s approach is its **document model-driven architecture**, a GraphQL schema based foundation that reimagines how data, workflows, and processes are structured. This architecture enables organizations to:
+
+* **Capture Data Effectively**: Modular document models allow organizations to define and adapt workflows with higher accuracy.   
+* **Automate Workflows**: With tools to streamline even the most complex processes, so organizations can focus on innovation instead of repetitive tasks.  
+* **Iterate and Evolve Rapidly**: Modular, reusable components reduce development times, enabling organizations to adapt to their most pressing challenges and changes. 
+
+---
+
+### **From a front-end developers perspective**
+
+>“The coolest part is being able to plug into any document model and start building UI components for it without the hassle of managing a 'backend' or 'state management' for the components. All front-end devs use and love redux, the event driven architecture these document models are using. But the fact that as a front end dev, you don't have to set up any of it, and can just plug into the underlying framework saves time. It allows me to focus on my actual tasks \- building awesome UI components and experiences. I could start thinking of the same document model but with a 1000 different UI’s depending on the user's specific needs and preferences. Like swapping skins in my favorite video game”
+
+The rapid application development process we’re setting up, allows us to move quicker from initial problem definition to potential prototype opens up time for designers and developers to actually test and iterate on their imagined solution. 
+
+By prioritizing rapid, iterative development, Powerhouse aims to empower organizations to innovate faster, adapt more seamlessly, and achieve sustainable growth in even the most challenging environments.

package/docs/academy/01-GetStarted/00-GetStarted.mdx

@@ -0,0 +1,181 @@
+---
+title: Get Started
+sidebar_label: Get Started
+sidebar_position: 1
+---
+
+import React from 'react';
+import styles from './styles.module.css';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
+<div className={styles.learningPath}>
+  {/* Get Started Card - Full Width */}
+  <div className={`${styles.pathCard} ${styles.fullWidth}`}>
+    <div className={styles.cardHeader} style={{ justifyContent: 'center' }}>
+      <div className={styles.cardIconWrapper}>
+        <img src="/img/academy/icons/Flash.svg" alt="" />
+      </div>
+      <h3 className="card-title">Get started</h3>
+    </div>
+    <div className={styles.cardContent}>
+      <div style={{ maxWidth: '960px', margin: '0 auto', textAlign: 'center' }}>
+        <div style={{ marginBottom: '1.5rem' }}>
+          <p style={{ fontSize: '1.1rem', marginBottom: '1rem' }}><strong>Welcome to Powerhouse!</strong></p>
+          <p style={{ lineHeight: '1.6', color: '#444' }}>As a developer, you're about to dive into a <strong>unique ecosystem built to empower decentralized organizations</strong>. Powerhouse provides the software, infrastructure, and frameworks that enable scalable network organizations to operate efficiently.</p>
+        </div>
+        <div style={{ margin: '20px 0', textAlign: 'center' }}>
+          <iframe
+            src="https://drive.google.com/file/d/17dDKy-hQeI4ZlLiUZ4xhnXL4bDhJB0N-/preview"
+            frameBorder="0"
+            allow="autoplay; fullscreen"
+            allowFullScreen
+            title="Powerhouse Introduction Video"
+            style={{
+              width: '100%', // Take full width of container
+              maxWidth: '960px', // Max width like the container
+              aspectRatio: '16 / 9', // Maintain aspect ratio
+              borderRadius: '8px',
+              display: 'block', // Ensure it behaves like a block element
+              margin: '0 auto' // Center it if container allows
+            }}
+          ></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  {/* Create Cards - One in each column */}
+  <div className={styles.pathCard}>
+    <div className={styles.cardHeader}>
+      <div className={styles.cardIconWrapper}>
+        <img src="/img/academy/icons/Book.svg" alt="" />
+      </div>
+      <h3 className="card-title">Book of Powerhouse</h3>
+    </div>
+    <div className={styles.cardContent}>
+      <a href="/docs/bookofpowerhouse/Overview" className="path-button">The Vision of Powerhouse</a>
+    </div>
+  </div>
+
+  <div className={styles.pathCard} style={{ border: '1px solid #4FC86F' }}>
+    <div className={styles.cardHeader}>
+      <div className={styles.cardIconWrapper}>
+        <img src="/img/academy/icons/Create.svg" alt="" />
+      </div>
+      <h3 className="card-title">Create</h3>
+    </div>
+    <div className={styles.cardContent}>
+      <a href="/docs/academy/GetStarted/ToDoList/CreateNewPowerhouseProject" className="path-button">Build a Todo-list Document Model</a>
+    </div>
+  </div>
+
+  <div className={styles.pathCard}>
+    <div className={styles.cardHeader}>
+      <div className={styles.cardIconWrapper}>
+        <img src="/img/academy/icons/Advanced.svg" alt="" />
+      </div>
+      <h3 className="card-title">Document Model Theory</h3>
+    </div>
+    <div className={styles.cardContent}>
+      <a href="/docs/academy/GetStarted/DocumentModelTheory/WhatIsADocumentModel" className="path-button">Deep Dive into Document Modelling</a>
+    </div>
+  </div>
+
+  {/* Left Column Card with 2 buttons */}
+  <div className={styles.pathCard} style={{ border: '1px solid #4FC86F' }}>
+    <div className={styles.cardHeader}>
+      <div className={styles.cardIconWrapper}>
+        <img src="/img/academy/icons/Editor.svg" alt="" />
+      </div>
+      <h3 className="card-title">Build User Experiences</h3>
+    </div>
+    <div className={styles.cardContent}>
+      <a href="/docs/academy/GetStarted/ToDoList/BuildToDoListEditor" className="path-button">Building a Todo-list Editor</a>
+      <a href="/docs/academy/BuildingUserExperiences/BuildingBeautifulDocumentEditors" className="path-button">Building Beautiful Document Editors</a>
+      <a href="/docs/academy/AdvancedTutorial/BuildingUserExperiences/BuildingADriveExplorer" className="path-button">Building Custom Drive Explorers</a>
+    </div>
+  </div>
+
+  {/* Middle column with Union.svg */}
+  <div className={styles.middleColumn} style={{ 
+    display: 'flex', 
+    justifyContent: 'center', 
+    alignItems: 'flex-start', 
+    paddingTop: '-20px',
+    position: 'relative'
+  }}>
+    <img src="/img/Union.svg" alt="Powerhouse Union" width="250" />
+    <div style={{ 
+      position: 'absolute',
+      top: '18px',
+      backgroundColor: 'white', 
+      padding: '8px 16px', 
+      borderRadius: '8px',
+      textAlign: 'center',
+      zIndex: 2,
+    }}>
+      <h3 className="card-title" style={{ margin: 0 }}>Builder Track</h3>
+    </div>
+  </div>
+
+  {/* Right Column Card with 3 buttons */}
+  <div className={styles.pathCard} style={{ border: '1px solid #4FC86F' }}>
+    <div className={styles.cardHeader}>
+      <div className={styles.cardIconWrapper}>
+        <img src="/img/academy/icons/Data.svg" alt="" />
+      </div>
+      <h3 className="card-title">Work with Data</h3>
+    </div>
+    <div className={styles.cardContent}>
+      <a href="//docs/academy/AdvancedTutorial/WorkWithData/ReadingAndWritingThroughTheAPI" className="path-button">Reading & Writing through the API</a>
+      <a href="/docs/academy/AdvancedTutorial/WorkWithData/WorkingWithSubgraphs" className="path-button">Create your own Subgraph</a>
+      <a href="/docs/academy/WorkWithData/Analytics Engine/intro" className="path-button">Using the Analytics Engine</a>
+    </div>
+  </div>
+
+  {/* Launch Card - Full Width with 3 column buttons */}
+  <div className={`${styles.pathCard} ${styles.fullWidth}`}>
+    <div className={styles.cardHeader} style={{ justifyContent: 'center' }}>
+      <div className={styles.cardIconWrapper}>
+        <img src="/img/academy/icons/Launch.svg" alt="" />
+      </div>
+      <h3 className="card-title">Launch</h3>
+    </div>
+    <div className={styles.cardContent}>
+      <div className={styles.buttonContainer}>
+        <a href="/docs/academy/AdvancedTutorial/Launch/PublishYourProject" className="path-button">Package & Publish</a>
+        <a href="/docs/academy/Launch/LaunchYourBackend" className="path-button">Launch Back-end</a>
+        <a href="/docs/academy/Launch/LaunchYourFrontend" className="path-button">Launch Front-end</a>
+      </div>
+    </div>
+  </div>
+
+  {/* Cookbook Card - Left Column */}
+  <div className={styles.pathCard}>
+    <div className={styles.cardHeader}>
+      <div className={styles.cardIconWrapper}>
+        <img src="/img/academy/icons/Cookbook.svg" alt="" />
+      </div>
+      <h3 className="card-title">Cookbook</h3>
+    </div>
+    <div className={styles.cardContent}>
+      <a href="/docs/academy/Cookbook" className="path-button">Powerhouse Recipes</a>
+    </div>
+  </div>
+
+  {/* Empty middle column */}
+  <div></div>
+
+  {/* Advanced Topics Card - Right Column */}
+  <div className={styles.pathCard}>
+    <div className={styles.cardHeader}>
+      <div className={styles.cardIconWrapper}>
+        <img src="/img/academy/icons/Advanced.svg" alt="" />
+      </div>
+      <h3 className="card-title">Advanced Topics</h3>
+    </div>
+    <div className={styles.cardContent}>
+      <a href="/docs/academy/Architecture/PowerhouseArchitecture" className="path-button">Learn More</a>
+    </div>
+  </div>
+</div>

package/docs/academy/01-GetStarted/01_InstallDemoPackage.md

@@ -0,0 +1,38 @@
+# Install the Demo Package
+
+:::tip
+To give you a quick idea of how the Powerhouse ecosystem operates on document models and packages, why don't you try installing a package?   
+
+Let's get started by installing the Powerhouse command-line tool `ph-cmd` and then using it to install a pre-built demo package with document models & editors. 
+:::
+
+## Powerhouse CLI
+
+You'll use the Powerhouse CLI to launch a local environment with a "Contributor Billing" package. This package demonstrates how you might track and bill for contributions in a project.
+
+### Step 1: Install `ph-cmd`
+
+First, you need the Powerhouse command-line interface. Open your terminal and run the installation command :
+
+```bash
+pnpm install -g ph-cmd
+```
+
+Verify the installation:
+
+```bash
+ph-cmd --version
+```                                                   
+
+### Step 2: Install the Contributor Billing Package
+
+Now, use `ph` to install the demo package into a globals project.
+
+```bash
+# Install the package
+ph install contributor-billing
+```
+
+This command downloads and sets up the Contributor Billing package, making its features available in your Powerhouse environment.
+
+You've now successfully installed `ph-cmd` and added your first package! To run the package locally in Connect, our collaboration & contributor app, you run the `ph connect` command. 

package/docs/academy/01-GetStarted/02-ToDoList/01-CreateNewPowerhouseProject.md

@@ -0,0 +1,97 @@
+# Create a Powerhouse Project
+
+## Overview
+This tutorial will guide you through creating a new 'Powerhouse project', which primarily consists of a document model and its editor. You'll be using Connect locally, known as 'Studio mode'.
+
+## Prerequisites
+- Powerhouse CLI installed: `pnpm install -g ph-cmd`
+- node.js 22 and pnpm installed
+- Visual Studio Code (or your preferred IDE)
+- Terminal/Command Prompt access
+
+## Quick Start
+Create a new Powerhouse project with a single command:
+```bash
+ph init
+```
+<details>
+<summary> How to make use of different branches? </summary>
+
+When installing or using the Powerhouse CLI commands you are able to make use of the dev & staging branches. These branches contain more experimental features then the latest stable release the PH CLI uses by default. They can be used to get access to a bugfix or features under development.
+
+| Command | Description |
+|---------|-------------|
+| **pnpm install -g ph-cmd** | Install latest stable version |
+| **pnpm install -g ph-cmd@dev** | Install development version |
+| **pnpm install -g ph-cmd@staging** | Install staging version |
+| **ph init** | Use latest stable version of the boilerplate |
+| **ph init --dev** | Use development version of the boilerplate |
+| **ph init --staging** | Use staging version of the boilerplate |
+| **ph use** | Switch all dependencies to latest production versions |
+| **ph use dev** | Switch all dependencies to development versions |
+| **ph use prod** | Switch all dependencies to production versions |
+
+Please be aware that these versions can contain bugs and experimental features that aren't fully tested.
+</details>
+
+## Before You Begin
+1. Open your terminal (either your system terminal or VS Code's integrated terminal)
+2. Navigate to your desired project directory using:
+
+   ```bash
+   cd your-directory
+   ```
+3. Ensure you're in the correct directory before running the `ph init` command
+
+
+In the terminal, you will be asked to enter the project name. Fill in the project name and press Enter.
+
+```bash
+you@yourmachine:~/Powerhouse$ ph init
+
+? What is the project name? ‣ <yourprojectname>
+```	
+
+Once the project is created, you will see the following output:
+
+```bash
+Initialized empty Git repository in /Users/yourmachine/<yourprojectname>/.git/
+The installation is done! 
+```
+
+Navigate to the newly created project directory:
+
+```bash
+cd <yourprojectname>
+```
+
+Once you are in the project directory, you can run the `ph connect` command to instantiate a local version of the Connect application to start building your document model.
+
+Run the following command to start the Connect application:
+
+```bash
+ph connect
+```
+
+The Connect application will start and you will see the following output:
+
+```bash
+  ➜  Local:   http://localhost:3000/
+  ➜  Network: http://192.168.5.110:3000/
+  ➜  press h + enter to show help
+```
+
+A new browser window will open and you will see the Connect application. If it doesn't open automatically, you can open it manually by navigating to `http://localhost:3000/` in your browser.
+
+You will see your local drive and a button to create a new drive. 
+
+:::tip
+A drive is a folder to store and organize your documents in. Powerhouse offers the ability to build customized 'Drive Apps' for your documents. Think of a Drive-App as a specialized lens— it offers **different ways to visualize, organize, and interact with** the data stored within a drive, making it more intuitive and efficient for specific use cases. To learn more, visit [Building A Drive App](/docs/academy/AdvancedTutorial/BuildingUserExperiences/BuildingADriveExplorer)
+:::
+
+Move into your local drive. 
+Create a new document model by clicking on the `DocumentModel` button by the "New Document" section in the bottom. 
+
+If you followed the steps correctly, you should have an empty document model created.
+
+In the next tutorials, you will learn how to design your document model and export it to be later used in your Powerhouse project.