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

# Content Dashboard with Contentful

> Build a content management dashboard using Contentful CMS

Learn how to build a content dashboard that connects to your Contentful space, allowing content editors to manage blog posts, products, and other content types.

## Overview

This example demonstrates building a content dashboard that:

* Displays all content entries from Contentful
* Allows creating, editing, and publishing content
* Shows content status (draft, published)
* Provides content analytics and insights

## Prerequisites

* Contentful integration configured in HelloLeo
* Contentful space with content types set up
* CMA token with read/write permissions

## Step-by-Step Guide

### 1. Set Up the Integration

First, ensure your Contentful integration is configured:

1. Go to **Project Settings** → **Project Integrations**
2. Select **Contentful** and enter your CMA token
3. Test the connection

### 2. Create the Dashboard Overview

Start by creating a dashboard that shows content statistics:

```
Create a content dashboard that displays:
- Total number of entries
- Published entries count
- Draft entries count
- Recent entries
- Content by type (blog posts, products, pages, etc.)

Fetch data from Contentful to calculate these statistics.
```

### 3. Display Content List

Create a page to list all content entries:

```
Create a content list page that shows all entries from Contentful.
Display:
- Entry title
- Content type
- Status (draft/published)
- Last updated date
- Author
- Actions (edit, delete, publish)

Add filters to filter by content type and status.
Add search to find entries by title.
```

### 4. Create Content Entry Form

Build a form to create new content:

```
Create a content creation form that:
- Allows selecting content type
- Shows fields based on selected content type
- Validates required fields
- Saves draft to Contentful
- Shows success/error messages

Use Contentful CMA API to create entries.
```

### 5. Edit Content Entry

Create an edit page for existing content:

```
Create a content edit page that:
- Loads existing entry data from Contentful
- Pre-fills form fields with current values
- Allows updating fields
- Saves changes to Contentful
- Shows version history

Fetch entry by ID from Contentful and update using CMA API.
```

### 6. Publish/Unpublish Content

Add publishing functionality:

```
Add publish and unpublish buttons to content entries.
When clicked, publish or unpublish the entry in Contentful.
Show confirmation dialog before publishing.
Display success message after publishing.
```

### 7. Content Preview

Add preview functionality:

```
Create a content preview feature that shows how the 
content will look when published. Use Contentful's 
preview API to fetch entry data and render preview.
```

## Example Prompts

### Initial Setup

```
Build a content management dashboard with:
- Overview page with statistics
- Content list page with filters
- Content creation form
- Content edit page
- Publish/unpublish functionality

Connect all features to Contentful.
```

### Enhancements

```
Add a content calendar view showing entries scheduled 
for publication by date.
```

```
Create a content analytics page showing:
- Most viewed content
- Content performance metrics
- Publishing trends over time
```

```
Add bulk actions to select multiple entries and 
publish/unpublish/delete them at once.
```

## Key Contentful Concepts

* **Entries** - Individual content items
* **Content Types** - Schema definitions for entries
* **Assets** - Media files (images, videos, etc.)
* **Spaces** - Contentful workspaces
* **Environments** - Content versions (master, staging, etc.)

## Best Practices

* **Content Types**: Always specify which content type you're working with
* **Draft vs Published**: Use Contentful's draft/published states appropriately
* **Validation**: Validate required fields before saving
* **Error Handling**: Handle Contentful API errors gracefully
* **Performance**: Use pagination for large content lists

## Next Steps

* Add content scheduling for future publication
* Implement content versioning and rollback
* Add content approval workflow
* Create content templates for quick creation
* Integrate with image optimization services

<CardGroup cols={2}>
  <Card title="Contentful Integration" icon="plug" href="/integrations/contentful">
    Learn more about Contentful integration
  </Card>

  <Card title="Working with Integrations" icon="book" href="/integrations/working-with-integrations">
    General guide for using integrations
  </Card>
</CardGroup>