Learn about managing application content in an Efficient Way
Tags: productivity, api, backend
Published: 2024-01-13 01:33:51

Ever wanted to create a Full Stack Application but struggling with managing the Content to be stored and displayed? 🤔

Well, Strapi has got you covered ✅

If we want to develop a backend for any kind of application, we need to write code from scratch along with choosing a Database, planning out how the APIs will work, making authentications, etc.

But Strapi makes it easy to build and manage backend with it’s built-in features. Not only that but it also generates code for it which it 100% JavaScript 🚀

### What is Strapi?

It is an open-source and fully customizable **Headless Content Management System (CMS)**, meaning that developers have complete freedom over how the data will be displayed using any frontend framework.

It is completely functionable with any Framework using JavaScript / TypeScript.

Using Strapi, anyone can develop a Backend for any application within minutes of work.

It provides a very Interactive Admin Panel to create, manage and deliver content, using APIs to fetch and display those datasets across various applications.

### Getting Started

**Step 1: Installing Strapi**

To get started, we need to run a simple command to build strapi application

```powershell
npx create-strapi-app@latest PROJECT_NAME
```
OR
```powershell
yarn create strapi-app PROJECT_NAME
```

This will automatically create an entire admin panel for strapi which could be accessed from `[localhost:1337/admin](http://localhost:1337/admin)` 


![Strapi Admin Panel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxd5ti32sz6jvq5b3c6g.png)

This is the look of the Strapi Admin Panel. Here you can manage all the collections that would be used to store data and displayed on the applications

**Step 2: Designing Data**

Just like developing Database Schema for any application, we would be structuring the data as we want, but without writing a **Single Line of Code.**


![Strapi Default User Collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5ssma5etae8tb3ulnbs.png)

Strapi comes with a default User Collection which would be used for user authentication on our applications

From this page, we can create our own collection types as per our needs with just few clicks🖱️

**Step 3: Adding a Collection Type**

Firstly, Collections are just like tables in any Relational Database. Or it is also similar to Collections in MongoDB.

Now suppose we want to create a collection for storing books, we will initially create a collection type named `book`

Once the collection type is created, we will be able to define the fields that we wish to have in our `book` collection


![Adding fields to Strapi Collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zkwcmlg9ci59uxyvp93t.png)

While adding a field, we can mark it as required, specify it’s minimum and maximum length, and also mark it as a Unique field

After adding some fields in our collection type, we get to see something like this


![Fields in newly added Collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2k406a6jjvgo0wvd1ajn.png)

Here we have defined some fields which are:

1. name (required, type → text, min. length → 3)
2. author (required, type → text, min. length → 3)
3. published (required, type → date)
4. price (required, type → number)
5. image (required, type → media)

After we are done with building our Collection Type, we can now add content in the collection through strapi dashboard itself by simply clicking on the `Content Manager` tab in the sidebar, then selecting our newly created collection type and then clicking on `Create New Entry` button


![Adding entry in the Created Collection Type](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ltg1180sqmzrnxixrpv.png)

Here we get an interactive form, based on the fields chosen while building the collection type, to add data to our collection.

Just for an example I created an Entry for a Book which can be accessed from any application using API links


![Entry Created in Book Collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cc5bt04q7xbx6z7zhafu.png)

**Step 4: Using the Content added in Strapi Collection**

To access data from APIs, we need an API Token to access the data

In this case, the API token can be generated for a single or multiple Collection Types. We just need to Navigate to Settings > API Tokens (under `Global Settings`)

After that, we need to Specify permissions for Public and Authenticated users to a specific application. This can be set according to our needs by finding the settings under `Users & Permissions Plugin` tab.

There we can choose the actions that will be allowed to Authenticated or Unauthenticated users. For Example, recently we created a collection type named `book`

Now for this collection type, we can choose which type of users can **create**, **update**, **delete**, or even **find** a book.


![Getting API links for Collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5voss3vw405in6f6b81.png)

Here as we select the actions allowed to the specified users, we get the API path to access the data.

Therefore, according to our example, we can **find** books if and only if we are authenticated, and it can be done by using the link `localhost:1337/api/books`

So this was the basic introduction to Strapi: Headless CMS. There is much more to explore in Strapi Admin Dashboard and it is free of cost. 

Do checkout it's amazing website, https://strapi.io/ for more information

If you want tutorials on building projects with Strapi, here are some links to those as well 😉

1. [Strapi Tutorials for Beginners - CodeWithHarry (in Hindi)](https://youtube.com/playlist?list=PLu0W_9lII9ajKKSG5aROCiw9iro5vK-gE&feature=shared)
2. [Strapi Tutorial (with React & GraphQL) - Net Ninja](https://youtube.com/playlist?list=PL4cUxeGkcC9h6OY8_8Oq6JerWqsKdAPxn&feature=shared)

So that is all for now. Feel free to reach out to me via [LinkedIn](https://www.linkedin.com/in/arya-danech-a17538252/) or [Twitter (X)](https://twitter.com/aryadanech14).
Do checkout my repositories on [GitHub](https://github.com/aryad14)

Happy Learning 🚀