Headless CMS

Definitions & benefits

Tools & Concepts

Open source

Features

Authentication

Custom plugins & Marketplace

Webhooks

Multilingual CMS

APIs

Dynamic Zones

User roles & permissions

Content Modeling

Security & Privacy

Use Cases

Ecommerce

Blog

Forum

About Strapi

Life at Strapi

Releases & Roadmap

Events

Community

News

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

How tos

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

# Creating a Recipe Book with Strapi

[Strapi](https://strapi.io) is a Javascript-based headless CMS that helps you build and manage the backend of your project with ease while allowing you to use whatever technology you want on the frontend. It works really well with [Next.js](https://nextjs.org/), a modern React framework that provides hybrid static and server rendering, Typescript support, and file-system routing, among other features.

In this article, you will learn how to use these versatile technologies together by creating a virtual recipe book. By the end, you will know how to use Next.js and Strapi to form a full-stack app. If you would like to see the code from this tutorial in its entirety, check out the [GitHub repo](https://github.com/zealousAnemone/strapi-recipes-v4). Fork and clone it if you would like to follow along, or expand upon it and make it your own.

**Note:** If you fork this project, please make sure you create recipes and categories as described later in this article, then set permissions accordingly. Running the app as is will produce an error if you do not complete those steps.

## Setting Up Strapi

To set up Strapi, you first need to have [Node.js](https://nodejs.org/) and npm installed.

Then do the following:

1. Create a folder for your project by running `mkdir strapi-recipes` in the terminal; then `cd` into that folder.
2. Create your Strapi project using `npx create-strapi-app@latest backend --quickstart`.

**Note**: ​​The quick start installation sets up Strapi with a SQLite database. Other databases and installation options are available (see [CLI installation guide](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/installation/cli.html#preparing-the-installation)).

3. Find that a local server will automatically start up. Navigate to `localhost:1337/admin` and create an account on the admin panel using an email address.

## Setting Up Next.js

Now that you have the backend set up, it’s time to set up the frontend using Next.js. To do this, open up another terminal window and navigate to the `strapi-recipes` folder. Then run `npx create-next-app frontend`. This will make a Next.js project called “frontend.” `cd` into that folder, then use `npm run dev` to start your Next.js app. You should now have your Strapi backend running on `localhost:1337` and your Next.js frontend running on `localhost:3000`.

## Implementing the Recipe Book

Now that you have both the frontend and backend running, it’s time for the fun part. For the recipe book, you will first create content-types in Strapi to represent the recipes themselves, along with recipe categories. Then you will design the appearance of the recipe book using Next.js and connect the frontend and backend using Strapi’s built-in REST API.

### Creating the Collection Types

To create a collection type, go to **PLUGINS** > **Content-Types Builder** in the admin panel. Next, under **COLLECTION TYPES**, click **Create new collection type**.

In the modal, type *recipe* under **Display name**, then click continue. This will bring up different options for the fields. For each recipe, you will want to have a name, a list of ingredients, instructions, a photo, and a recipe category (e.g., breakfast, soups, and bread), so you will need to add a field for each of these.

Add your first field by choosing **Text**. Type “name” in the **Name** field. This will be the name of your recipe. Then click the **Add another field** button. This time, choose **Rich text**. Enter “ingredients” in the **Name** field. Follow the same instructions to create a **Rich text** field named “instructions” and a **Media** field named “photo”.

Note that for the **Media** field, you should choose **single media**, as you will only be adding one photo per recipe for this project. Don’t worry about the **category** field yet. Once you have added all the fields, make sure you save your content type.

![Fields](https://i.imgur.com/y8djgyy.png) 

Now it’s time to create the **category** collection type. Use the same process as you did when you created the recipes. Click **Create new collection type** under **COLLECTION TYPES**. This one will be named “category”, and it will consist of two fields: a **Text** field called “category” and a **relation** between it and the recipe type.

Create the **Text** field the same way as before, then create a **relation**. This will link the two types together, like a foreign key in an SQL database. You will see a modal pop up like the one below.

![Modal with header “Add new Relation Field” and relation between categories and recipes mapped out](https://i.imgur.com/S1K0c9V.png) 

Make sure **Category** appears in the box on the left and **Recipe** appears on the right. Then choose the appropriate relationship between the two. Each category can apply to multiple recipes, so you will choose the **Category belongs to many Recipes** relation. Then hit **Finish** and **Save**. Your collection types are now complete.

At this point, you should create a few recipes and a few categories so you have something to display on the frontend. To do this, go to **Content Manager** > **COLLECTION TYPES** > **category**, then click the button to **Add new entry**. Type a category name in the **category** field, hit **Save**, and then hit **Publish**. Do this for as many categories as you want.

Then do the same thing for the recipes. Go to **Content Manager** > **COLLECTION TYPES** > **recipe** and click the button to **Add new entry**. Then fill in the fields for the recipe name, ingredients, and instructions. Add a photo if you want and choose a category from the dropdown menu on the right. Note that if you leave any text or rich text field empty, it will throw an error on the frontend later, so make sure you add some sort of data to those fields.

Once you have your collection types created and some data entered, you need to set permissions. This will ensure that your data is reachable from the frontend. Go to **GENERAL** > **Settings** > **USERS & PERMISSIONS PLUGIN** > **Roles** > **Public**. Check the boxes for **find** and **findone** for each of your content types. You can check to make sure this works correctly by accessing the collections using [Postman](https://www.postman.com/). Send a `GET` request to `localhost:1337/api/recipes` and another to `localhost:1337/api/categories`. You should get JSON objects as responses for both.

### Designing the Recipe Book

Now that your backend is up and running, it’s time to create your recipe book in Next.js. If you don’t already have your Next.js app running, navigate into the `frontend` folder (while keeping Strapi running in a separate terminal) and run the command `npm run dev`. Your Next.js app will open on `localhost:3000`.

Your basic recipe book will consist of recipe cards with names and photos that link to the full recipes. To accomplish this, you will create a reusable **Recipe** card component that will be used on index.js to display each recipe. Then you will create a page that displays each of the recipes using dynamic routing.

To start, beneath the **Home** component in `pages/index.js`, write an async `getServerSideProps` function to fetch the recipes from the backend. Your function should look like this:

```javascript
export async function getServerSideProps() {
  const recipeRes = await fetch('http://localhost:1337/api/recipes?populate=*');
  const categoryRes = await fetch('http://localhost:1337/api/categories');

  const recipes = await recipeRes.json();
  const categories = await categoryRes.json();

  return {
    props: {
      recipes,
      categories,
    },
  };
}

```

Notice the `populate` parameter used with the `recipes` endpoint. By default, relations are not populated when fetching entries, so you need to specify that you want those returned as well. To do this, you can either specify the desired relations in the URL, or use a wildcard (`*`) to populate all relations, as shown above. This way, the categories associated with each recipe will be accessible to the frontend.

Next, create a `components` folder and a file inside that for your recipe card component. This component will take the recipe object as an argument and display the recipe name, image, and category.

```javascript
const Recipe = ({recipe}) => {
  return (
    <div className='recipe-card'>
      <div className="recipe-name"><h3>{recipe.attributes.name}</h3></div>
      <img src={`http://localhost:1337${recipe.attributes.photo.data.attributes.formats.thumbnail.url}`} alt={recipe.name} className="recipe-image" />
      
      <span className='category'>{recipe.attributes.category.data.attributes.category}</span>
    </div>
  )
  }
  
  export default Recipe;

```

Now that you have your recipe card component, go back to `pages/index.js` and delete the contents of the **Home** component. Replace them with the following, which maps through the recipe object retrieved from the backend and, for each recipe, renders a Recipe component:

```javascript
export default function Home({ recipes }) {
  return (
    <div>
      <Head>
        <title>Strapi Recipe Book</title>
      </Head>
      <div id="recipe-container">
        {recipes.data.map((recipe) => <Recipe recipe={recipe} / key={recipe.data.id}>)}
      </div>
    </div>
  );
}
```

You can do some basic styling here to make your cards look nicer. The focus of this tutorial isn’t the CSS, but you can get the result below using basic CSS with CSS Grid.

![Recipe cards displaying recipe names and photos](https://imgur.com/5gR0NC0.png)

#### Creating Recipe Pages Using Dynamic Routes

Right now, you can see the names and photos of the recipes, but you can’t see the full recipe. In Next.js, you can use dynamic routes to create a page that will show a single recipe based on its ID.

To do this, create a folder in `pages` called `recipe`, then create a file in that folder called `[id].js`. The code in this file will look something like this:

```javascript
import { marked } from 'marked';
import Link from 'next/link';

const fullRecipe = ({ recipe }) => {
  const getMarkdownText = (text) => {
    const formattedText = marked(text);
    return { __html: formattedText };
  };
  return (
    <div className="full-recipe">
      <h1>{recipe.attributes.name}</h1>
      <img
        src={`http://localhost:1337${recipe.attributes.photo.data.attributes.formats.medium.url}`}
        alt={recipe.attributes.name}
        width={400}
      />
      <h3>Ingredients</h3>
      <div
        dangerouslySetInnerHTML={getMarkdownText(recipe.attributes.ingredients)}
      ></div>
      <h3>Instructions</h3>
      <div
        dangerouslySetInnerHTML={getMarkdownText(
          recipe.attributes.instructions
        )}
      ></div>
      <Link href="/">
        <button className="home">Home</button>
      </Link>
    </div>
  );
};

export default fullRecipe;

export async function getStaticPaths() {
  const response = await fetch('http://localhost:1337/api/recipes?populate=*');
  const recipes = await response.json();
  return {
    paths: recipes.data.map((recipe) => ({
      params: {
        id: recipe.id.toString(),
      },
    })),
    fallback: false,
  };
}
export async function getStaticProps({ params }) {
  const response = await fetch(
    `http://localhost:1337/api/recipes/${params.id}?populate=*`
  );

  const recipe = await response.json();

  return {
    props: { recipe: recipe.data },
    revalidate: 1,
  };
}

```

There’s a lot in there, so focus first on the `getStaticPaths` function. This function gets called at build time and pre-renders paths for you. In this case, you are pre-rendering paths based on recipe ID. (Note that you need to convert the ID to a string for this to work correctly.)

Next, look at the `getStaticProps` function. This is basically the same as the function you created in `index.js`, but here, it is fetching a single recipe based on the ID in the URL. For example, `localhost:3000/recipe/1` will fetch the recipe with the ID number of 1.

Finally, look at the `fullRecipe` component. This takes in the recipe object from the props and displays all the fields. You will notice that there is a library called [Marked](https://marked.js.org/) being imported here then used in a small function called `getMarkdownText`. This is necessary because some of the fields you want to display (**Ingredients** and **Instructions**) are rich text types. Rich text in Strapi uses [Markdown](https://daringfireball.net/projects/markdown/), but the formatting you used when creating your recipes will not automatically appear correctly on the frontend. You will need to use a library (like Marked) to convert the Markdown formatting to HTML. To download and install *Marked*, simply run `npm install marked`.

Note that to display converted Markdown in React, you must use `dangerouslySetInnerHTML`, the React alternative to `innerHTML`.

![Recipe for avocado toast with the image of toast and formatted with bullet points](https://imgur.com/I8fTlg7.png)

Once you have your full recipe pages set up, go back to your recipe component and add a link to them. In the code below, you can see that the recipe component now has a link in it to the full recipe.

```javascript
 const Recipe = ({recipe}) => {

  return (
    <div className='recipe-card'>
      <div className="recipe-name"><a href={`http://localhost:3000/recipe/${recipe.id}`}><h3>{recipe.attributes.name}</h3></a></div>
      <img src={`http://localhost:1337${recipe.attributes.photo.data.attributes.formats.thumbnail.url}`} alt={recipe.attributes.name} className="recipe-image" />
      
      <span className='category'>{recipe.attributes.category.data.attributes.category}</span>
    </div>
  )
  }
  
  export default Recipe;
```

## Conclusion

[Strapi](https://strapi.io) and Next.js are a great combination and are an excellent alternative to a traditional CMS if you want to have more control over how your content is managed and presented. In this article, you learned how to make a simple recipe book using these technologies, but there are tons of other types of projects you can create using your new skills. To learn more about Strapi, check out their [docs](https://strapi.io/documentation/developer-docs/latest/getting-started/introduction.html).


medium_How to change the default.png

small_How to change the default.png

thumbnail_How to change the default.png

How to change the default.png

Creating a Recipe Book with Strapi

Content management systems (CMS) are a useful and popular tool for creating web pages, blogs, and online stores. [WordPress](https://strapi.io/wordpress-alternative) in particular powers about [42.5 percent of all websites](https://w3techs.com/technologies/details/cm-wordpress), including CSS-Tricks. If you like the ease of CMS but are looking for a faster, more efficient solution, Strapi is perfect.

[Strapi](https://strapi.io/) is a JavaScript-based headless CMS. In a headless CMS, the content is decoupled from the presentation. In other words, an API serves up your content to be consumed by a separate head, or frontend. This is different from traditional CMSes, which are sometimes referred to as “monolithic” because the content and presentation are combined.


## Why Decouple Content from Presentation?

So why would you want to decouple content from the presentation? There are many reasons.
First, writers can focus on writing, and developers can focus on developing. With a traditional CMS, the developer is bound by the constraints of that particular CMS. For example, WordPress themes need to be constructed in a very specific manner using PHP. With a headless CMS, writers still have access to post content using a familiar portal, and developers are free to use whatever technology they want to create the frontend.

Second, your site will benefit from enhanced security. With a headless CMS, the content publishing platform cannot be accessed from the database, which translates to less possibility of DDoS attacks.

Finally, using a headless CMS allows you to manage content for multiple channels. Your content is being served up as pure data and is not bound to any particular UI structure. That means you have the flexibility to easily display it in different ways.

[CSS-Tricks](https://css-tricks.com/) is a great resource for developers, but it’s built using WordPress. Using this tutorial, you’ll create a basic CSS-Tricks clone using Strapi as your CMS and [Next.js](https://strapi.io/integrations/nextjs-cms) for the frontend.


## Planning the Content Model

A content model represents the pieces of your site and how they fit together. If you’ve ever created a database model, this should be a very familiar concept.

For example, in a blog, your content model will consist of several content types, e.g. posts, writers, and tags. Each of these content types contains attributes. For example, the `posts` content type might contain attributes like a title, the text of the post, the author’s name, tags, and a featured image.

Some of these attributes are actually links between different content types. The author of a post, for example, is a separate content type, and the link between the author type and the post type is one of the things described by the content model. One author can be connected to many articles.

Structurally, CSS-Tricks is basically a blog. We can look at the CSS-Tricks website to get an idea of what our content model should look like and what the content types should be.


![Front page of CSS-Tricks](https://i.imgur.com/ckdiBOY.png)



You can see from the navbar that there are several categories of content: articles, videos, almanac, newsletter, guides, and books. Today, you will be focusing on articles, the most visible category on the site.

If you look at a single article, you will find that it includes some obvious attributes that can be described like this:

- Author (a reference to the Author type)
- Date
- Title
- Content
- Tags (a reference to the Tags type)
- Featured photo

Clicking on the author of the article will bring up their page, which will give you an idea of what kind of data the Author type must include:

- Name
- Photo
- Twitter handle
- Website
- Bio
- Articles (a reference to the Articles type detailed above.)
- Finally, many articles have tags. The tag type should include the following:
- Tag name
- Articles (a reference to the Articles type)


## Building the Backend Data Structure

To create this CSS-Tricks clone, you’ll start from the backend and work your way forward. Starting a new Strapi project is incredibly easy.


1. Create a directory to hold your app. You can call it something like "strapi-css-tricks”, then `cd` into that directory.
2. Create your Strapi project using the `create-strapi-app` command: `npx create-strapi-app backend --quickstart`. Your basic file structure for this app will be a `backend` folder for the Strapi app, and a `frontend` folder for the Next.js app.
3. A local server will automatically startup. Navigate to `[localhost:1337/admin](http://localhost:1337/admin)` to create an administrator account.

**Create Collection Types**

Now you can create your collection types. You’ll start with the **Articles** type. In the admin panel, go to *Plugins* *> Content-Types Builder*. Under **Collection Types**, click **Create new collection type**. In the popup, type *article* under **Display Name**, then hit **Continue**. This will bring up options for fields.

Start by clicking **Text**. Type *title* in the **name** field. Click **Add another field**. Repeat this pattern for all of the fields associated with the Articles type, making sure to choose the correct type for each field as in the screenshot below:


![](https://paper-attachments.dropbox.com/s_C01981784E9504DC8ECE10487CD22CE7831A125E9060482F349FEC76CBFA7F39_1639483631779_image.png)


As you saw above, the author and tags fields are links (called *relations*) to other content types. This is similar to a foreign key in SQL databases. You can’t add those relations until you have the Author and Tag content types, so save your work, and make those next.

Back under **Collection Types**, click **Create new collection type** again and go through the steps to create the **Author** type. Use the image below to see what fields to add.


![](https://paper-attachments.dropbox.com/s_C01981784E9504DC8ECE10487CD22CE7831A125E9060482F349FEC76CBFA7F39_1639482973889_image.png)


The **articles** field is a relation to the Article type. Make sure to select **Author has many Articles**. This describes the relationship between authors and articles.


![](https://paper-attachments.dropbox.com/s_C01981784E9504DC8ECE10487CD22CE7831A125E9060482F349FEC76CBFA7F39_1639483029513_image.png)


Finally, create the **Tag** type using the same steps as you used for the other content types. Tags only have two fields: tagname and articles, which is a relation to the Articles type.


![](https://paper-attachments.dropbox.com/s_C01981784E9504DC8ECE10487CD22CE7831A125E9060482F349FEC76CBFA7F39_1639483287658_image.png)


Articles can have many tags, and tags can be associated with many articles, so make sure that when you create the relation between the two types, you choose **Tags has and belongs to many Articles**.


![](https://paper-attachments.dropbox.com/s_C01981784E9504DC8ECE10487CD22CE7831A125E9060482F349FEC76CBFA7F39_1639483684702_image.png)


**Set Permissions**

Next, you’ll need to set permissions on your app. In the admin panel, go to *General* *> Settings > Users & Permissions Plugin* *> Roles > Public*. In order for the API to be accessible to users, you will need to check the boxes for **find** and **findone** on each content type in the application. Do this and then hit **Save**.

You can verify that this worked by testing it out using [Postman](https://www.postman.com/). Send a GET request to `[localhost:1337/authors](http://localhost:1337/authors)`. If you’ve set the permissions correctly, you will get a JSON object of authors in the response.


## Building the Frontend

As you know, the beauty of a headless CMS lies in the flexibility to choose how you create the frontend. In this case, you will be using Next.js.

To get started, navigate into your project folder, then use `npx create-next-app frontend` to create your Next.js app. Start your app with `npm run dev` (while keeping your Strapi backend server running.) Your frontend will be on `[localhost:3000](http://localhost:3000)` while the server runs on `[localhost:1337](http://localhost:1337)`.

**Structuring the Next.js App**

At a basic level, your app needs a header and the ability to display cards representing articles. You can create a basic Header component and display it on all pages using `_app.js`. Update the `pages/_app.js` file by adding the following code to it:


    import '../styles/globals.css';
    import Header from '../components/Header';
    
    function MyApp({ Component, pageProps }) {
      return (
        <>
          <Header />
          <Component {...pageProps} />
        </>
      );
    }
    
    export default MyApp;

Now create an `ArticleCa``rd.js` component file in the `frontend/components` directory to display data about the articles that you will get from the Strapi backend. Below, you can see one way to construct this component.


    import Link from 'next/link';
    
    const ArticleCard = ({ article }) => {
      const date = new Date(article.date).toDateString();
      return (
        <div className="article">
          <div className="cover-image">
            <img src={`http://localhost:1337${article.photo.data.attributes.url}`} />
          </div>
          <div className="article-info">
            {article.tags.data.map((tag, i) => (
              <Link href={`/tag/${tag.attributes.tagname}`} key={i}>
                <span className="tags">{tag.attributes.tagname}</span>
              </Link>
            ))}
            <Link href={`/article/${article.slug}`}>
              <h2>{article.title}</h2>
            </Link>
            <div className="article-brief">{article.brief}</div>
            <p className="author-info">
              <img src={`http://localhost:1337${article.author.data.attributes.photo.data.attributes.url}`} />
              <Link href={`/author/${article.author.data.attributes.username}`}>
                {article.author.data.attributes.name}
              </Link>{' '}
              on {date}
            </p>
          </div>
        </div>
      );
    };
    export default ArticleCard;

On the main page (`index.js`), you will be connecting to the Strapi API and mapping the article objects to ArticleCard components.

**Connecting to the Strapi API**

To fetch articles from the backend, you will simply send a `GET` request to the `articles` endpoint on the server. You can do this in a `getServerSideProps` function:


    import ArticleCard from '../components/ArticleCard';
    const qs = require('qs');
    export default function Home({ articles }) {
      return (
        <div className="article-grid">
          {articles.map((article, i) => (
            <ArticleCard article={article.attributes} key={i} />
          ))}
        </div>
      );
    }
    export async function getServerSideProps() {
      const query = qs.stringify({
        populate: [
          'tags',
          'author',
          'author.photo',
          'photo'
        ],
      }, {
        encodeValuesOnly: true,
      });
    
      const response = await fetch(`http://localhost:1337/api/articles?${query}`);
      const articles = await response.json();
      return {
        props: {
          articles: articles.data,
        },
      };
    }

The [Strapi docs](https://strapi.io/documentation/developer-docs/latest/developer-resources/content-api/content-api.html#api-endpoints) have a great explanation for how to access your API from different endpoints. There are automatically created endpoints for all types of CRUD operations.

As can be seen, we are populating some fields, this is because the media and relational fields are not loaded by default. So we need to define the ones we need by populating them.

If you look closer at the code for the [ArticleCard component](https://github.com/chyke007/strapi-css-tricks/blob/master/frontend/components/ArticleCard.js), you can see a couple examples of how data from the Strapi API is accessed.


     <div className="article-info">
            {article.tags.data.map((tag, i) => (
              <Link href={`/tag/${tag.attributes.tagname}`} key={i}>
                <span className="tags">{tag.attributes.tagname}</span>
              </Link>
            ))}

In the code above, the array of tags associated with the article object is mapped over to create those tags on the page.


    <p className="author-info">
              <img src={`http://localhost:1337${article.author.data.attributes.photo.data.attributes.url}`} />
              <Link href={`/author/${article.author.data.attributes.username}`}>
                {article.author.data.attributes.name}
              </Link>{' '}
              on {date}
            </p>

This code uses the article object to access its associated author, then hits that author’s endpoint to retrieve their photo and name.

You can see this in action below:


![](https://paper-attachments.dropbox.com/s_C01981784E9504DC8ECE10487CD22CE7831A125E9060482F349FEC76CBFA7F39_1639500295617_image.png)


**Styling Your App**

The layout of CSS-Tricks is pretty standard for a blog, but there are lots of neat little touches that make it look more polished. The wavy gradient background is done with a [clip-path](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path), but you can also use [Figma](https://www.figma.com/) to create a wavy gradient image and place it over the grey background.

The header is partially transparent with an inset `box-shadow`, as seen in the CSS below:


    header {
      position: relative;
      z-index: 2;
      display: flex;
      padding: 1rem;
      margin: 0;
      color: #fff;
      background: rgba(0, 0, 0, 0.25);
      box-shadow: inset 0 -2px 5px rgb(0 0 0 / 33%);
    }

Finally, the ArticleCards are simple cards displayed using CSS Grid.


    .article-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 2em;
      margin: 2em;
    }
    .article {
      background: #fff;
      color: #474747;
      border-radius: 8px;
      position: relative;
      z-index: 1;
      overflow: hidden;
      -webkit-filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.24));
      filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.24));
      display: flex;
      flex-direction: column;
    }

You can see the finished product below:


![](https://paper-attachments.dropbox.com/s_C01981784E9504DC8ECE10487CD22CE7831A125E9060482F349FEC76CBFA7F39_1639498712989_image.png)



## **Conclusion**

As you can see, it’s easy to get started with Strapi. Strapi plus [Next.js](https://strapi.io/integrations/nextjs-cms) is an excellent alternative to [WordPress](https://strapi.io/wordpress-alternative). You just created a good start to a CSS-Tricks clone, but there are lots of other features that could be added.

For more practice and to get a better look at the code, [fork and clone the repo on GitHub](https://github.com/chyke007/strapi-css-tricks)!
