# 7. FeedPage

![FeedPage](https://2361259531-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo8dCjygb765jszAbMUcT%2Fuploads%2Fgit-blob-35949ec64394ddbae33832b99dbbc87dbea869d5%2Fklaystagram-feedpage.png?alt=media\&token=f7552d6b-0959-48f2-a5e6-d27d3e5842c1)

FeedPage is consisted of 3 main components that interact with `Klaystagram` contract.

[7-2. `UploadPhoto` component](https://archive-docs.klaytn.foundation/content/dapp/tutorials/klaystagram/7.-feedpage/7-2.-uploadphoto-component)\
[7-3. `Feed` component](https://archive-docs.klaytn.foundation/content/dapp/tutorials/klaystagram/7.-feedpage/7-3.-feed-component)\
[7-4. `TransferOwnership` component](https://archive-docs.klaytn.foundation/content/dapp/tutorials/klaystagram/7.-feedpage/7-4.-transferownership-component)

```javascript
// src/pages/FeedPage.js

const FeedPage = () => (
  <main className="FeedPage">
    <UploadButton />               // 7-2. UploadPhoto
    <Feed />                       // 7-3. Feed
  </main>
)
```

```javascript
// src/components/Feed.js

<div className="Feed">
  {feed.length !== 0
    ? feed.map((photo) => {
      // ...
      return (
        <div className="FeedPhoto" key={id}>

            // ...
            {
              userAddress.toUpperCase() === currentOwner.toUpperCase() && (
                <TransferOwnershipButton   // 7-4. TransferOwnership
                  className="FeedPhoto__transferOwnership"
                  id={id}
                  issueDate={issueDate}
                  currentOwner={currentOwner}
                />
              )
            }
            // ...
        </div>
      )
    })
    : <span className="Feed__empty">No Photo :D</span>
  }
</div>
)
```

To make component interact with contract, there are 3 steps.

**First**, create `KlaystagramContract` instance to connect contract with front-end. **Second**, using `KlaystagramContract` instance, make API functions that interact with contract in `redux/actions`\
**Third**, call functions in each component

Let's build it!
