Skip to Main Content


Gitpod is an open-source application that provides a prebuilt development environment in your browser - powered by VS Code. It also automates the provisioning of a ready-to-code developer environment, so you will have all the dependencies you need (for example MongoDB). With Gitpod, there’s no need to download any code to your machine. It can create a server-side-dev-environment for you in seconds from any repository on GitHub.

How to use Gitpod

You can use Gitpod in the cloud. Please note, that Gitpod requires additional configuration to work on the authenticated pages in BioDrop. See instructions for how to set up your OAuth app for more information.

There are 2 ways you can open a repository with Gitpod.

1st Method: Prefix the url with

  1. Go to the GitHub page of your forked BioDrop repository
  2. Copy the url from the address bar and paste the code in front of it

Screen1 - Add snippet in front of url

  1. After starting the search, a warning screen will open; you can click the Continue button

Screen2 - Warning

  1. The VS Code environment will appear

Screen3 - VS Code environment

2nd Method: Use a browser extension

The Gitpod extensions is available for Firefox and Chrome. It also works for Edge, Brave, and other Chromium-based browsers. For further details, read the Browser Extension documentation on Gitpod official website.


If you encounter permission issues, follow the next steps:

  1. Click on the menu button (the three horizontal lines icon) in the upper left corner and open the Dashboard

Screen4 - Menu: Open the Dashboard  

  1. In the Workspaces page, click on your profile icon and choose User settings

Screen5 - User Settings

  1. From the left menu, click on the Git Providers tab; on the right side, click on the three dots icon of the repository that interests you

Screen6 - Git Providers Section + 3 Dots

  1. Choose Edit Permissions
  2. Make sure that you have checked public_repo and workflow, then click on Update permissions

Screen7 - Edit Permission Settings

  1. A first new window will open requesting additional permissions; you can click on the Authorize gitpod-io button

Screen8 - Add additional permissions

  1. A second new window will open, asking you to confirm to apply the changes made by entering your GitHub account password; you can apply and save the changes by clicking on the Confirm button

Screen9 - Confirm with password

Open BioDrop in Gitpod


Once you have opened a repository, you can develop as you usually do! Make sure that the NEXT_PUBLIC_BASE_URL in your .env file is using your Gitpod URL (you can find this in your preview window, the ports tab, or by running gp url 3000). In the next example, we will update our profile from BioDrop.

Open your fork and follow along.

First, Let's make sure that we have the latest version of the code. To achieve this, run the following commands:

git checkout main
git pull upstream main

Now we can update our profile. To do this, create a new branch with the following command

# Replace YOUR_PROFILE_NAME with your actual profile name.
git checkout -b update-YOUR_PROFILE_NAME

Now that we have our profile, we are ready to make some modification to our profile. Find the file with your account name in the data folder, and modify it as you want.

For example, you can copy and past the following code:

"milestones": [
      "title": "Used Gitpod to Update my Profile",
      "date": "July 2023", // date updated
      "icon": "FaCode",
      "description": "Started my profile by using Gitpod",
      "url": ""

Lastly, commit the changes and create a PR in the BioDrop repository.