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

# Staking Demo App

> A partial and full ETH staking app powered by our fully self-serviceable Staking API with no gated onboarding.

export const LearnButtons = ({primary, secondaries}) => {
  return <div className="flex flex-row gap-2 not-prose">
      {primary && <a href={primary.href} className="flex items-center justify-center gap-2 bg-primary-dark dark:bg-primary-light dark:text-gray-900 text-white rounded-full px-4 py-1 hover:opacity-[0.9]">
          <Icon icon={primary.icon} color="white" iconType="solid" />
          <span className="font-semibold">{primary.title}</span>
        </a>}
      {secondaries && secondaries.map(secondary => <a href={secondary.href} className="flex items-center justify-center gap-2 bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 text-gray-800 dark:text-white rounded-full px-4 py-1 hover:opacity-[0.9]">
          <Icon icon={secondary.icon} color="currentColor" iconType="solid" />
          <span className="font-semibold">{secondary.title}</span>
        </a>)}
    </div>;
};

<LearnButtons
  secondaries={[
  { title: 'GitHub - Backend', href: 'https://github.com/HeimLabs/coinbase-stakemyeth-backend', icon: "github" },
  { title: 'GitHub - Frontend', href: 'https://github.com/HeimLabs/coinbase-stakemyeth-frontend', icon: "github" }
]}
/>

<Tags tags={['Staking']} />

<div className="pt-5">
  <Frame>
    <img src="https://mintcdn.com/coinbase-prod/9XSrv8E48eXr3Srv/get-started/demo-apps/images/partial-and-full-staking-app.svg?fit=max&auto=format&n=9XSrv8E48eXr3Srv&q=85&s=c7cfb3c3cf41c003e7d17631fdd0666e" className="w-750" width="539" height="190" data-path="get-started/demo-apps/images/partial-and-full-staking-app.svg" />
  </Frame>
</div>

## Coinbase StakeMyETH | Backend

<div className="flex flex-row flex-wrap gap-2">
  <img src="https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white" alt="NodeJS" />

  <img src="https://img.shields.io/badge/-TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />

  <img src="https://img.shields.io/badge/Coinbase-0052FF?style=for-the-badge&logo=Coinbase&logoColor=white" alt="Coinbase" />
</div>

### Prerequisites

* [Node](https://nodejs.org/en/download)

### Installation

```bash lines wrap theme={null}
pnpm i
```

* Fill in the environment variables in the `.env` file, refer to the `.env.example` file for the required variables.
* Create a [CDP API key](https://portal.cdp.coinbase.com/projects/api-keys) and save it as `cdp_api_key.json` in the root of the repository, refer to [cdp\_api\_key.example.json](https://github.com/HeimLabs/coinbase-myusdc-backend/blob/main/cdp_api_key.example.json).

***

### Usage `(in development mode)`

Start the Express Server

```bash lines wrap theme={null}
pnpm run dev
```

***

### Usage `(in production mode)`

Build the project

```bash lines wrap theme={null}
pnpm run build
```

Start the Express Server

```bash lines wrap theme={null}
pnpm start
```

## Coinbase StakeMyETH | Frontend

<div className="flex flex-row flex-wrap gap-2">
  <img src="https://img.shields.io/badge/-React-333333?style=for-the-badge&logo=react&logoColor=61dbfb" alt="React" />

  <img src="https://img.shields.io/badge/Vite-B73BFE?style=for-the-badge&logo=vite&logoColor=FFD62E" alt="Vite" />

  <img src="https://img.shields.io/badge/-TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />

  <img src="https://img.shields.io/badge/-SCSS-cd6799?style=for-the-badge&logo=SASS&logoColor=white" alt="SCSS" />

  <img src="https://img.shields.io/badge/Coinbase-0052FF?style=for-the-badge&logo=Coinbase&logoColor=white" alt="Coinbase" />

  <img src="https://img.shields.io/badge/pnpm-yellow?style=for-the-badge&logo=pnpm&logoColor=white" alt="Pnpm" />
</div>

### Prerequisites

* Git
* NodeJs
* pnpm

### Getting Started

* Install dependencies

```sh lines wrap theme={null}
pnpm i
```

* Fill in the environment variables in the `.env` file, refer to the `.env.example` file for the required variables.

### Run Dev

```sh lines wrap theme={null}
pnpm run dev
```

### Build Prod

```sh lines wrap theme={null}
pnpm run build
```