# What We'll Build

### About this export

| Field | Value |
| --- | --- |
| **content_type** | lesson |
| **platform** | contentstack-academy |
| **source_url** | https://www.contentstack.com/academy/courses/contentstack-for-developers/what-we-ll-build |
| **course_slug** | contentstack-for-developers |
| **lesson_slug** | what-we-ll-build |
| **markdown_file_url** | /academy/md/courses/contentstack-for-developers/what-we-ll-build.md |
| **generated_at** | 2026-05-04T05:36:51.089Z |

> Part of **[Contentstack for Developers](https://www.contentstack.com/academy/courses/contentstack-for-developers)** on Contentstack Academy. **Academy MD v3** — structured for retrieval; no quiz or assessment keys.

<!-- ai_metadata: {"lesson_id":"01","type":"text","duration_minutes":3,"topics":["What","Build"]} -->

#### Lesson text

## Developer Onboarding Course - Introduction

Welcome to our exciting new course on developing web applications with Contentstack! If you're looking to build powerful, scalable, and customizable web applications, then you're in the right place. In this course, we'll guide you through the fundamentals of Contentstack, including content modeling, API and SDK usage, and more. We'll also cover advanced topics such as extending a NextJS app, enabling localization, and optimizing your content delivery. With our easy-to-follow tutorials and hands-on exercises, you'll quickly gain the skills and knowledge needed to build stunning web applications that meet the needs of your clients and users. So, whether you're a seasoned developer or just starting out, join us on this exciting journey and take your web development skills to the next level with Contentstack!

The main tasks in the course are:

1.  Create a new detail page (new content type, new NextJS Component, new CD API query)
2.  Create a new gallery landing page (new content type, new NextJS Component, more complicated CD API Queries)

**We also cover the following:**

*   Starter app overview, install, and walk through
*   Using CMA to read and import content
*   SDKs/APIs overview and introduction
*   SDKs/APIs deep dive with patterns/practices
*   Roles and Permissions
*   Workflow
*   Marketplace intro
*   Automation hub intro

## What we will be building

### Composable Hero Gallery Page:

![composable-heros.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd51a0c5b982c72f8/664c027a1983ea9d6dac29b4/composable-heros.png)

### Composable Hero Detail Page:

![composable-heros-detail.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltcba8639d82e39f82/664c02a3785339639e9e3d9f/composable-heros-detail.png)

## Getting Started

1.  **Create a new Training Instance** - Go to [https://www.contentstack.com/academy/training-instance](https://www.contentstack.com/academy/training-instance) and select **Create a Training Instance**.
2.  **Download the course code from Github** - ([https://github.com/contentstack/contentstack-academy-playground](https://github.com/contentstack/contentstack-academy-playground)).
3.  **Rename the .env.local.sample file** to .env.local and update the following configuration properties:  
    ![rename-sample.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb3b6b76e3ee547ed/664c033cc9024cafa4ad58b4/rename-sample.png)
4.  **Build the project** with 'npm i'.
5.  **Run the website** with 'npm run dev'.

#### Key takeaways

- Connect **What We'll Build** back to your stack configuration before moving to the next module.
- Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment.
- Re-read the delivery versus management boundary for anything you changed in the entry model.

## Supplement for indexing

### Content summary

What We'll Build. Developer Onboarding Course - Introduction Welcome to our exciting new course on developing web applications with Contentstack! If you're looking to build powerful, scalable, and customizable web applications, then you're in the right place. In this course, we'll guide you through the fundamentals of Contentstack, including content modeling, API and SDK usage, and more. We'll also cover advanced topics such as extending a NextJS app, enabling localization, and optimizing your content delivery. With our easy-to-follow tutorials and hands-on exercises, you'll quickly gain the skills and knowledge needed to build stunning web applications that meet the needs of your clients and users. So, wheth

### Retrieval tags

- What
- Build
- contentstack-for-developers
- lesson 01
- What We'll Build
- contentstack-for-developers lesson

### Indexing notes

Index this lesson as a primary chunk tagged with lesson_id "01" and topics: [What, Build].
Parent course slug: contentstack-for-developers. Use asset_references URLs as thumbnail hints in search results when present.
Never surface LMS quiz content or assessment answers from this file.

### Asset references

| Label | URL |
| --- | --- |
| composable-heros.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd51a0c5b982c72f8/664c027a1983ea9d6dac29b4/composable-heros.png` |
| composable-heros-detail.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltcba8639d82e39f82/664c02a3785339639e9e3d9f/composable-heros-detail.png` |
| rename-sample.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb3b6b76e3ee547ed/664c033cc9024cafa4ad58b4/rename-sample.png` |

### External links

| Label | URL |
| --- | --- |
| Contentstack Academy home | `https://www.contentstack.com/academy/` |
| Training instance setup | `https://www.contentstack.com/academy/training-instance` |
| Academy playground (GitHub) | `https://github.com/contentstack/contentstack-academy-playground` |
| Contentstack documentation | `https://www.contentstack.com/docs/` |
| composable-heros.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd51a0c5b982c72f8/664c027a1983ea9d6dac29b4/composable-heros.png` |
| composable-heros-detail.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltcba8639d82e39f82/664c02a3785339639e9e3d9f/composable-heros-detail.png` |
| rename-sample.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb3b6b76e3ee547ed/664c033cc9024cafa4ad58b4/rename-sample.png` |