Developer Tutorial

Store Articles and Fetch via API

A complete guide for developers on storing articles in the cloud and retrieving them through RESTful APIs. Build modern, API-driven content solutions.

Understanding API-Based Content Delivery

Modern web development has shifted toward API-first architecture where content is stored separately from presentation. This approach allows you to store articles in a centralized system and fetch them via HTTP requests to any frontend application.

Key Benefits:

• Separate content management from frontend development
• Deliver content to multiple platforms from one source
• Enable real-time content updates without redeployment
• Implement caching strategies for optimal performance

API Content Architecture

🗄️

Content Storage Layer

Articles are stored in a cloud database with structured schemas. Each article contains title, content, metadata, images, and SEO fields.

🔌

API Gateway

RESTful endpoints expose content operations: GET /articles, GET /articles/{id}, POST /articles, PUT /articles/{id}, DELETE /articles/{id}

🔐

Authentication Layer

API keys or OAuth tokens secure access. Different keys can have different permissions for read/write operations.

🌍

CDN Layer

Content is cached at edge locations worldwide for fast delivery. Images and media are optimized automatically.

💻

Frontend Integration

Your website or app makes HTTP requests to fetch JSON data and renders it using any framework (React, Vue, Angular, etc.).

Getting Started with ContentShelter API

Step 1: Create Your Account

Create free account →

Step 2: Generate API Key

Navigate to Settings > API Keys and generate a new API key. This key will be used to authenticate your requests.

Authorization: Bearer your_api_key_here

Step 3: Create Your First Article

Use the dashboard to create and publish your first article with rich text content, images, and SEO metadata.

Step 4: Fetch Articles via API

Make HTTP requests to fetch your articles. Here are the most common endpoints:

API Endpoints Reference

GET/api/public/blog

Fetch all published blog articles

fetch('https://contentshelter.com/api/public/blog', {
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY'
  }
})
  .then(res => res.json())
  .then(articles => console.log(articles));

GET/api/public/blog/{slug}

Fetch a specific article by slug

fetch('https://contentshelter.com/api/public/blog/my-article', {
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY'
  }
})
  .then(res => res.json())
  .then(article => console.log(article));

POST/api/blog

Create a new article

fetch('https://contentshelter.com/api/blog', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'My Article',
    content: '<p>Article content...</p>',
    slug: 'my-article',
    published: true
  })
})
  .then(res => res.json())
  .then(article => console.log(article));

API Response Format

All API responses return JSON data in a consistent format:

// Single Article Response
{
  "id": "12345",
  "title": "My Article Title",
  "slug": "my-article",
  "content": "<p>Article HTML content...</p>",
  "excerpt": "Brief excerpt...",
  "author": {
    "name": "John Doe",
    "email": "john@example.com"
  },
  "category": "Technology",
  "tags": ["api", "tutorial"],
  "featuredImage": "https://cdn.example.com/image.jpg",
  "seo": {
    "metaTitle": "SEO Title",
    "metaDescription": "SEO Description",
    "keywords": ["keyword1", "keyword2"]
  },
  "publishedAt": "2024-01-15T10:00:00Z",
  "updatedAt": "2024-01-15T10:00:00Z",
  "status": "published"
}

// Articles List Response
{
  "articles": [...],
  "total": 100,
  "page": 1,
  "limit": 10,
  "hasMore": true
}

Framework Integration Examples

React Example

import { useState, useEffect } from 'react';

function BlogList() {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    fetch('https://contentshelter.com/api/public/blog', {
      headers: {
        'Authorization': 'Bearer YOUR_API_KEY'
      }
    })
      .then(res => res.json())
      .then(data => setArticles(data));
  }, []);

  return (
    <div>
      {articles.map(article => (
        <article key={article.id}>
          <h2>{article.title}</h2>
          <div dangerouslySetInnerHTML={{ __html: article.content }} />
        </article>
      ))}
    </div>
  );
}

Next.js Example (Server Component)

async function BlogPage() {
  const res = await fetch('https://contentshelter.com/api/public/blog', {
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY'
    },
    next: { revalidate: 3600 } // Cache for 1 hour
  });
  
  const articles = await res.json();

  return (
    <div>
      {articles.map(article => (
        <article key={article.id}>
          <h2>{article.title}</h2>
          <div dangerouslySetInnerHTML={{ __html: article.content }} />
        </article>
      ))}
    </div>
  );
}

Best Practices

Implement Caching

Cache API responses to reduce load times and API calls. Use framework-specific caching or CDN caching.

Handle Errors Gracefully

Always implement error handling for API failures. Show fallback content or error messages to users.

Secure Your API Keys

Never expose API keys in frontend code. Use environment variables or backend proxies for secure requests.

Optimize Images

Use the image URLs provided by the API which are already optimized for web delivery.

Implement Loading States

Show loading indicators while fetching content to improve user experience.

Use Pagination

For large content sets, use pagination to fetch articles in batches rather than all at once.

Start Storing and Fetching Articles via API

Get started with ContentShelter's powerful API and build modern, API-driven content solutions

Get API Access Free View Full API Docs