# Getting Started with Developer Portal - Portal
Publish API documentation and let developers manage their assigned API keys.
You'll create a Todo API, customize its developer portal, and make an
authenticated request from the portal's playground.
## Prerequisites
- A [Zuplo account](https://portal.zuplo.com).
- An email address you can use to sign in to the developer portal.
## Build and test your developer portal
1. **Create a project and sample API**
Open [**Projects**](https://portal.zuplo.com/+/account/projects), click **New
Project**, and select **API & MCP Gateway**. Name it `my-dev-portal` and
click **Create Project**.
In **Code → config/routes.oas.json**, select **Start with Example API**, then
**Complete Import**. The Route Designer now lists the Todo API routes. Your
project also includes a `docs` directory for the developer portal.
2. **Customize the portal**
In the **Code** file tree, open `docs/zudoku.config.tsx`. Set `site.title`
and `metadata.title` to `Todo Developer Portal`, and set
`metadata.description` to `Explore the Todo API and manage your API keys.`
Keep the other settings, including `apis`, `authentication`, and `apiKeys`.
The `apis` configuration reads `../config/routes.oas.json` and displays it at
`/api`. Editing your routes updates the API reference.
Open `docs/pages/introduction.mdx` and replace its contents with:
```mdx title="docs/pages/introduction.mdx"
---
title: Welcome to the Todo API
description: Sign in, find your API key, and make your first request.
---
Use the Todo API to retrieve tasks for your application.
1. Sign in using the email address registered as a key manager.
2. Open **API Keys** from your profile menu to find your assigned key.
3. Open **API Reference** and try **List todos** with that key.
```
Save the changes. The introduction already has a navigation entry. See
[Writing content](../../dev-portal/zudoku/writing.mdx) for more options.
3. **Protect the sample route**
Open `config/routes.oas.json` in the **Route Designer** and select **List
todos** (`GET /todos`). Open **Policies → Add Policy**, search for **API Key
Authentication**, and accept its default configuration.
Keep this policy first in the inbound policy chain. On the same route, open
**Deny All Origins (CORS)** and select **Allow All Origins** so the developer
portal can call it from the browser. Save your changes.
In the code view, add `info.description` to the OpenAPI file and set it to
`GET /todos requires a bearer API key.` Save again.
Click **Test** next to the route's path and send a request without a key.
Expect `401 Unauthorized`. This step protects `GET /todos`; apply
authentication to other routes before using them for private data.
4. **Assign a key to a developer**
Open
[**Services → API Keys → Consumers**](https://portal.zuplo.com/+/account/project/services).
Select **Dev** and click **Create Consumer**. Set **Subject** to
`tutorial-consumer`, enter your email under **Key managers**, and leave
**Metadata** as `{}`. Click **Save consumer**.
A key manager can manage the consumer's keys after signing in. Signing in
doesn't create a consumer automatically. See
[API key management](../../articles/api-key-management.mdx).
5. **Open and test the developer portal**
Open **Deployment URLs** and copy the **Dev Portal** URL for your working
copy. Open it in a new tab. Visit `/introduction` to check your new page.
Sign in using the same email address you entered under **Key managers**. The
template includes a demo sign-in provider for this tutorial. Open **API
Keys** from your profile menu and confirm your consumer's key appears.
Open **API Reference → List todos → Test**. Expand **Authentication**, select
`tutorial-consumer`, and click **Send**. Expect `200 OK` and todos in the
response. Select **None** under Authentication and send again: expect
`401 Unauthorized`.
If the key isn't listed, check the key manager email and that the consumer is
in the **Dev** bucket. If the browser reports a CORS error, check that this
route allows requests from the portal.
6. **Deploy for other developers**
Follow [Deploy to the edge](../gateway/deploy-to-the-edge/index.mdx) to
connect your Git repository and deploy. Open **Deployment URLs** for the
production deployment and copy its **Dev Portal** URL.
Create a consumer in the **Prod** API key bucket and repeat the signed-in
request there. Dev and Production keys are separate.
Before inviting users, replace the demo login with your own
[authentication provider](../../dev-portal/zudoku/configuration/authentication.md)
and configure [CORS](../../articles/cors.mdx) to allow your portal's origin.
## Next steps
- [Customize the theme](../../dev-portal/zudoku/customization/colors-theme.mdx).
- [Create consumers on login](../../dev-portal/dev-portal-create-consumer-on-auth.mdx)
if every signed-in user should receive a key automatically.
- [Develop locally](./local.mdx) with live updates in your editor.