# Architecture Walkthrough

### About this export

| Field | Value |
| --- | --- |
| **content_type** | lesson |
| **platform** | contentstack-academy |
| **source_url** | https://www.contentstack.com/academy/learning-paths/contentstack-developer-certification/contentstack-for-developers/architecture-walkthrough |
| **course_slug** | contentstack-for-developers |
| **lesson_slug** | architecture-walkthrough |
| **learning_path_slug** | contentstack-developer-certification |
| **markdown_file_url** | /academy/md/learning-paths/contentstack-developer-certification/contentstack-for-developers/architecture-walkthrough.md |
| **generated_at** | 2026-05-11T07:02:35.821Z |

> Lesson in **[Contentstack for Developers](https://www.contentstack.com/academy/learning-paths/contentstack-developer-certification/contentstack-for-developers)** within the **contentstack-developer-certification** learning path on Contentstack Academy. **Academy MD v3** — structured for retrieval; no quiz or assessment keys.

<!-- ai_metadata: {"lesson_id":"04","type":"video","duration_seconds":173,"video_url":"https://cdn.jwplayer.com/previews/gu1hi4sL","thumbnail_url":"https://cdn.jwplayer.com/v2/media/gu1hi4sL/poster.jpg?width=720","topics":["Architecture","Walkthrough"]} -->

#### Video details

#### At a glance

- **Title:** Dev-big Picture Architecture
- **Duration:** 2m 53s
- **Media link:** https://cdn.jwplayer.com/previews/gu1hi4sL
- **Publish date (unix):** 1716254996

#### Streaming renditions

- application/vnd.apple.mpegurl
- audio/mp4 · AAC Audio · 114030 kbps
- video/mp4 · 180p · 200p · 137534 kbps
- video/mp4 · 270p · 300p · 148470 kbps
- video/mp4 · 360p · 400p · 162344 kbps
- video/mp4 · 406p · 450p · 169505 kbps
- video/mp4 · 540p · 600p · 193874 kbps

#### Timed text tracks (delivery)

- **thumbnails:** `https://cdn.jwplayer.com/strips/gu1hi4sL-120.vtt`

#### Video transcript

Hi, welcome to ContentStack. In this video, we'll take a look at the front-end and the back-end architecture. First, let's start with the front-end. Here we have a web application and our website visitors are visiting the application and that application is querying ContentStack for published content. ContentStack publishes the content in JSON format and that's published to the content delivery system. On top of the content delivery platform, we also have a REST API and a GraphQL API. These APIs are read-only. When you request content from the API, internally ContentStack looks into the CDN and retrieves the content from the CDN. This means it's really fast and high performance for your web applications using the ContentStack API. In addition to these APIs, we also provide several SDKs to make it fast and easy for you to get started with the platform. Some of the SDKs that we have for the front-end include JavaScript, PHP, Java, .NET, Node.js. We also have Python, Ruby, and several other SDKs here for web applications. On the mobile side, we have SDKs for iOS, Android, Dart, Flutter, and also React Native. And finally, we also have customers that use ContentStack content inside the game or also inside a chat application. And again, this is the front-end application, the front-end APIs that really focus on high performance and read-only. We also have a Postman collection that gives you examples of how to use these APIs using the REST API and also the GraphQL API. Now, moving to the back end of the platform, the idea is really about making it the best user experience for editors and our authors and our end users. What do we mean by that is that we provide a very good, easy-to-use interface out of the box to update, edit, create content, and publish that content. In addition to that, we provide extensions and marketplace applications that connect to third-party systems such as DAMN providers, e-commerce platforms, or search engines. When you publish content from ContentStack, that content goes out to content delivery. And again, that's JSON. Now, if you want to trigger automatic events on publish or save, you can do that with webhooks. Here, you can listen to a save, publish, update, or workflow event. That webhook can call a serverless function, and that can go ahead and send the content to something like Amazon's recognition API for tagging or to a search engine like Algolia for indexing. This is also a way that you can invalidate a cache if you have a custom cache layer in your web application. Recently, ContentStack released a product called Automation Hub, and that sits right over here next to webhooks. And again, it listens on save, publish, update, and workflow and provides a low-code, no-code solution to provide the similar functionalities that you can find from webhooks. That's about it for this video. Thank you for watching. See you next time.

#### Key takeaways

- Connect **Architecture Walkthrough** 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

Architecture Walkthrough. Architecture Walkthrough in Contentstack for Developers (contentstack-for-developers).

### Retrieval tags

- Architecture
- Walkthrough
- contentstack-for-developers
- lesson 04
- Architecture Walkthrough
- contentstack-for-developers lesson

### Indexing notes

Index this lesson as a primary chunk tagged with lesson_id "04" and topics: [Architecture, Walkthrough].
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 |
| --- | --- |
| Video thumbnail: Architecture Walkthrough | `https://cdn.jwplayer.com/v2/media/gu1hi4sL/poster.jpg?width=720` |

### 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/` |
