> ## Documentation Index
> Fetch the complete documentation index at: https://ona.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Build with Gitpod

A step-by-step tutorial for getting started and learning how to configure Gitpod. By the end of this tutorial, you will learn everything you need to Gitpodify™ your own projects and start using Gitpod as your development environment.

## Prerequisites

1. Create a [Gitpod Account](https://www.gitpod.io/) - Use GitLab, GitHub or Bitbucket to authenticate.
   * Use our free plan for 50 hours per month for free.
   * For more hours you can [choose a plan](https://www.gitpod.io/pricing).
2. A basic understanding of React, Node.js (Express) and PostgreSQL.

### What are we building?

For this tutorial, we will Gitpodify the [EventHub](https://github.com/gitpod-samples/EventHub/tree/main) project. An example application where you can submit new events. It uses **React** for the front-end, **Node.js** with **Express** for the back-end, and **PostgreSQL** for the database.

Here's the final `.gitpod.yml` configuration that we'll build together:

```yml .gitpod.yml theme={null}
image: gitpod/workspace-postgres

tasks:
    - name: run back-end
      openMode: split-left
      command: |
          npm install pg dotenv
          npm install
          npm start

    - name: run front-end
      openMode: split-right
      command: |
          cd client
          npm install
          echo "REACT_APP_API_URL=$(gp url 3001)" > .env
          npm start

   - name: create tables in db
     command: './init-db.sh'

ports:
    - name: front-end
      port: 3000
      onOpen: open-preview

    - name: back-end
      port: 3001
      onOpen: ignore
      visibility: public

    - name: database
      port: 5432
      onOpen: ignore
```

For this tutorial, we'll focus on [VS Code in the Browser](/classic/user/references/ides-and-editors/vscode-browser) as a simple way to get started. However, Gitpod [supports many editors](/classic/user/references/ides-and-editors/) like VS Code Desktop, JetBrains, SSH, to suit your needs. You can change editors when you create workspaces.

## Next Steps

[Start your workspace →](/classic/user/introduction/gitpod-tutorial/1-start-your-workspace)