import { MdxImage } from "@/components/MdxImage";


import GithubCodespaceLoading from "./images/loading.webp";
import GithubCodespaceNew from "./images/new.webp";
import GithubCodespacePorts from "./images/ports.webp";


export const metadata = {
  title: "Formbricks Open Source Contribution Guide: How to Enhance yourself and Contribute to Formbricks",
  description:
    "Join the Formbricks community and learn how to effectively contribute. From raising issues and feature requests to creating PRs, discover the best practices and communicate with our responsive team on Discord",
};

#### Contributing

# Github Codespaces Guide

1. After clicking the one-click setup button, you will be redirected to the Github Codespaces page. Review the configuration and click on the 'Create Codespace' button to create a new Codespace.

<MdxImage
  src={GithubCodespaceNew}
  alt="New Github Codespace"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

2. This will start loading the Codespace. Keep in mind this might take a few minutes to complete depending on your internet connection and the instance availability.

<MdxImage
  src={GithubCodespaceLoading}
  alt="Loading Github Codespace"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

3. Once the Codespace is loaded, you will be redirected to the VSCode editor. You can start working on your project in this environment.

4. Monitor the logs in the terminal and once you see the following, you are good to go!

<Col>
<CodeGroup title="The WebApp is running">

```bash
@formbricks/web:dev:   ▲ Next.js 13.5.6
@formbricks/web:dev:   - Local:        http://localhost:3000
@formbricks/web:dev:   - Environments: .env
@formbricks/web:dev:   - Experiments (use at your own risk):
@formbricks/web:dev:      · serverActions
@formbricks/web:dev:
@formbricks/web:dev:  ✓ Ready in 9.4s
```

</CodeGroup>
</Col>

5. Right next to the Terminal, you will see a **Ports** tab, click on it to see the ports and their respective URLs. Now access the Forwarded Address for port 3000 and you should be able to visit your Formbricks App!

<MdxImage
  src={GithubCodespacePorts}
  alt="Github Codespace Ports"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

Now make the changes you want to and see them live in action!