Introduction
Welcome to the Naturaily Storyblok starter documentation!
What is our project?
We created this starter to accelerate our work by providing a ready-made set of tools, templates, and examples that facilitate the initiation of a project or task. With it, we can avoid the need for continuously recreating the same basic elements from scratch, saving time and effort. This starter serves as a solid foundation upon which we can quickly build our solution, focusing primarily on its development and customization to specific requirements, rather than wasting time on repeating the same initial steps.
📚 Features and tech stack
- 💎 Atomic Design ↗ (opens in a new tab) - Consistent, reusable, and atomic design system.
- 🙌 Turborepo ↗ (opens in a new tab) - High-performance build system for JavaScript and TypeScript codebases.
- 🏎️ Next.js ↗ (opens in a new tab) - Fast by default, with config optimized for performance (app routing).
- 💅 Tailwind CSS ↗ (opens in a new tab) - A utility-first CSS framework for rapid UI development.
- ✨ ESlint ↗ (opens in a new tab) and Prettier ↗ (opens in a new tab) - For clean, consistent, and error-free code (
eslint-config-custompackage). - 📕 Storybook ↗ (opens in a new tab) - Create, test, and showcase your components.
- 🚀 GitHub Actions ↗ (opens in a new tab) - Pre-configured actions for smooth workflows.
- 💻 T3 Env ↗ (opens in a new tab) - Manage your validation for type-safe environment variables (
envpackage). - 🧬 Codegen ↗ (opens in a new tab) - Generate code from your GraphQL schema.
- 🔥 Framer motion ↗ (opens in a new tab) - Powerful animation library.
- 📚 Storyblok ↗ (opens in a new tab) - Ready to use integration with Storyblok headless CMS. Including:
- Ready to use Setup script - In the scope of
storyblok-setuppackage. Setting basic datasources used in stories, blocks, stories themselves, and webhook that revalidates front-end routes on story publish. - Preview handled - In the scope of
storyblok-previewpackage. - Storyblok's GraphQL integration - In the scope of
storyblok-apipackage. - Ready to use SEO configuration - In the scope of
storyblok-seopackage. - Storyblok RichText support - In the scope of
storyblok-richtextpackage. - Basic Storyblok blocks ready to use - In the scope of
storyblok-uipackage. - Revalidation webhook handler - In the scope of
storyblok-revalidationpackage. - And some useful utils - In the scope of
storyblok-utilspackage.
- Ready to use Setup script - In the scope of
How to Use These Docs
On the left side of the screen, you'll find the docs navbar. The pages of the docs are organized sequentially, from basic to advanced, so you can follow them step-by-step when building your application. However, you can read them in any order or skip to the pages that apply to your use case.
On the right side of the screen, you'll see a table of contents that makes it easier to navigate between sections of a page. If you need to quickly find a page, you can use the search bar at the top, or the search shortcut (Ctrl+K or Cmd+K).
To get started, checkout the Requirements guide.