Demo TMA: TON NFT Marketplace

Overview

Build a telegram mini-app that lets authorized users see a list of NFT items that are managed via this Notion page (see Notion API).

Prerequisites

The app should:

• be built with Typescript (any stack of libraries/frameworks based on React/Node.js are acceptable)
• be well-styled and visually appealing
• use Notion API to allow manage the home page content via Notion
• use any TON HTTP-base APIs to fetch necessary on-chain data
• be based on the TON Connect authorization standard

Task Description

There are only two pages in the app. The login page lets users sign in via TON Connect. After the successful login, users are redirected to the home page. The home page is available only for authorized users (via TON Connect). On the home page, users should be able to see a list of cards; each card represents a distant NFT item.

The most important task of this assignment - the list of NFT items to be displayed is controlled via the table below, meaning you have to use Notion API to fetch the addresses from the table below:

If the above list changes (somebody adds or removes an address of the NFT item), your app should reflect the changes. These changes are infrequent - it’s enough to revalidate the addresses every 10-15 minutes. Thus, no need to use polling or web sockets.

Each card in the list displays item metadata:

• NFT friendly address
• NFT raw address
• Owner address
• Image
• Name
• Description

Finally, the home page should display the first 5 items from the list and all other items are to be loaded (or preloaded) using infinite scroll.

The Result

The task is considered completed when you send us: