Make a free web label with Notion API with Google Antigravity

We do a little bit of Shopee Affiliate, a little bit of story, some under comments.

And I want to put Jane Ling in one place, but the Shopee Affiliate storefront doesn't have a custom.

What if we try it ourselves? And what can we do? And if we want to put our review?

So let's ask Gemini, my best friend, in my head, if it's a markdown, it's going to be difficult to manage photos and videos, but my best friend says that using the Notion API with the next .js, it's interesting, and it's a good-looking web page, but it's not practical, because Gemini will give you one HTML file, and we have to go to the key from Notion.

At first I wanted to try the popular Claude Code, but I had to pay first, so I tried another one called Google Antgravity in the first version (now version two), and it was also free, so I did it.

How'd it go out? Let's go see.

P.S. When we tried version 1,

-

📁 Create a database on Notion.

Let's go to the simplest step. Let's start on the Notion side.

Start by creating a new page. Press Database to add a new database.

And then add the properties, which, in default, will be provided to us by various fields.

- Slug: It's type text. It's a hanging url. When looking at a review of a piece,

- shopeeUrl: Being url is the link we jen for affilate.

- Tag: It is multi-selected, it enters many categories.

- Published: Which checkbox is ticked and can be taken up?

Inside is the content we labeled with, you can write it in our style with a markdown.

About the photo, we can upload it on the page cover above, we'll show it on all items, but the downside is that maybe it looks like a broken file, because the photo is only an hour old, and maybe we'll change the way a little bit.

-

🌐 Notion API.

We are on the page that just created the database. Press the three points on the right and scroll down the Connections → Manage Connections. The new popup page comes. Click Go to developer portal.

Then it will open a new page as a Develops page. Go to the Connections tab and press "+ New Connection." Enter a hundred name, select Access Token, and create a new connection for us, and set something up.

- Capabilities, because we want to show the data in the database alone, so Read Content should be enough, because the content editor is us.

- User: This web retrieves data, so choose No user information because it does not need to display our data.

The Access token will be used during the web page.

Then go to the Content access tab, select the page we want. Press the "Edit access" button, tick the page we want, here is the Hub drug label, and press the "save" button.

We created two databases and included them on the Hub Drug Labels page to make it easier to manage permission.

P.S. Previously, it was available as Internal integrations with Public integrations. Three months later, I couldn't use the same method. It was changed.

-

🧑‍🚀 Google Antigravity.

We've played version 1, it's just downloading Antigravity and switching the chat view and editing the code.

When version 2 comes, you have to download two programs: Antigravity 2.0 and Antigravity IDE. You can switch each program. For Dave, we think Antigravity IDE should be enough, but in Antigravity 2.0, it's easier to find chat history of the project.

After downloading the program, first there will be an onboarding page and sign-in with google. Anyone who subscribes to Google One who is Google AI Pro or Ultra will be the developer plan. It looks like a VS Code.

-

Let's get started.

Previously, in version 1, the agent had two modes:

- Planing: Is there any planning?

- Fast: Execute for us. Fits a simple task.

In version 2, it is no longer available.

The model is available.

- Gemini 3.5 Flash (Medium) - Fast

- Gemini 3.5 Flash (High) - Fast

- Gemini 3.5 Flash (Low) - Fast

- Gemini 3.1 Pro (Low)

- Gemini 3.1 Pro (High)

- Claude Sonnet 4.6 (Thinking)

- Claude Opus 4.6 (Thinking)

On the settings side, we solved Tab Gitignore Access from off to on fear of sticking to something strange when committing code to the rest.

The prompt we put here, where we're finally going to deploy this web up Vercel.

"" "Create a website for drug labels, reviews, links, shopee affilate with Next.js, and Tailwind CSS also uses Google Fonts. It divides the content into two parts. It is connected to the Notion API. The main web page is divided into four parts:

- title and description of this web title is a drug hub label description is a combination of good things actually used by MikkiPastel

- Feature review: A horizontal banner highlighting bundles of multiple pieces together. Use a database on Notion called feature items.

- Item review: Show each item on the grid with the product name tag of the product with the button to the shopee and can copy the link shopee to paste. Use the Notion database called recommended items.

- Footer.

When you press each item from the feature review and the item review will open another page to view the full review.

And then finally deploy it on the vercel. "" "

Then wait a moment, it will create an implementation plan, which you want to adjust, can cover for comment, such as "review has a name, slug, shopeUrl, tags (multi-select), published (checkbox - will be displayed on the page when it is ticked), and take content from the inside page to display."

When we comment until satisfied, then press Submit. It creates a task to do what we can order. It will write the code according to the task for us. After that, we can review the file at a time.

If there is something for it to solve or want to customize something, we can cap the image to tell you whether to do this or not to solve the code itself. Don't forget to press save.

Once reviewed and accepted, insert the key and id database from Notion by creating a .env.local file on the outside and putting these variables in this file.

"'env.

NOTION _ TOKEN = ntn _ abc123...

FEATURE _ DB _ ID = xxx...

RECOMMEND _ DB _ ID = yyy..

"'

- NOTION _ TOKEN: Take it from the first Connection, and it looks like this, ntn _ abc123...

- FEATURE _ DB _ ID with RECOMMEND _ DB _ ID: Go to Settings → Manage data sources and go to the source we want. Click at three points. Select Copy data source ID and paste it.

-

How much AI Credit did you use?

Google Antigravity is now free, but limited. For MacOS residents, go to App Settings and go to Anitigravity IDE Settings, then go to the Models tab to see Model Quota.

-

🌐 deployed vercel.

First we take the project up repo on Github.

Since the web is Next.js, the deployment channel is the most suitable web for everyone, Vercel.

First go to Vercel's console page, then press the "Add New..." select Project.

Then click "Import" with the project we want to deploy to the real web.

It will take you to the New Project page, enter the keys we used earlier at .env.local, click Environment Variables and then enter the keys and values, or press Import .env and throw the file when you have already pressed the "Deploy" button.

-

🛍️ Put us in the Shopee Affiliate.

Can read in here

# Includes IT matters # lemon 8 Howtoo # Club, games and tech # programmer # Developer