This guide is designed to give you an overview of Frontstack. Dive into the essentials section to learn more about the different features and concepts.

​
Design first

Frontstack promotes a design-first approach. Define blocks based on your UI design to decouple frontend from backend. Use mock data to test your frontend before the backend is ready.

1

🎨 UI Design

A good UI design is the starting point of any ecommerce project, migration or relaunch.

2

🔍 Extract Content Structure

Use the design to extract the content structure and define it using blocks.

3

🔮 Mock Data

Use powerful mock data to get started with your frontend application.

4

🔨 Build Frontend

Generate a Client SDK to use the blocks in your frontend application.

5

🔗 Connect to Backend

Connect your blocks to the backend to fetch real data and bring your design to life.

​
Lifecycle

Frontstack complements your development process by providing help when needed. This section outlines the stages and how Frontstack assists you.

​
Setup Project

After you register for a Frontstack account, you can create your first project. Think of a project as a container for your frontend application.

​
Store Data

Frontstack is designed to be used with one or multiple backends. You can connect backend systems using integrations and store data in your project.

You can also skip this, follow the design-first approach and connect a backend later.

​
Design Blocks

You start by designing blocks, which are essentially API endpoints that you can use in your frontend application. Blocks are feature rich and can be used to create simple data structures as well as complex, nested, queryable data.

​
Create Pages

Since blocks on their own are not very useful, you can create pages that make them discoverable. Pages are a way to associate routes with blocks and manage language variants.

​
Generate Client SDK

Once you have your blocks and pages defined, you can use the Frontstack CLI to generate a Client SDK specific to your project.

npx @frontstackdev/cli generate

And use it in your frontend application.

import { client } from "./.frontstack/generated-client";

const data = await client.block("CategoryDetail", "running-shoes");

​
Build Frontend

Frontstack does not enforce any framework or flavor of frontend development. We are big fans of Nuxt.js, but you can use any frontend framework you want. Check out the Nuxt.js integration for a quick start.

​
Ship to Production

Once you are happy with your API and frontend, you can ship it to production. Frontstack offers a release management system to control the release of new features to various environments.

​
What’s next?

If you want to find out more, dive into the essentials section to get started.