Ton Nft Marketplace
Demo NFT Marketplace built with Next.js and Tailwind
Telegram Mini App built with Next.js that allows authorized users to view a list of NFT items.
Features and Technology Stack
- Next.js v14 and React v18
- TonConnect for authorization
- Notion Integrations as a main data source
- Ton API to retrieve the data from blockchain
- Tailwind for styling
- Vercel for deployment
You can find the deployed service following this link.
Getting Started
Clone the repository, install dependencies, and copy the .env.example contents to .env:
~ git clone [email protected]:krau5/ton-nft-marketplace.git
~ cd ton-nft-marketplace
~ npm i
~ cp .env.example .env
Setting up environment variables
To configure the .env file, you need data from Notion and Tonconsole.
Notion configuration
- Open your Notion Integrations, create an internal integration, and copy the Internal Integration Secret to the
NOTION_TOKENfield in.env. - Connect your integration to the Notion page containing the NFT table.
- Copy the link to the table node on your page.
- Extract the table ID from the URL (the part after
#) and paste it into theNOTION_NFT_TABLE_IDfield in.env.
Example Notion URL:
https://www.notion.so/user/demo-page-19ea6efae12345719034d4e310fa4964?pvs=4#19ea6efae5568056a6deec39479f3d25
Extracted NOTION_NFT_TABLE_ID:
19ea6efae5568056a6deec39479f3d25
TON API Configuration
- Open Tonconsole and create an API key.
- Copy and paste it into the
TON_API_KEYfield in.env.
Once environment variables are set up, you can start the application with:
~ npm run dev
The app will be available at http://localhost:3000/.
Scripts
npm run dev- launches the application in development modenpm run build- builds the applicationnpm start- runs the production buildnpm run lint- checks code quality using ESLintnpm run lint:fix- fixes linting issues if possiblenpm run check-types- launches type checking process using TS compiler
