> For the complete documentation index, see [llms.txt](https://documentation.orbis.club/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.orbis.club/getting-started/option-1-getting-started-with-a-social-feed.md).

# Option 1: Getting started with a Social Feed

The Orbis SDK can allow you to create any type of social application, in this example we are going to create a contextual social feed which could be used as a decentralized commenting system for an NFT marketplace for example.

### Step 1: Create a post

Once users are connected to their Ceramic did, they can start sharing content on the network. The post function from our SDK allows users to share a post from their did while following our schemas.

We are starting from our previous example to connect the user to Ceramic:

```javascript
/** Import Orbis SDK */
import { Orbis } from "@orbisclub/orbis-sdk";

/**
 * Initialize the Orbis class object:
 * - You can make this object available on other components by passing it as
 * a prop or by using a context.
 */
let orbis = new Orbis();

export default function App() {

	/** The user object returned by the connect function can be stored in state */
	const [user, setUser] = useState();

	/** Calls the Orbis SDK and handle the results */
	async function connect() {
    let res = await orbis.connect();

		/** Check if connection is successful or not */
		if(res.status == 200) {
			console.log("Connected to Ceramic with: ", res.did);
			setUser(res.did);
		} else {
			console.log("Error connecting to Ceramic: ", res);
			alert("Error connecting to Ceramic.");
		}
	}

	return(
		<div>
			{user ?
				<>
					<p>Connected with: {user}</p>
					<Share orbis={orbis}  />
				</>
			:
				<button onClick={() => connect()}>Connect</button>
			}
		</div>
	);
}

/**
 * If the user is connected we show a textarea and submit button
 * to allow users to share content on Orbis.
 * The 'orbis' object must be passed as a parameter to maintain the connection.
 */
function Share({orbis}) {
const [loading, setLoading] = useState(false);
const [text, setText] = useState();

/** We are calling the Orbis SDK to share a new post from this user */
async function share() {
	setLoading(true);

	/**
	 * The createPost() function accept a JSON object that must contain a body
	 * which is the actual content of the post being shared.
     */
	let res = await orbis.createPost({body: text});

	/** Check if post was shared with success or not */
	if(res.status == 200) {
		console.log("Shared post with stream_id: ", res.doc);
	} else {
		console.log("Error sharing post: ", res);
		alert("Error sharing post.");
	}

	setLoading(false);
}

return(
	<div>
		<textarea placeholder="Share your post here..." value={text} onChange={(e) => setText(e.target.value)} />
		{loading ?
			<button>Loading...</button>
		:
			<button onClick={() => share()}>Share</button>
		}
	</div>
);
}
```

This post would have been shared in what we call the global feed but you could also get users to share content in a specific `context` by sharing this informations in the object passed to the `orbis.createPost()` function like this:

```javascript
/** This example would share a post in the "testing" channel of our Orbis group. */
let res = await orbis.createPost({
	body: text,
	context: "kjzl6cwe1jw146uz3jnbu4s0rhyhbakr4nkd1u68qxx6fyzba3w616b2tojr143"
});

/**
 * The context can also be a random string such as a URL (for commenting purposes for example)
 * In this example, the user would be sharing a post in the context of the webpage that he/she is
 * currently visting which can be used for commenting purposes for example.
 */
let res = await orbis.createPost({
	body: text,
	context: "https://nftmarketplace/collections/azuki/5060"
});
```

### Step 2: Retrieving posts

Now that we started sharing posts on Orbis we need to be able to retrieve them. Posts can be queried by context by using the `orbis.getPosts()` function.

Again, we will be starting from the example we were working on before with users sharing posts in the context of an imaginary NFT marketplace. Here is how it works:

```javascript
import React, { useState, useEffect } from 'react';

/** Import Orbis SDK */
import { Orbis } from "@orbisclub/orbis-sdk";

/** Initialize the Orbis class object */
let orbis = new Orbis();

export default function App() {
  /** The user object returned by the connect function can be stored in state */
	const [user, setUser] = useState();

	/** Calls the Orbis SDK and handle the results */
	async function connect() {
    let res = await orbis.connect();

		/** Check if connection is successful or not */
		if(res.status == 200) {
			setUser(res.did);
		} else {
			console.log("Error connecting to Ceramic: ", res);
			alert("Error connecting to Ceramic.");
		}
	}

	return(
    <>
			<div>
				{user ?
					<>
						<p>Connected with: {user}</p>
						<Share orbis={orbis}  />
					</>
				:
					<button onClick={() => connect()}>Connect</button>
				}
			</div>
			<div>
        <h2>Posts shared</h2>
				<Posts orbis={orbis} />
			</div>
		</>
  );
}

/**
 * If the user is connected we show a textarea and submit button
 * to allow users to share content on Orbis.
 * The 'orbis' object must be passed as a parameter to maintain the connection.
 */
function Share({orbis}) {
	const [loading, setLoading] = useState(false);
	const [text, setText] = useState();

	/** We are calling the Orbis SDK to share a new post from this user */
	async function share() {
		setLoading(true);

		/**
		 * The createPost() function accept a JSON object that must contain a body
		 * which is the actual content of the post being shared.
     */
     let res = await orbis.createPost({
     	body: text,
     	context: "https://nftmarketplace/collections/azuki/5060"
     });


		/** Check if post was shared with success or not */
		if(res.status == 200) {
			console.log("Shared post with stream_id: ", res.doc);
      alert("Post shared with stream id: " + res.doc);
      setText();
		} else {
			console.log("Error sharing post: ", res);
			alert("Error sharing post, look at the logs.");
		}

		setLoading(false);
	}

	return(
		<div>
			<textarea value={text} onChange={(e) => setText(e.target.value)} placeholder="Share your post here..." />
			{loading ?
				<button>Loading...</button>
			:
				<button onClick={() => share()}>Share</button>
			}
		</div>
	);
}

/**
 * We will use this component to display the posts shared in the context of this specific
 * webpage url: "https://nftmarketplace/collections/azuki/5060".
 * This example could be used to build a decentralized commenting system for example.
 */
function Posts({orbis}) {
	const [loading, setLoading] = useState(false);
	const [posts, setPosts] = useState([]);

	/** When the component mounts we start loading the posts from this context. */
	useEffect(() => {
		loadPosts();
	}, [])

	/** Use the Orbis SDK to retrieve the posts shared in this context */
	async function loadPosts() {
		setLoading(true);
		let { data, error, status } = await orbis.getPosts({context: "https://nftmarketplace/collections/azuki/5060"});

		if(data) {
			/** If the query is successful we save the results returned in our posts array. */
			setPosts(data);
			setLoading(false);
		}
	}

	if(loading) {
		return <p>Loading posts...</p>
	}

	/** Display the results returned from query */
	if(posts && posts.length > 0) {
		return posts.map((post, key) => {
      return(
        <div key={key}>
					<p><b>Shared by: {post.creator}</b></p>
					<p>{post.content?.body}</p>
				</div>
      )
    });
	} else {
		return <p>No posts shared in this context.</p>
	}
}
```

If instead of loading posts from a specific context (in our example it’s `https://nftmarketplace/collections/azuki/5060)` you want to load posts from the global feed, you can simply use this:

```javascript
let { data, error, status } = await orbis.getPosts();
```