# Contentstack Quick Start ### About this export | Field | Value | | --- | --- | | **content_type** | course | | **platform** | contentstack-academy | | **source_url** | https://www.contentstack.com/academy/courses/contentstack-quick-start | | **language** | en | | **product_area** | cms | | **learning_path** | standalone | | **course_id** | contentstack-quick-start | | **slug** | contentstack-quick-start | | **version** | 2026-03-01 | | **last_updated** | 2026-05-11 | | **status** | published | | **keywords** | ["cms","headless cms","contentstack"] | | **summary_one_line** | Contentstack Quick Start This is designed to get you up and running quickly. Learn the necessary steps to get an application up and running with Contentstack. In this course you'll learn how to create a new stack and imp… | | **total_duration_minutes** | 20 | | **lessons_count** | 6 | | **video_lessons_count** | 6 | | **text_lessons_count** | 0 | | **linked_learning_path** | standalone | | **linked_assessment_ref** | LMS_UNCONFIGURED_COURSE_ASSESSMENT | | **markdown_file_url** | /academy/md/courses/contentstack-quick-start.md | | **generated_at** | 2026-05-11T07:02:26.668Z | | **intended_audience** | [] | | **prerequisites** | [] | | **related_courses** | [] | > **Academy MD v3** — companion `.md` for Ask AI. Quizzes and graded assessments are **LMS-only**; this file never contains answer keys. ## Course Overview | Metadata | Value | | --- | --- | | Catalog duration | 20m 29s | | Released (if known) | 2026-03-01 | | Product area | cms | ### Description ### Contentstack Quick Start This is designed to get you up and running quickly. Learn the necessary steps to get an application up and running with Contentstack. In this course you'll learn how to create a new stack and import content models that were already built. Then you'll setup a new environment and the correct delivery tokens so you can access published content. When you're done with that you will create entries within the application, and then fork a GitHub repository of an existing React App. Finally, you'll see how to install require dependencies and configure Contentstack so you can ultimately publish to a local development server and deploy your app using Contentstack Launch. #### What you'll need: [Contentstack Account](https://www.contentstack.com/login) [Node.js version 18 or later](https://nodejs.org/en/download/) [Git](https://github.com/git-guides/install-git) [Github account](https://github.com/) [VS code](https://code.visualstudio.com/) Access to this [GitHub Repository](https://github.com/contentstack/contentstack-getting-started-react-app). ### Learning objectives 1. Follow each lesson in order. 2. Practice in a training stack using placeholders **YOUR_STACK_API_KEY** and **YOUR_DELIVERY_TOKEN** in local `.env` files only. 3. Validate API responses against the official documentation. ### Topics covered cms; headless cms; contentstack ## Course structure ```text contentstack-quick-start/ ├── 01-about-contentstack-quick-start · video · 186s ├── 02-create-a-new-stack-and-import-content-models · video · 216s ├── 03-setup-an-environment-and-a-delivery-token · video · 174s ├── 04-create-entries · video · 323s ├── 05-fork-the-starter-app-repository · video · 148s ├── 06-install-dependencies-and-configure-contentstack · video · 182s ``` ## Lessons ### Lesson 01 — About Contentstack Quick Start #### Video details #### At a glance - **Title:** Introduction - **Duration:** 3m 6s - **Media link:** https://cdn.jwplayer.com/previews/2RXwQtOJ - **Publish date (unix):** 1716925471 #### Streaming renditions - application/vnd.apple.mpegurl - video/mp4 · 180p · 180p · 149308 kbps #### Timed text tracks (delivery) - **thumbnails:** `https://cdn.jwplayer.com/strips/2RXwQtOJ-120.vtt` #### Video transcript Welcome to ContentStack Quick Start. The purpose of this course is to get you started using ContentStack's headless content management system with an existing React application. Now, I am going to make some assumptions here. I'm assuming you're a developer. I'm not going to explain front-end frameworks, or how servers work, or what a GitHub repository is. Rather, I intend to show you the content flexibility that ContentStack provides and how you can manage it independently from front-end code. A headless CMS-like ContentStack has many advantages. It provides scalability and performance, which ensures that, in this case, our React application will be fast and responsive. Also, you can deliver your content across multiple platforms and devices, making it ideal for building modern web applications, mobile apps, and other digital experiences. By integrating ContentStack with React, you can leverage the power of a dynamic JavaScript library for building user interfaces with the flexibility and ease of use of a headless CMS. What this course is not is comprehensive. It's designed to get you in and out in the shortest amount of time, so you can start working on your own projects within ContentStack. If you need a deeper dive on any of the topics we discuss, there's plenty of content and courses here on Academy to help you. Before we go through the steps of using ContentStack with an existing React application, let's talk about what you'll need. First, a ContentStack account, ideally with admin access to your organization. Node.js version 18 or later, you'll need Git installed on your machine and a GitHub account. You'll also need a code editor. Really, it could be any code editor, but throughout this course, I'll be using VS Studio. To check to see what version of Node.js you have installed, you can open a terminal, and in that terminal, type node space dash v. You can see here I have version 20.13.1. Since we're here, we can also see if we have Git installed by typing git space dash dash version. If you're missing either, you can use the links in the course description to download the necessary software. Finally, the app is simple. It's a website for a fictitious restaurant called Spicy Hub. The example is simple. It's a site with a header, a main content area, and a footer. To get started, we need to create a new stack within ContentStack, and we'll take a look at that next. #### Key takeaways - Connect **About Contentstack Quick Start** 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. ### Lesson 02 — Create a New Stack and Import Content Models #### Video details #### At a glance - **Title:** Create A New Stack And Import Content Models - **Duration:** 3m 36s - **Media link:** https://cdn.jwplayer.com/previews/0ELpUwGV - **Publish date (unix):** 1716925471 #### Streaming renditions - application/vnd.apple.mpegurl - audio/mp4 · AAC Audio · 113759 kbps - video/mp4 · 180p · 180p · 149977 kbps - video/mp4 · 270p · 270p · 171755 kbps - video/mp4 · 360p · 360p · 182274 kbps - video/mp4 · 406p · 406p · 193934 kbps - video/mp4 · 540p · 540p · 228859 kbps - video/mp4 · 720p · 720p · 284993 kbps - video/mp4 · 1080p · 1080p · 417490 kbps #### Timed text tracks (delivery) - **thumbnails:** `https://cdn.jwplayer.com/strips/0ELpUwGV-120.vtt` #### Video transcript First things first, let's get ContentStack set up to act as the central repository for our website's content. Navigate to ContentStack.com and click the Login button. In the next screen, choose your region. In my case, I'll choose North America. This will bring you to the login screen and here you can either enter your credentials or you can choose SSO to login. A quick note, if you're using a trial account, you don't need to finish the steps in this video. You can move on to the next. Once you're logged in, make sure you're in the organization of your choice and once you are, you can move over to the far right and click the New Stack button to create a new stack. In the New Stack dialog box, enter a stack name. I'll enter Restaurant. Then I'll provide a brief description of Restaurant App. Finally, make sure the master language is set and in my case, I want it set to English. Once you're happy with the info, click Create. When it's done, it'll return you to the dashboard inside the Restaurant stack. Now it's at this point that you would spend some time building content models. However, to save time, I've already built them for you and I'll show you how to import them in just a bit. With that being said, if you want to learn more about creating content models, there's an entire course dedicated to building content models here on Academy. Now let's import the content models. In order to do this, you need to download the assets that we'll be using. You can do that off of the course page here on Academy. Once you download the zip, extract it. And you can see inside the folder Stack Data, we have multiple directories for the Header, Dishes, Page, and Footer content types. We also have assets for Header, Dishes, and the Home page. To make things easy, I'm going to move this Stack Data folder to the desktop for easy access. In each of those content type folders, there's a JSON file that we can import. So we need to navigate to the content models by selecting it from the left bar or by pressing C on your keyboard. To import the JSON files, just below the New Content Type button, you'll see a little import icon. Click it. That will open up the Import Content Type dialog box. Here we can click the Import button. I'll navigate to the desktop where I placed the Stack Data folder, and inside that folder is the Content Type folder. In there, I'll choose Dishes, and then I'll select the Dishes.json file and click Open. You should see Dishes imported to the Content Types panel. We just need to repeat this process for the remaining content types. So again, click the Import button, choose File, select the Footer folder, and then select the Footer.json file and open it. I'll do this for Header and Page as well. At the moment, bulk import for content types is not supported, so we simply need to repeat the process for the remaining content types. Once you're done, you should see the four content types inside of Content Stack. #### Key takeaways - Connect **Create a New Stack and Import Content Models** 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. ### Lesson 03 — Setup an Environment and a Delivery Token #### Video details #### At a glance - **Title:** Setup An Environment And Delivery Token - **Duration:** 2m 54s - **Media link:** https://cdn.jwplayer.com/previews/D7FcXrpe - **Publish date (unix):** 1716925471 #### Streaming renditions - application/vnd.apple.mpegurl - audio/mp4 · AAC Audio · 113998 kbps - video/mp4 · 180p · 180p · 138522 kbps - video/mp4 · 270p · 270p · 152104 kbps - video/mp4 · 360p · 360p · 164104 kbps - video/mp4 · 406p · 406p · 172591 kbps - video/mp4 · 540p · 540p · 195150 kbps - video/mp4 · 720p · 720p · 232996 kbps - video/mp4 · 1080p · 1080p · 303158 kbps #### Timed text tracks (delivery) - **thumbnails:** `https://cdn.jwplayer.com/strips/D7FcXrpe-120.vtt` #### Video transcript Alright, so ultimately we'll want to pull content from ContentStack for our app, and we can do that by setting up an environment. Once we've got that sorted, the next step is to generate a delivery token. This token is what grants you access to the content, like entries, through the ContentStack APIs. Let's create an environment. Navigate to the settings on the left-hand side, and then you can come over and select Environments. In the Environments section, on the top right, we want to click the New Environment button to create a new environment. This will open the Create Environment dialog box. Let's name it. I'll type Development. Seems logical enough. I also like to change the label color, so I'll click this little swatch, and I'll choose this bright orangey-red color, and then I'll click the Choose button to confirm it. Next, we need to add a base URL. I want this to be my local web server, so I'll type in http://localhost://3000. When you're done, click Create. This will successfully create the environment for you. Now, we need to create a delivery token. Again, this will authorize us to view the published content, so on the left-hand side, click Tokens. In the Tokens screen, click the Plus Delivery Token button under the illustration, or you can click the same button in the top right. Either way, this will bring you to the Create New Delivery Token screen. First, it's required to name the token. I'll type Restaurant Menu. I'll also add a description, which becomes really helpful when you have multiple tokens. I'll just type a delivery token to fetch content for the restaurant menu website. Next, you want to scope it to the main branch by selecting that option in the menu. You then need to select the publish environment. In this case, it's our development environment we just set up. As we scroll down, we can see that we have our Stack API key, and since we're going to create the delivery token, we can also create a preview token as well if we want to use the live preview feature of Content Stack. Once you're happy with the settings, click the Generate Token button. When you do, you should see that you now have a delivery token and a preview token underneath your Stack API key. You'll want to keep this information secure, but we can come back to this screen to copy the information, but we'll worry about that when the time comes. So as a final step, just make sure you come over and you click the Save button. #### Key takeaways - Connect **Setup an Environment and a Delivery Token** 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. ### Lesson 04 — Create Entries #### Video details #### At a glance - **Title:** Create Entries - **Duration:** 5m 23s - **Media link:** https://cdn.jwplayer.com/previews/vj7ByMGy - **Publish date (unix):** 1716925471 #### Streaming renditions - application/vnd.apple.mpegurl - audio/mp4 · AAC Audio · 113534 kbps - video/mp4 · 180p · 180p · 135722 kbps - video/mp4 · 270p · 270p · 146562 kbps - video/mp4 · 360p · 360p · 157845 kbps - video/mp4 · 406p · 406p · 164045 kbps - video/mp4 · 540p · 540p · 182273 kbps - video/mp4 · 720p · 720p · 213874 kbps - video/mp4 · 1080p · 1080p · 277927 kbps #### Timed text tracks (delivery) - **thumbnails:** `https://cdn.jwplayer.com/strips/vj7ByMGy-120.vtt` #### Video transcript Now, we need to create our entries, specifically for the Footer, Header, and Home page. To do this, navigate to the Entry section by either clicking the button on the left side or pressing the E key on your keyboard. To create an entry, click the New Entry button on the right corner. This will open a dialog box where you can choose the content type. In this case, we'll select Header, and then we'll click Proceed. In the next screen, we need to title the header, so we can call it Header. I know, creative. In the next section, we want to add a logo to the header. We have that asset in the folder we downloaded from the Academy site, so we'll click the Upload File link, which opens up a new dialog box where we can specify where we want this asset to be uploaded to. I could create a subfolder to stay organized, but since this is such a simple application, I'll just upload it to the main directory. So to do that, I'll just click this Choose Files button. Now I'll have to navigate to the Assets folder inside our Stack Data folder. In there is a Header folder, and in there is the RestaurantMenuLogo.png file that we want to use. So I'll go ahead and select it, and then I'll click Open. You'll see a preview of the logo in the Logo section of the entry form. Now we'll add a website title of Spicy Hub Restaurant. The next thing we need to do is add navigation links. In this first instance, the title will be Home with a URL of forward slash. To add another link, we need to add another instance by clicking this little plus sign. In the second instance, we'll title it Menu with a URL of forward slash menu. Again, we'll click the plus sign in the Menu instance to add another new instance under it, which we'll title About Us with a URL of slash about hyphen us. And finally, we'll add one last link for Contact with a URL of forward slash contact. I'm happy with our work here, so I'll save it by clicking the Save button. Now before we move on to the next entry, I know that I'll want to view this on our server when we're ready. So in order for us to do that, we have to publish it. So let's go ahead and do that by clicking the Publish button, which will open up the Publish Entry dialog box. I'm happy with the defaults here of our development environment and publishing it now, so I'll click Send. When I do, I'm asked if I'd also like to publish any references. In this case, our logo file is a reference, so we do want that uploaded. So in this case, we will click Send with References. Now let's add our entries for the footer and for the home page. Click the back arrow up here towards the top left to get back to the Entry screen, where you'll see our header entry. To create a new footer entry, I'll come over to the Footer Content Type, and then I'll click the New Entry button in the top right. This will open the Select Content Type dialog box, but you'll notice that Footer is already selected because we have that highlighted on the left-hand side. So go ahead and click Proceed. We need to add a title, which I'll call Footer. Then in the Copyright field, I'll simply type Copyright 2024 Spicy Hub Restaurant. And really, that's about it. I'll save it, and of course, I'll also publish it. Again, I'm happy with the settings in the Publish Entry dialog box, so I'll click Send. Now let's create a page entry for our home page. I'll use the back arrow to return to the Entry screen. I'll navigate to the Page Content Type and select it, and you'll notice on the rail there's a small little button where I can create a new entry. Go ahead and click it. In the entry form, I need to provide a title. I'll call it Home with a URL of a forward slash. In the Sections area, I'll click Home Banner, and I'll upload a new file. Again, the main directory is fine, so I'll click the Choose Files button. In the dialog box, I'll navigate to the Page Home directory, and I'll select the Banner.jpg file. This will act as the main banner for our home page. Go ahead and click Open. And that's all we really have to worry about for now, so let's go ahead and save it, and we can also publish it. Again, here in the Publish Entry dialog box, we can click Send, and we do want to send with references because of that banner file. So with that, we're all set with creating entries. Now we can move on to setting up the Starter app. #### Key takeaways - Connect **Create Entries** 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. ### Lesson 05 — Fork the Starter App Repository #### Video details #### At a glance - **Title:** Fork The Starter App Repository - **Duration:** 2m 28s - **Media link:** https://cdn.jwplayer.com/previews/StuPI42J - **Publish date (unix):** 1716925471 #### Streaming renditions - application/vnd.apple.mpegurl - audio/mp4 · AAC Audio · 113586 kbps - video/mp4 · 180p · 180p · 136303 kbps - video/mp4 · 270p · 270p · 148683 kbps - video/mp4 · 360p · 360p · 162903 kbps - video/mp4 · 406p · 406p · 169965 kbps - video/mp4 · 540p · 540p · 193247 kbps - video/mp4 · 720p · 720p · 231128 kbps - video/mp4 · 1080p · 1080p · 315115 kbps #### Timed text tracks (delivery) - **thumbnails:** `https://cdn.jwplayer.com/strips/StuPI42J-120.vtt` #### Video transcript To fork the Starter App Repository, you need to make sure that you're logged in to GitHub like I am here. Once you are, you can visit the URL of the Starter App, which is in the description of the course on the Academy site. Once you're there, click the Fork button up towards the top. Now this next screen may vary a little bit depending if you've authorized ContentStack in the past. If you haven't, you'll have one additional step to do that. In my case, I have, so all I need to do is make sure that the owner is correct, and then select Copy the Main Branch Only checkbox. Then I can click Fork. Now this may take a few seconds, but eventually you should see the repository for the Restaurant Menu React app. Now to work with these files, we need to move over to VS Code. My Explorer is collapsed, so I'll go ahead and expand it, and then I'll click Open Folder. We need to create a directory to house the files that we bring over from our repository. You really can name it whatever you want and put it wherever you want. To keep it simple, I'll create a new folder on my desktop and I'll call it Getting Started. Once you create the folder, click Open. Next we need to get the files from the repository, so I'll open the Terminal by coming up to the Terminal menu and choosing New Terminal. In the Terminal, you'll see that I'm currently in the Getting Started directory on my desktop, which is where I want to be. If you're not, you'll have to change your directory, but for now all I have to do is type git clone and then type in the repository address, which is https://github.com slash your username, which in my case is pz-cs, forward slash the name of the forked repository, which is restaurant-menu-react-app.git. Once you have that typed in, press Enter. In the Explorer, you should see it populated with the files and directories in the forked repo. #### Key takeaways - Connect **Fork the Starter App Repository** 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. ### Lesson 06 — Install Dependencies and Configure Contentstack #### Video details #### At a glance - **Title:** Install Dependencies And Configure Contentstack - **Duration:** 3m 2s - **Media link:** https://cdn.jwplayer.com/previews/8mWAHVVZ - **Publish date (unix):** 1716925471 #### Streaming renditions - application/vnd.apple.mpegurl - audio/mp4 · AAC Audio · 113747 kbps - video/mp4 · 180p · 180p · 145831 kbps - video/mp4 · 270p · 270p · 168830 kbps - video/mp4 · 360p · 360p · 190069 kbps - video/mp4 · 406p · 406p · 203807 kbps - video/mp4 · 540p · 540p · 247489 kbps - video/mp4 · 720p · 720p · 316525 kbps - video/mp4 · 1080p · 1080p · 489477 kbps #### Timed text tracks (delivery) - **thumbnails:** `https://cdn.jwplayer.com/strips/8mWAHVVZ-120.vtt` #### Video transcript So, moving along, what we need to do now is install the dependencies for our repository. The first thing that we need to do in the terminal is change directories to the root of the cloned repository. To do this, type cd restaurant-menu-react-app/. Then we're ready to install the dependencies using the Node Package Manager, by typing npm install, then press enter. You can see that there's a minor update available, and that really shouldn't matter in our case. The next step is changing the credential file from .env.sample to just .env. Notice in the editor it's looking for our stack API key, as well as our delivery token, environment, and region. Now before, when we created our token, I showed you that you could easily copy that info. So let's return back to that screen to do just that. I'll jump back to my browser, and in Content Stack we can navigate to Settings. From there we can choose Tokens, then select our restaurant menu token, and if you scroll down you can click the Copy to Clipboard button to copy your stack API key. Then move back to VS Code and paste that value where it currently reads your stack API key. Now you'll need to repeat that process for the delivery token as well, but with the magic of editing, mine is already updated. Next we need to update the name of our environment, which, if you remember, we called Development. So I'll type that in. Finally, my region is AWS North America, so based on the comments here, I need to set my region to US. Now let's see this app render on our local host. To do this, I'll create a new terminal window to avoid clutter. I have to make sure I'm in the correct directory, so for my purposes, I need to type CD and then I'll reference our restaurant menu React app. To run this on our local server, all you have to do is type npm start. It might take a few seconds, but as it starts the development server, your browser will open. Here, I have to allow VS Code to open Chrome, so I'll do that, and when I do, sure enough, after a few seconds, the app will load. Now that we have it running locally, the next step is to deploy our app using Launch. #### Key takeaways - Connect **Install Dependencies and Configure Contentstack** 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. ## Resources & references | Page | Companion Markdown | | --- | --- | | /courses/contentstack-quick-start/about-contentstack-quick-start | /academy/md/courses/contentstack-quick-start/about-contentstack-quick-start.md | | /courses/contentstack-quick-start/create-a-new-stack-and-import-content-models | /academy/md/courses/contentstack-quick-start/create-a-new-stack-and-import-content-models.md | | /courses/contentstack-quick-start/setup-an-environment-and-a-delivery-token | /academy/md/courses/contentstack-quick-start/setup-an-environment-and-a-delivery-token.md | | /courses/contentstack-quick-start/create-entries | /academy/md/courses/contentstack-quick-start/create-entries.md | | /courses/contentstack-quick-start/fork-the-starter-app-repository | /academy/md/courses/contentstack-quick-start/fork-the-starter-app-repository.md | | /courses/contentstack-quick-start/install-dependencies-and-configure-contentstack | /academy/md/courses/contentstack-quick-start/install-dependencies-and-configure-contentstack.md | ## Supplement for indexing ### Content summary Contentstack Quick Start This is designed to get you up and running quickly. Learn the necessary steps to get an application up and running with Contentstack. In this course you'll learn how to create a new stack and imp… Contentstack Quick Start This is designed to get you up and running quickly. Learn the necessary steps to get an application up and running with Contentstack. In this course you'll learn how to create a new stack and import content models that were already built. Then you'll setup a new environment and the correct delivery tokens so you can access published content. When you're done with that you will create entries within the application, and then fork a GitHub repository of an existing React App. Finally, you'll see how to install require dependencies and configure Contentstack so you can ul ### Retrieval tags - cms - headless cms - contentstack - contentstack-quick-start - About - Quick - Start - Create - New - Stack - and - Import - Content - Setup ### Indexing notes Chunk at each "### Lesson NN — Title" heading; copy lesson_id and topics from the preceding HTML comment into chunk metadata for RAG filters. Course slug: contentstack-quick-start. Union of lesson topic tokens: About, Contentstack, Quick, Start, Create, New, Stack, and, Import, Content, Setup, Environment, Delivery, Token, Entries, Fork, the, Starter, App, Repository, Install, Dependencies, Configure. Do not embed or retrieve LMS-only quiz items or mastery exam answer keys from this export. ### Asset references | Label | URL | | --- | --- | | Video thumbnail: About Contentstack Quick Start | `https://cdn.jwplayer.com/v2/media/2RXwQtOJ/poster.jpg?width=720` | | Video thumbnail: Create a New Stack and Import Content Models | `https://cdn.jwplayer.com/v2/media/0ELpUwGV/poster.jpg?width=720` | | Video thumbnail: Setup an Environment and a Delivery Token | `https://cdn.jwplayer.com/v2/media/D7FcXrpe/poster.jpg?width=720` | | Video thumbnail: Create Entries | `https://cdn.jwplayer.com/v2/media/vj7ByMGy/poster.jpg?width=720` | | Video thumbnail: Fork the Starter App Repository | `https://cdn.jwplayer.com/v2/media/StuPI42J/poster.jpg?width=720` | | Video thumbnail: Install Dependencies and Configure Contentstack | `https://cdn.jwplayer.com/v2/media/8mWAHVVZ/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/` | | Contentstack Account | `https://www.contentstack.com/login` | | Node.js version 18 or later | `https://nodejs.org/en/download/` | | Git | `https://github.com/git-guides/install-git` | | Github account | `https://github.com/` | | VS code | `https://code.visualstudio.com/` | | GitHub Repository | `https://github.com/contentstack/contentstack-getting-started-react-app` |