feat: new documentation (#4735)

docs/development/contribution/contribution.mdx

@@ -0,0 +1,43 @@
+---
+title: "Contributing to Formbricks 🤗"
+description: "How to contribute to Formbricks"
+icon: "code"
+---
+
+We’re excited that you want to contribute to Formbricks! There are many ways to help, including reporting issues, fixing bugs, adding new features, or improving documentation.
+
+#### How to Contribute
+
+- **Issues:** Found a bug? Facing deployment problems? Have user feedback? Report an issue for the fastest response.
+
+- **Feature Requests:** Have an idea? Open an issue, tag it as an **Enhancement**, and clearly describe the issue you're solving.
+
+- **Pull Requests (PRs):** Fork the repo, make your changes, and submit a PR.
+
+  - For small fixes, go ahead!
+
+  - For bigger features, please discuss them with us first to ensure they align with our roadmap.
+
+#### Talk to Us First
+
+We highly recommend engaging with us on [**GitHub Discussions**](https://github.com/formbricks/formbricks/discussions) before submitting contributions.
+This helps improve the chances of your PR being accepted while avoiding unnecessary work.
+
+#### Contributor License Agreement (CLA)
+
+To keep Formbricks sustainable, we require a **CLA** from all contributors.
+
+Once you open a PR, our **CLA bot** will prompt you to sign the agreement. We can only merge contributions after the CLA is signed.
+
+#### Setting Up Your Development Environment
+
+You can set up your environment using:
+
+- [**Gitpod**](/development/local-setup/gitpod)
+
+- [**GitHub Codespaces**](/development/local-setup/github-codespaces)
+
+- [**Local Machine Setup**](/development/local-setup)
+
+For junior developers, **Gitpod or GitHub Codespaces** are recommended as they allow you to start coding in minutes.
+

docs/development/local-setup/github-codespaces.mdx

@@ -0,0 +1,55 @@
+---
+title: GitHub Codespaces
+description: How to set up Formbricks in a GitHub Codespaces environment
+icon: "github"
+---
+
+### GitHub Codespaces Setup
+
+<Info>
+  This guide outlines how to set up Formbricks in a **GitHub Codespaces** environment.
+</Info>
+
+**Requirements:**
+
+- A GitHub Codespace that has support for Node.JS, pnpm, and Docker.
+
+**Steps:**
+
+1. **Open your repository in GitHub Codespaces. If needed, clone the repository:**
+    ```bash
+    git clone https://github.com/formbricks/formbricks && cd formbricks
+    ```
+
+2. **Setup NodeJS with nvm (if not already configured):**
+    ```bash
+    nvm install && nvm use
+    ```
+
+3. **Install the dependencies:**
+    ```bash
+    pnpm install
+    ```
+
+4. **Create a `.env` file from the template:**
+    ```bash
+    cp .env.example .env
+    ```
+
+5. **Generate & set the required secrets:**
+    ```bash
+    sed -i '/^ENCRYPTION_KEY=/c\ENCRYPTION_KEY='$(openssl rand -hex 32) .env
+    sed -i '/^NEXTAUTH_SECRET=/c\NEXTAUTH_SECRET='$(openssl rand -hex 32) .env
+    sed -i '/^CRON_SECRET=/c\CRON_SECRET='$(openssl rand -hex 32) .env
+    ```
+
+6. **Launch the development setup:**
+    ```bash
+    pnpm go
+    ```
+
+Use the Codespaces port forwarding to access Formbricks at [http://localhost:3000](http://localhost:3000).
+
+<Tip>
+  Make sure your Codespaces port configuration is set to allow access to the app.
+</Tip> 

docs/development/local-setup/gitpod.mdx

@@ -0,0 +1,55 @@
+---
+title: Gitpod
+description: How to set up Formbricks in a Gitpod workspace
+icon: "code"
+---
+
+### Gitpod Setup
+
+<Info>
+  This guide explains how to set up Formbricks in a **Gitpod** workspace.
+</Info>
+
+**Requirements:**
+
+- A Gitpod workspace with Node.JS, pnpm, and Docker support.
+
+**Steps:**
+
+1. **Open the repository in Gitpod. The workspace typically clones the repo automatically. If not:**
+    ```bash
+    git clone https://github.com/formbricks/formbricks && cd formbricks
+    ```
+
+2. **Setup NodeJS with nvm:**
+    ```bash
+    nvm install && nvm use
+    ```
+
+3. **Install dependencies:**
+    ```bash
+    pnpm install
+    ```
+
+4. **Create a `.env` file:**
+    ```bash
+    cp .env.example .env
+    ```
+
+5. **Generate & set secret values:**
+    ```bash
+    sed -i '/^ENCRYPTION_KEY=/c\ENCRYPTION_KEY='$(openssl rand -hex 32) .env
+    sed -i '/^NEXTAUTH_SECRET=/c\NEXTAUTH_SECRET='$(openssl rand -hex 32) .env
+    sed -i '/^CRON_SECRET=/c\CRON_SECRET='$(openssl rand -hex 32) .env
+    ```
+
+6. **Run the development setup:**
+    ```bash
+    pnpm go
+    ```
+
+Access the running app via the forwarded port (typically [http://localhost:3000](http://localhost:3000) inside Gitpod).
+
+<Tip>
+  Check your Gitpod settings to ensure Docker is enabled if required.
+</Tip> 

docs/development/local-setup/linux.mdx

@@ -0,0 +1,57 @@
+---
+title: Linux
+description: How to set up Formbricks on a Linux machine
+icon: "linux"
+---
+
+### Local Machine Setup - Linux
+
+<Info>
+  This guide is recommended for advanced users setting up Formbricks on a **Linux** machine.
+</Info>
+
+Here are the requirements for setting up Formbricks on Linux:
+
+- Node.JS (v20 recommended)
+- [pnpm](https://pnpm.io/)
+- [Docker](https://www.docker.com/) (to run PostgreSQL/MailHog)
+
+**Steps:**
+
+1. **Clone the project & move into the directory:**
+    ```bash
+    git clone https://github.com/formbricks/formbricks && cd formbricks
+    ```
+
+2. **Setup NodeJS with nvm:**
+    ```bash
+    nvm install && nvm use
+    ```
+
+3. **Install NodeJS packages via pnpm:**
+    ```bash
+    pnpm install
+    ```
+
+4. **Create a `.env` file based on `.env.example`:**
+    ```bash
+    cp .env.example .env
+    ```
+
+5. **Generate & set the secret values:**
+    ```bash
+    sed -i '/^ENCRYPTION_KEY=/c\ENCRYPTION_KEY='$(openssl rand -hex 32) .env
+    sed -i '/^NEXTAUTH_SECRET=/c\NEXTAUTH_SECRET='$(openssl rand -hex 32) .env
+    sed -i '/^CRON_SECRET=/c\CRON_SECRET='$(openssl rand -hex 32) .env
+    ```
+
+6. **Start the development setup:**
+    ```bash
+    pnpm go
+    ```
+
+You can now access Formbricks at [http://localhost:3000](http://localhost:3000).
+
+<Tip>
+  Create a new account on first login as no default account is available.
+</Tip> 

docs/development/local-setup/mac.mdx

@@ -0,0 +1,57 @@
+---
+title: Mac
+description: How to set up Formbricks on a Mac machine
+icon: "apple"
+---
+
+### Local Machine Setup - Mac
+
+<Info>
+  This guide is recommended for advanced users setting up Formbricks on a **Mac** machine.
+</Info>
+
+**Requirements:**
+
+- Node.JS (v20 recommended)
+- [pnpm](https://pnpm.io/)
+- [Docker](https://www.docker.com/)
+
+**Steps:**
+
+1. **Clone the project & change directory:**
+    ```bash
+    git clone https://github.com/formbricks/formbricks && cd formbricks
+    ```
+
+2. **Setup NodeJS with nvm:**
+    ```bash
+    nvm install && nvm use
+    ```
+
+3. **Install NodeJS packages with pnpm:**
+    ```bash
+    pnpm install
+    ```
+
+4. **Create a `.env` file from the example:**
+    ```bash
+    cp .env.example .env
+    ```
+
+5. **Generate & set secret values (using BSD sed syntax for macOS):**
+    ```bash
+    sed -i '' '/^ENCRYPTION_KEY=/s|.*|ENCRYPTION_KEY='$(openssl rand -hex 32)'|' .env
+    sed -i '' '/^NEXTAUTH_SECRET=/s|.*|NEXTAUTH_SECRET='$(openssl rand -hex 32)'|' .env
+    sed -i '' '/^CRON_SECRET=/s|.*|CRON_SECRET='$(openssl rand -hex 32)'|' .env
+    ```
+
+6. **Start the development setup:**
+    ```bash
+    pnpm go
+    ```
+
+Visit [http://localhost:3000](http://localhost:3000) to access Formbricks.
+
+<Tip>
+  Ensure you create a new account at first login.
+</Tip> 

docs/development/local-setup/windows.mdx

@@ -0,0 +1,57 @@
+---
+title: Windows
+description: How to set up Formbricks on a Windows machine
+icon: "windows"
+---
+
+### Local Machine Setup - Windows
+
+<Info>
+  This guide is intended for **Windows** users. For the best experience, use **WSL2** since pure Windows is not fully supported.
+</Info>
+
+**Requirements:**
+
+- Node.JS (v20 recommended) via WSL2
+- [pnpm](https://pnpm.io/)
+- [Docker](https://www.docker.com/) (ensure Docker Desktop is installed with WSL2 integration enabled)
+
+**Steps (Using WSL2):**
+
+1. **Open your WSL2 terminal and clone the project:**
+    ```bash
+    git clone https://github.com/formbricks/formbricks && cd formbricks
+    ```
+
+2. **Setup NodeJS with nvm in WSL2:**
+    ```bash
+    nvm install && nvm use
+    ```
+
+3. **Install packages using pnpm:**
+    ```bash
+    pnpm install
+    ```
+
+4. **Create a `.env` file:**
+    ```bash
+    cp .env.example .env
+    ```
+
+5. **Generate & set secret values (Linux commands work in WSL2):**
+    ```bash
+    sed -i '/^ENCRYPTION_KEY=/c\ENCRYPTION_KEY='$(openssl rand -hex 32) .env
+    sed -i '/^NEXTAUTH_SECRET=/c\NEXTAUTH_SECRET='$(openssl rand -hex 32) .env
+    sed -i '/^CRON_SECRET=/c\CRON_SECRET='$(openssl rand -hex 32) .env
+    ```
+
+6. **Start the development setup:**
+    ```bash
+    pnpm go
+    ```
+
+Access Formbricks at [http://localhost:3000](http://localhost:3000).
+
+<Tip>
+  If you run into conflicts, ensure any local services (like PostgreSQL) are stopped.
+</Tip> 

docs/development/overview.mdx

@@ -0,0 +1,16 @@
+---
+title: Development
+description: Learn how to setup formbricks locally and develop on it 
+icon: "code"
+---
+
+Welcome to the Development section of Formbricks! This guide is designed to help you get started with setting up the project locally, contributing to the Formbricks codebase, and customizing it to suit your needs.
+
+Whether you're a seasoned developer or just getting started, you'll find valuable information on how to:
+
+- **Set Up Locally**: Step-by-step instructions to clone the repository, install dependencies, and run Formbricks on your local machine.
+- **Contribute**: Guidelines on how to contribute to the project, including coding standards, submitting pull requests, and collaborating with other developers.
+- **Customize**: Tips and tricks for customizing Formbricks to better fit your specific use cases, including modifying components and extending functionality.
+
+Dive in and start building with Formbricks today!
+

docs/development/support/troubleshooting.mdx

@@ -0,0 +1,38 @@
+---
+title: "Troubleshooting"
+description: "Here, you'll find help with common issues."
+icon: "wrench"
+---
+
+## "The app doesn't work after Prisma migration"
+
+If the app doesn’t work after a Prisma migration, clear your browser’s storage and reload the page. This will force the app to fetch data from the server again. ![prisma](https://res.cloudinary.com/dwdb9tvii/image/upload/v1738108186/image_dwm9hp.jpg)
+
+## "I ran 'pnpm i' but there seems to be an error with the packages"
+
+If you run `pnpm i` and get an error with the packages, try running `pnpm clean` followed by `pnpm i` again. This often solves the problem.
+
+## "I get a full-screen error with cryptic strings"
+
+This usually happens when the Formbricks Widget isn't correctly or completely built.
+
+```bash
+pnpm build --filter=@formbricks/js
+
+// Run the app again
+pnpm dev
+```
+
+## "My machine struggles with the repository"
+
+Since we're working with a monorepo structure, the repository can get quite big. If you're having trouble working with the repository, try the following:
+
+```bash helloWorld.js
+pnpm dev --filter=@formbricks/web...
+```
+
+It’s better to use a single terminal with `pnpm dev` rather than having multiple open (one with the Formbricks app and one with the demo).
+
+## Error: "Uncaught (in promise) SyntaxError: Unexpected token !DOCTYPE ... is not valid JSON"![Syntax Error](https://res.cloudinary.com/dwdb9tvii/image/upload/v1738109837/image_wbxv8k.jpg)
+
+If you see this error, it happens when the person connected to the widget is deleted. To fix it, log out of the test person and reload the page.![Reset person](https://res.cloudinary.com/dwdb9tvii/image/upload/v1738110212/image_nvkpku.jpg)