diff --git a/developer-portal/components/ApiPlayground.tsx b/developer-portal/components/ApiPlayground.tsx
new file mode 100644
index 00000000..d25d6d62
--- /dev/null
+++ b/developer-portal/components/ApiPlayground.tsx
@@ -0,0 +1,402 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  ScrollView,
+  ActivityIndicator,
+} from 'react-native';
+
+interface Endpoint {
+  id: string;
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE';
+  path: string;
+  name: string;
+  hasBody?: boolean;
+  defaultBody?: string;
+}
+
+const ENDPOINTS: Endpoint[] = [
+  { id: 'list_sub', method: 'GET', path: '/v1/subscriptions', name: 'List Subscriptions' },
+  {
+    id: 'create_sub',
+    method: 'POST',
+    path: '/v1/subscriptions',
+    name: 'Create Subscription',
+    hasBody: true,
+    defaultBody: JSON.stringify({
+      name: "Netflix",
+      category: "streaming",
+      price: 15.99,
+      currency: "USD",
+      billingCycle: "monthly",
+      startDate: "2024-01-01T00:00:00Z"
+    }, null, 2)
+  },
+  { id: 'list_pay', method: 'GET', path: '/v1/payments', name: 'List Payments' },
+];
+
+const LANGUAGES = ['cURL', 'JavaScript', 'Python', 'Go'];
+
+export const ApiPlayground: React.FC = () => {
+  const [selectedEndpoint, setSelectedEndpoint] = useState<Endpoint>(ENDPOINTS[0]);
+  const [apiKey, setApiKey] = useState('sk_test_your_api_key_here');
+  const [requestBody, setRequestBody] = useState(ENDPOINTS[0].defaultBody || '');
+  const [selectedLang, setSelectedLang] = useState('cURL');
+  
+  const [response, setResponse] = useState<{ status: number | null, data: string | null }>({ status: null, data: null });
+  const [loading, setLoading] = useState(false);
+
+  const handleEndpointSelect = (endpoint: Endpoint) => {
+    setSelectedEndpoint(endpoint);
+    setRequestBody(endpoint.defaultBody || '');
+    setResponse({ status: null, data: null });
+  };
+
+  const generateCode = () => {
+    const url = `https://sandbox.api.subtrackr.io${selectedEndpoint.path}`;
+    const method = selectedEndpoint.method;
+    const bodyStr = selectedEndpoint.hasBody ? `\n  -d '${requestBody}'` : '';
+    const bodyJs = selectedEndpoint.hasBody ? `,\n  body: JSON.stringify(${requestBody})` : '';
+    const bodyPy = selectedEndpoint.hasBody ? `\npayload = ${requestBody}` : '';
+    const bodyGo = selectedEndpoint.hasBody ? `\npayload := strings.NewReader(\`${requestBody}\`)` : '';
+    
+    switch (selectedLang) {
+      case 'cURL':
+        return `curl -X ${method} ${url} \\
+  -H "Authorization: Bearer ${apiKey}" \\
+  -H "Content-Type: application/json"${bodyStr}`;
+      case 'JavaScript':
+        return `fetch("${url}", {
+  method: "${method}",
+  headers: {
+    "Authorization": "Bearer ${apiKey}",
+    "Content-Type": "application/json"
+  }${bodyJs}
+})
+.then(response => response.json())
+.then(console.log);`;
+      case 'Python':
+        return `import requests
+url = "${url}"
+headers = {
+    "Authorization": "Bearer ${apiKey}",
+    "Content-Type": "application/json"
+}${bodyPy}
+response = requests.request("${method}", url, headers=headers${selectedEndpoint.hasBody ? ', json=payload' : ''})
+print(response.json())`;
+      case 'Go':
+        return `package main
+import (
+	"fmt"
+	"net/http"
+	"io/ioutil"
+	"strings"
+)
+func main() {
+	url := "${url}"
+	method := "${method}"${bodyGo}
+	client := &http.Client { }
+	req, _ := http.NewRequest(method, url, ${selectedEndpoint.hasBody ? 'payload' : 'nil'})
+	req.Header.Add("Authorization", "Bearer ${apiKey}")
+	req.Header.Add("Content-Type", "application/json")
+	res, _ := client.Do(req)
+	defer res.Body.Close()
+	body, _ := ioutil.ReadAll(res.Body)
+	fmt.Println(string(body))
+}`;
+      default:
+        return '';
+    }
+  };
+
+  const handleExecute = async () => {
+    setLoading(true);
+    // Simulate network request to sandbox
+    setTimeout(() => {
+      let mockResponse = {};
+      let mockStatus = 200;
+      
+      if (selectedEndpoint.id === 'list_sub') {
+        mockResponse = {
+          success: true,
+          data: [{ id: "sub_123", name: "Netflix", price: 15.99, status: "active" }],
+          pagination: { page: 1, limit: 20, total: 1 }
+        };
+      } else if (selectedEndpoint.id === 'create_sub') {
+        try {
+          const bodyData = JSON.parse(requestBody);
+          mockResponse = { success: true, data: { id: "sub_new", ...bodyData, status: "active", createdAt: new Date().toISOString() } };
+          mockStatus = 201;
+        } catch(e) {
+          mockResponse = { success: false, error: { code: "INVALID_REQUEST", message: "Invalid JSON body" } };
+          mockStatus = 400;
+        }
+      } else {
+        mockResponse = { success: true, data: [] };
+      }
+      
+      if (apiKey === '') {
+        mockResponse = { success: false, error: { code: "UNAUTHORIZED", message: "Missing API Key" } };
+        mockStatus = 401;
+      }
+      
+      setResponse({ status: mockStatus, data: JSON.stringify(mockResponse, null, 2) });
+      setLoading(false);
+    }, 800);
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Interactive API Playground</Text>
+      
+      <View style={styles.layout}>
+        {/* Left Column - Configuration */}
+        <View style={styles.configColumn}>
+          <Text style={styles.label}>Endpoint</Text>
+          <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.endpointsScroll}>
+            {ENDPOINTS.map(ep => (
+              <TouchableOpacity 
+                key={ep.id}
+                style={[styles.endpointTab, selectedEndpoint.id === ep.id && styles.endpointTabSelected]}
+                onPress={() => handleEndpointSelect(ep)}
+              >
+                <Text style={[styles.endpointMethod, { color: ep.method === 'GET' ? '#3B82F6' : '#10B981' }]}>{ep.method}</Text>
+                <Text style={[styles.endpointName, selectedEndpoint.id === ep.id && styles.endpointNameSelected]}>{ep.name}</Text>
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
+
+          <Text style={styles.label}>API Key (Bearer Token)</Text>
+          <TextInput
+            style={styles.input}
+            value={apiKey}
+            onChangeText={setApiKey}
+            placeholder="sk_test_..."
+            placeholderTextColor="#9CA3AF"
+          />
+
+          {selectedEndpoint.hasBody && (
+            <>
+              <Text style={styles.label}>Request Body (JSON)</Text>
+              <TextInput
+                style={[styles.input, styles.textArea]}
+                value={requestBody}
+                onChangeText={setRequestBody}
+                multiline
+                numberOfLines={8}
+                autoCapitalize="none"
+              />
+            </>
+          )}
+
+          <TouchableOpacity style={styles.executeButton} onPress={handleExecute} disabled={loading}>
+            {loading ? (
+              <ActivityIndicator color="#FFFFFF" size="small" />
+            ) : (
+              <Text style={styles.executeButtonText}>Execute Request</Text>
+            )}
+          </TouchableOpacity>
+        </View>
+
+        {/* Right Column - Code & Response */}
+        <View style={styles.codeColumn}>
+          <View style={styles.codeSection}>
+            <View style={styles.langTabs}>
+              {LANGUAGES.map(lang => (
+                <TouchableOpacity 
+                  key={lang} 
+                  style={[styles.langTab, selectedLang === lang && styles.langTabSelected]}
+                  onPress={() => setSelectedLang(lang)}
+                >
+                  <Text style={[styles.langTabText, selectedLang === lang && styles.langTabTextSelected]}>{lang}</Text>
+                </TouchableOpacity>
+              ))}
+            </View>
+            <View style={styles.codeBlock}>
+              <Text style={styles.codeText} selectable>{generateCode()}</Text>
+            </View>
+          </View>
+
+          {response.data && (
+            <View style={styles.responseSection}>
+              <View style={styles.responseHeader}>
+                <Text style={styles.label}>Response</Text>
+                <View style={[styles.statusBadge, response.status === 200 || response.status === 201 ? styles.statusSuccess : styles.statusError]}>
+                  <Text style={styles.statusText}>{response.status}</Text>
+                </View>
+              </View>
+              <View style={styles.codeBlock}>
+                <Text style={styles.codeText} selectable>{response.data}</Text>
+              </View>
+            </View>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    padding: 20,
+    marginTop: 16,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#111827',
+    marginBottom: 20,
+  },
+  layout: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginHorizontal: -10,
+  },
+  configColumn: {
+    flex: 1,
+    minWidth: 300,
+    paddingHorizontal: 10,
+    marginBottom: 20,
+  },
+  codeColumn: {
+    flex: 1,
+    minWidth: 300,
+    paddingHorizontal: 10,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#374151',
+    marginBottom: 8,
+  },
+  endpointsScroll: {
+    flexDirection: 'row',
+    marginBottom: 20,
+  },
+  endpointTab: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    marginRight: 8,
+    backgroundColor: '#F9FAFB',
+  },
+  endpointTabSelected: {
+    borderColor: '#3B82F6',
+    backgroundColor: '#EFF6FF',
+  },
+  endpointMethod: {
+    fontWeight: 'bold',
+    marginRight: 8,
+    fontSize: 12,
+  },
+  endpointName: {
+    fontSize: 14,
+    color: '#4B5563',
+  },
+  endpointNameSelected: {
+    color: '#1D4ED8',
+    fontWeight: '500',
+  },
+  input: {
+    backgroundColor: '#F9FAFB',
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 14,
+    marginBottom: 16,
+    color: '#111827',
+    fontFamily: 'monospace',
+  },
+  textArea: {
+    height: 120,
+    textAlignVertical: 'top',
+  },
+  executeButton: {
+    backgroundColor: '#3B82F6',
+    paddingVertical: 12,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  executeButtonText: {
+    color: '#FFFFFF',
+    fontWeight: '600',
+    fontSize: 16,
+  },
+  codeSection: {
+    marginBottom: 20,
+  },
+  langTabs: {
+    flexDirection: 'row',
+    backgroundColor: '#1F2937',
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    paddingTop: 8,
+    paddingHorizontal: 8,
+  },
+  langTab: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderTopLeftRadius: 6,
+    borderTopRightRadius: 6,
+  },
+  langTabSelected: {
+    backgroundColor: '#111827',
+  },
+  langTabText: {
+    color: '#9CA3AF',
+    fontSize: 13,
+    fontWeight: '500',
+  },
+  langTabTextSelected: {
+    color: '#F9FAFB',
+  },
+  codeBlock: {
+    backgroundColor: '#111827',
+    padding: 16,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+  },
+  codeText: {
+    color: '#D1D5DB',
+    fontFamily: 'monospace',
+    fontSize: 13,
+    lineHeight: 20,
+  },
+  responseSection: {
+    marginTop: 8,
+  },
+  responseHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 8,
+  },
+  statusBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 12,
+  },
+  statusSuccess: {
+    backgroundColor: '#D1FAE5',
+  },
+  statusError: {
+    backgroundColor: '#FEE2E2',
+  },
+  statusText: {
+    fontSize: 12,
+    fontWeight: 'bold',
+  },
+});
diff --git a/developer-portal/docs/api-versioning.md b/developer-portal/docs/api-versioning.md
new file mode 100644
index 00000000..0498644f
--- /dev/null
+++ b/developer-portal/docs/api-versioning.md
@@ -0,0 +1,29 @@
+# API Versioning
+
+SubTrackr uses a URL-based versioning strategy to ensure backwards compatibility. The current active version is `v1`.
+
+## How it works
+
+When making API requests, you must include the version in the URL:
+
+```http
+https://api.subtrackr.io/v1/subscriptions
+```
+
+## Backwards Compatibility
+
+We consider the following changes to be backwards-compatible:
+- Adding new API endpoints
+- Adding new properties to responses
+- Adding optional request parameters
+- Changing the order of properties in a response
+
+## Breaking Changes
+
+If we need to make backwards-incompatible changes, we will release a new API version (e.g., `v2`). Examples of breaking changes include:
+- Removing an endpoint
+- Removing or renaming a property in a response
+- Changing a property's type
+- Adding a new required parameter
+
+When a new version is released, we will provide an upgrade guide and deprecation timeline for the previous version.
diff --git a/developer-portal/docs/changelog.md b/developer-portal/docs/changelog.md
new file mode 100644
index 00000000..6f950c5d
--- /dev/null
+++ b/developer-portal/docs/changelog.md
@@ -0,0 +1,29 @@
+# Changelog
+
+All notable changes to the SubTrackr API and SDKs will be documented in this file.
+
+## [1.2.0] - 2026-07-24
+
+### Added
+- **API Playground**: Interactive API playground added to the developer portal for easy testing and code generation.
+- **Python SDK**: Added support for pagination in the `list` method for subscriptions and payments.
+- **Go SDK**: Added webhook verification helpers.
+
+### Changed
+- Improved error messages for `INVALID_REQUEST` by providing more granular `details`.
+
+## [1.1.0] - 2026-06-15
+
+### Added
+- **Webhooks**: Added `invoice.generated` event.
+- **API**: New `GET /v1/analytics/subscriptions` endpoint for aggregated subscription metrics.
+
+### Fixed
+- Fixed an issue where the `category` filter on `GET /v1/subscriptions` was case-sensitive.
+
+## [1.0.0] - 2026-05-01
+
+### Added
+- Initial stable release of the SubTrackr API (`v1`).
+- SDKs released for JavaScript/Node.js, Python, and Go.
+- comprehensive Developer Portal with API Reference and Quick Start Guides.
diff --git a/developer-portal/pages/DocumentationPage.tsx b/developer-portal/pages/DocumentationPage.tsx
index eec1e30d..2d412b07 100644
--- a/developer-portal/pages/DocumentationPage.tsx
+++ b/developer-portal/pages/DocumentationPage.tsx
@@ -9,7 +9,7 @@ import {
   FlatList,
 } from 'react-native';
 import { useDebounce } from '../../src/hooks/useDebounce';
-
+import { ApiPlayground } from '../components/ApiPlayground';
 interface DocSection {
   id: string;
   title: string;
@@ -112,6 +112,23 @@ Events:
 
 Verify webhook signatures using HMAC-SHA256.`,
   },
+  {
+    id: 'versioning',
+    title: 'API Versioning',
+    icon: '🔄',
+    content: `SubTrackr APIs are versioned. The current version is v1.
+Always include the version in your request URL:
+https://api.subtrackr.io/v1/
+
+Backwards-incompatible changes will result in a new API version.`,
+  },
+  {
+    id: 'changelog',
+    title: 'Changelog',
+    icon: '📝',
+    content: `Stay up-to-date with our latest API and SDK releases.
+Check the Changelog documentation for detailed release notes.`,
+  },
 ];
 
 const QUICK_START_GUIDES: QuickStartGuide[] = [
@@ -218,6 +235,11 @@ export const DocumentationPage: React.FC = () => {
         />
       </View>
 
+      <View style={styles.section}>
+        <Text style={styles.sectionGroupTitle}>Try the API</Text>
+        <ApiPlayground />
+      </View>
+
       <View style={styles.section}>
         <Text style={styles.sectionGroupTitle}>Quick Start Guides</Text>
         <FlatList
diff --git a/sdks/go/README.md b/sdks/go/README.md
new file mode 100644
index 00000000..49489d67
--- /dev/null
+++ b/sdks/go/README.md
@@ -0,0 +1,68 @@
+# SubTrackr Go SDK
+
+The official Go SDK for the SubTrackr API.
+
+## Installation
+
+```bash
+go get github.com/subtrackr/subtrackr-go
+```
+
+## Quick Start
+
+### 1. Initialize the Client
+
+```go
+package main
+
+import (
+	"context"
+	"fmt"
+	"log"
+	"os"
+
+	"github.com/subtrackr/subtrackr-go"
+)
+
+func main() {
+	apiKey := os.Getenv("SUBTRACKR_API_KEY") // e.g., "sk_test_your_key"
+	client := subtrackr.NewClient(apiKey)
+
+	// Context for requests
+	ctx := context.Background()
+
+	// 2. List Subscriptions
+	opts := &subtrackr.SubscriptionListOptions{
+		Status: "active",
+		Limit:  10,
+	}
+	
+	resp, err := client.Subscriptions.List(ctx, opts)
+	if err != nil {
+		log.Fatalf("Error listing subscriptions: %v", err)
+	}
+
+	for _, sub := range resp.Data {
+		fmt.Printf("Subscription: %s - $%.2f\n", sub.Name, sub.Price)
+	}
+
+	// 3. Create a Subscription
+	newSub := &subtrackr.SubscriptionParams{
+		Name:         "Netflix",
+		Category:     "streaming",
+		Price:        15.99,
+		Currency:     "USD",
+		BillingCycle: "monthly",
+		StartDate:    "2024-01-01T00:00:00Z",
+	}
+
+	createdSub, err := client.Subscriptions.Create(ctx, newSub)
+	if err != nil {
+		log.Fatalf("Error creating subscription: %v", err)
+	}
+	fmt.Printf("Created subscription ID: %s\n", createdSub.ID)
+}
+```
+
+## Requirements
+- Go 1.18+
diff --git a/sdks/javascript/README.md b/sdks/javascript/README.md
new file mode 100644
index 00000000..af80869f
--- /dev/null
+++ b/sdks/javascript/README.md
@@ -0,0 +1,60 @@
+# SubTrackr JavaScript SDK
+
+The official JavaScript/Node.js SDK for the SubTrackr API.
+
+## Installation
+
+```bash
+npm install @subtrackr/sdk
+# or
+yarn add @subtrackr/sdk
+```
+
+## Quick Start
+
+### 1. Initialize the Client
+
+```javascript
+import SubTrackr from '@subtrackr/sdk';
+
+const client = new SubTrackr({
+  apiKey: process.env.SUBTRACKR_API_KEY, // e.g., 'sk_test_your_key'
+});
+```
+
+### 2. List Subscriptions
+
+```javascript
+async function fetchSubscriptions() {
+  try {
+    const subscriptions = await client.subscriptions.list({
+      status: 'active',
+      limit: 10
+    });
+    console.log(subscriptions.data);
+  } catch (error) {
+    console.error('Error fetching subscriptions:', error);
+  }
+}
+
+fetchSubscriptions();
+```
+
+### 3. Create a Subscription
+
+```javascript
+async function createSubscription() {
+  const newSub = await client.subscriptions.create({
+    name: 'Netflix',
+    category: 'streaming',
+    price: 15.99,
+    currency: 'USD',
+    billingCycle: 'monthly',
+    startDate: new Date().toISOString()
+  });
+  console.log('Created subscription:', newSub.id);
+}
+```
+
+## TypeScript Support
+This SDK is written in TypeScript and provides complete type definitions out of the box.
diff --git a/sdks/python/README.md b/sdks/python/README.md
new file mode 100644
index 00000000..dbc593b3
--- /dev/null
+++ b/sdks/python/README.md
@@ -0,0 +1,61 @@
+# SubTrackr Python SDK
+
+The official Python SDK for the SubTrackr API.
+
+## Installation
+
+```bash
+pip install subtrackr
+```
+
+## Quick Start
+
+### 1. Initialize the Client
+
+```python
+import os
+import subtrackr
+
+client = subtrackr.Client(
+    api_key=os.environ.get("SUBTRACKR_API_KEY") # e.g., 'sk_test_your_key'
+)
+```
+
+### 2. List Subscriptions
+
+```python
+def fetch_subscriptions():
+    try:
+        response = client.subscriptions.list(
+            status="active",
+            limit=10
+        )
+        for sub in response.data:
+            print(f"Subscription: {sub.name} - ${sub.price}")
+    except subtrackr.SubTrackrError as e:
+        print(f"Error: {e.message}")
+
+fetch_subscriptions()
+```
+
+### 3. Create a Subscription
+
+```python
+from datetime import datetime, timezone
+
+def create_subscription():
+    new_sub = client.subscriptions.create(
+        name="Netflix",
+        category="streaming",
+        price=15.99,
+        currency="USD",
+        billing_cycle="monthly",
+        start_date=datetime.now(timezone.utc).isoformat()
+    )
+    print(f"Created subscription: {new_sub.id}")
+
+create_subscription()
+```
+
+## Requirements
+- Python 3.8+