Strapi.io - Design APIs Fast

Nov 30, 2020

Strapi.io - Design APIs Fast

Design APIs fast, manage content easily.

Author

Ayush Gupta
Ayush GuptaSenior Software Engineer

Strapi is a flexible, open-source Headless CMS that gives developers the freedom to choose their favorite tools and frameworks, while also allowing editors to easily manage and distribute their content. By making the admin panel and API extensible through a plugin system, Strapi enables the world's largest companies to accelerate content delivery while building beautiful digital experiences.

Why Strapi.io?

Strapi can generate an admin panel in a few clicks and get your whole CMS set up in a few steps.

Strapi’s admin panel gives you an intuitive interface to create, edit and delete your content and automatically creates logic to handle CRUD operations, including filtering and permissions.

It has a built-in user system that allows you to manage users Roles & Permissions

Moreso, every part of your application can be easily customized. Strapi’s architecture allows you to extend your app to match your exact use case and install plugins like GraphQL etc. to your application.

Strapi's Tech Stack

To build, deploy, and manage Strapi, use the following recommended frameworks and programming languages for best results:

How To Use Strapi-CLI.

Before you engage in creating a new project, it is very important to update your Node.js to (>v12.x). Go ahead and update it before reading on.

1. Create a new project:

yarn create strapi-app my-project --quickstart

If you want to use a specific database, you don’t have to use the --quickstart flag. The CLI will let you choose the database of your choice.

By default, create-strapi-app will generate an empty Strapi project. If you want an application that is pre-configured for a specific use case than you can use --template with template GitHub URL

yarn create strapi-app my-project --template

2. Start the project:

yarn develop

Note: If created with --quickstart, then it will automatically run your application.

Navigate to http://localhost:1337/admin and create the first admin user.

  • Navigate to Content-Type Builder from the side panel under Plugins.
  • Click on + Create new collection type link and create a new collection.
Create a new collection
  • Add one or more fields for your collection.
Add fields for the Collection
  • Edit BASE SETTING and ADVANCE SETTING to add field names and properties.
  • Click finish to update all the fields to collection.
  • Finally, click Save to save the collection.

5. Add content to your collection

  • Navigate to COLLECTION TYPES from the side panel.
  • Click on the + Add New Restaurant button to add a new entry.
Add new content to the collection
  • Click on Save to update the changes.

6. Set roles and permissions

  • Navigate to SETTINGS > USERS & PERMISSIONS PLUGIN > ROLES
  • Click on Public Roles and scroll down to Permissions.
  • Change the Permission for the collections routes that can access without auth and can update the action for every route from Advanced Settings
  • Change the USERS-PERMISSIONS public routes.

Note: In a similar manner, we can update the Roles and Permissions for authenticated routes also.

Add plugins to your application

  • Navigate to Marketplace
  • Add your required Plugin for the application like Roles & Permissions for JWT authentication, GraphQL, etc.

    Note: Roles & Permissions are pre-installed if you created with --quickstart so, you only need to update the roles and permissions from the Setting tab.

Manage Your Media Library

  • Navigate to Media Library.
  • You can add/update/delete your media assets from a single panel here.
Media Libray

Additional Features:

We can create Themes and Components by using + Create New Single Type and + Create New Component in Content-Type Builder

Additional features

Conclusion

Here we are! Your collection is now accessible at http://localhost:1337/

Consume your API with your favorite frameworks as well as frontend or backend programming languages like React, Vue.js, React Native, Ruby and many more.

Find the complete example project on Github, and Postman files for Postman Collection and Postman Environment at the links.

Thank you for reading!

Subscribe to Our Newsletter

More from the engineering frontline.

Dive deep into our research and insights on design, development, and the impact of various trends to businesses.
Insight
Building Local LLMs Using Dart FFI And llama.cpp: Beyond Wrapper Packages
Sep 11, 2026

Building Local LLMs Using Dart FFI And llama.cpp: Beyond Wrapper Packages

Build local LLMs in Flutter with Dart FFI and llama.cpp, and see how native bridges, GGUF models, memory management, and token streaming enable private, on-device AI.

Insight
My Flutter App Froze With Three Photos on Screen. Here's What I Was Doing Wrong
Sep 11, 2026

My Flutter App Froze With Three Photos on Screen. Here's What I Was Doing Wrong

This blog explains how rethinking Flutter’s image-processing architecture fixed severe performance issues and improved rendering efficiency.

Insight
Building a Production-Ready Canva-like Editor with Konva.js, React 19 and Next.js 15
Sep 10, 2026

Building a Production-Ready Canva-like Editor with Konva.js, React 19 and Next.js 15

This blog explains how to build a production-ready canvas editor with Konva.js, React, and Next.js, covering architecture, performance, and key engineering decisions.

Insight
What a PHP-to-NestJS Banking Migration Taught Us About Architecture, Security, and Trust
Sep 8, 2026

What a PHP-to-NestJS Banking Migration Taught Us About Architecture, Security, and Trust

This blog explores the architecture, security, performance, and documentation lessons from migrating a legacy PHP/Laravel banking platform to NestJS.

Insight
Building Production-Grade Video Thumbnail Scrubbing in the Browser: HLS, Frame Extraction, Caching, and Performance Trade-offs
Sep 7, 2026

Building Production-Grade Video Thumbnail Scrubbing in the Browser: HLS, Frame Extraction, Caching, and Performance Trade-offs

This blog explains how to build responsive video thumbnail scrubbing in the browser for local files and HLS streams, covering frame extraction, caching, and performance trade-offs.

Insight
The Agent Can See Your App. How Often Can It Look?
Sep 4, 2026

The Agent Can See Your App. How Often Can It Look?

AI coding agents can now interact with mobile apps, but their effectiveness depends on iteration speed. This blog explores how React Native architecture influences feedback loops and AI-driven developer productivity.

Insight
Building Interactive Cards from Design JSON Without Killing Your Feed: Overlays, Video, Mute/Unmute, and Lag-Free Lists
Sep 1, 2026

Building Interactive Cards from Design JSON Without Killing Your Feed: Overlays, Video, Mute/Unmute, and Lag-Free Lists

Learn how to turn design JSON into interactive, video-enabled cards using overlays, smart media controls, caching, and virtualization without slowing down high-cardinality feeds.

The Right Conversation Can

Save You Six Months.

Book a call
Strapi.io - Design APIs Fast - GeekyAnts