Part 1: set up Contentstack
Before you write frontend code, set up the content side properly.
Step 1: create your account and stack
Create a Contentstack account and create a new stack.
If you are using a free account, pay attention to the region your stack is assigned to. Some free accounts default to the EU region, and that matters when configuring SDKs and content delivery settings.
Step 2: design your content model
For this example website, use a small but practical content model.
Content type | Purpose | Fields |
|---|---|---|
homepage | Main landing page hero | hero_title, hero_subtitle, hero_image, cta_text, cta_link |
landing_page | Service detail pages | page_title, slug, main_content, hero_image, service_price, launch_date |
blog_post | Blog content | blog_post_title, slug, body, cover_image, published_date |
team_member | Team page cards | name, role, photo, bio, linkedin_url |
navigation_item | Global navigation | label, link, order |
This is where the practical use case matters. We are not modeling random content for the sake of a tutorial. We are modeling a real site structure that maps cleanly to pages developers often need to build.
Step 3: create an environment
Create a development environment and point it at your local site URL, typically http://localhost:3000.
Step 4: create API credentials
You will need:
your stack API key
a delivery token scoped to the environment you want to fetch from
Store them in environment variables. Never hardcode them in files that could end up in version control.
CONTENTSTACK_API_KEY=your_stack_api_key
CONTENTSTACK_DELIVERY_TOKEN=your_delivery_token
CONTENTSTACK_ENVIRONMENT=developmentStep 5: add sample content
Before you ask AI to generate frontend code, create a few real entries.
This is more important than it sounds. AI is much more effective when you can point it to actual field structures and real content instead of hypothetical data. Create at least:
one homepage entry
two or three service pages
two or three blog posts
several navigation items
a few team members