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

# Quickstart

> Go from zero to a working CocoBase project in under 5 minutes

## Get started in three steps

### Step 1 — Create a project

1. Sign up at [app.cocobase.cc](https://app.cocobase.cc)
2. Click **New Project** and give it a name
3. Copy your **API Key** from the project settings

### Step 2 — Install the SDK

<Tabs>
  <Tab title="JavaScript / TypeScript">
    ```bash theme={null}
    npm install cocobase
    ```
  </Tab>

  <Tab title="Flutter / Dart">
    Add to `pubspec.yaml`:

    ```yaml theme={null}
    dependencies:
      coco_base_flutter: ^1.2.0
    ```

    Then run `flutter pub get`.
  </Tab>

  <Tab title="HTML (CDN)">
    ```html theme={null}
    <script src="https://cdn.jsdelivr.net/npm/cocobase/dist/browser/cocobase.min.js"></script>
    ```
  </Tab>
</Tabs>

### Step 3 — Make your first call

<Tabs>
  <Tab title="JavaScript / TypeScript">
    ```typescript theme={null}
    import { Cocobase } from "cocobase";

    const db = new Cocobase({ apiKey: "YOUR_API_KEY" });

    // Create a document
    const post = await db.createDocument("posts", {
      title: "My First Post",
      content: "Hello, CocoBase!",
    });

    console.log("Created:", post.id);

    // List documents
    const posts = await db.listDocuments("posts");
    console.log("All posts:", posts.length);
    ```
  </Tab>

  <Tab title="Flutter / Dart">
    ```dart theme={null}
    import 'package:coco_base_flutter/coco_base_flutter.dart';

    void main() async {
      final db = Cocobase(CocobaseConfig(apiKey: "YOUR_API_KEY"));

      // Create a document
      final post = await db.createDocument("posts", {
        "title": "My First Post",
        "content": "Hello, CocoBase!",
      });

      print("Created: ${post.id}");

      // List documents
      final posts = await db.listDocuments("posts");
      print("All posts: ${posts.length}");
    }
    ```
  </Tab>

  <Tab title="HTML (CDN)">
    ```html theme={null}
    <script src="https://cdn.jsdelivr.net/npm/cocobase/dist/browser/cocobase.min.js"></script>
    <script>
      const { Cocobase } = window.CocobaseSDK;
      const db = new Cocobase({ apiKey: "YOUR_API_KEY" });

      db.createDocument("posts", { title: "Hello!" })
        .then(doc => console.log("Created:", doc.id));
    </script>
    ```
  </Tab>
</Tabs>

***

## Add authentication

<Tabs>
  <Tab title="JavaScript / TypeScript">
    ```typescript theme={null}
    // Register a new user
    const result = await db.auth.register({
      email: "user@example.com",
      password: "securePassword123",
      data: { name: "John Doe" },
    });
    console.log("Registered:", result.user.id);

    // Login
    await db.auth.login({ email: "user@example.com", password: "securePassword123" });

    // Restore session on app reload
    const { isAuthenticated } = await db.auth.initAuth();
    if (isAuthenticated) console.log("Welcome back,", db.auth.user?.email);
    ```
  </Tab>

  <Tab title="Flutter / Dart">
    ```dart theme={null}
    // Register
    await db.auth.register(
      email: "user@example.com",
      password: "securePassword123",
      data: {"name": "John Doe"},
    );

    // Login
    await db.auth.login(
      email: "user@example.com",
      password: "securePassword123",
    );

    // Restore session on app start
    final isAuth = await db.auth.initAuth();
    if (isAuth) print("Welcome, ${db.auth.user?.email}");
    ```
  </Tab>
</Tabs>

***

## Add real-time updates

<Tabs>
  <Tab title="JavaScript / TypeScript">
    ```typescript theme={null}
    // onSnapshot — fires immediately, then on every change
    const unsub = db.onSnapshot<Post>("posts", (posts) => {
      renderPosts(posts);
    });

    // Clean up when done
    unsub();
    ```
  </Tab>

  <Tab title="Flutter / Dart">
    ```dart theme={null}
    // In a StatefulWidget
    late VoidCallback _unsub;

    @override
    void initState() {
      super.initState();
      _unsub = db.onSnapshot<Post>(
        "posts",
        converter: Post.fromJson,
        onData: (posts) => setState(() => _posts = posts),
      );
    }

    @override
    void dispose() {
      _unsub();
      super.dispose();
    }
    ```
  </Tab>
</Tabs>

***

## Next steps

<CardGroup cols={2}>
  <Card title="JavaScript SDK" icon="js" href="/sdk-reference/javascript">
    Full JS/TS SDK reference — auth, queries, real-time, typed errors
  </Card>

  <Card title="Flutter SDK" icon="mobile" href="/sdk-reference/flutter">
    Full Dart/Flutter SDK — widgets, onSnapshot, pagination
  </Card>

  <Card title="MCP Server" icon="robot" href="/sdk-reference/mcp">
    Manage your project with Claude, Cursor, or any AI tool
  </Card>

  <Card title="Cloud Functions" icon="bolt" href="/cloud-functions/introduction">
    Write Python functions that run server-side
  </Card>
</CardGroup>