DOCSEARCHbyAlgolia
Submit Docs

Superplate Documentation

website·Indexed 29 days ago

https://pankod.github.io/superplate/

Documentation for Superplate, a boilerplate for React and Next.js projects. It provides guides on integrating various tools and libraries, including state management (Redux Toolkit, Recoil, Zustand, MobX), testing frameworks (Cypress, WebdriverIO, Enzyme, React Testing Library), CI/CD pipelines (GitHub Actions, Travis CI, Azure Pipelines), and other utilities like Apollo GraphQL, Axios, and Storybook.

Tokens
35.8K
Snippets
257
Records
270
Agent score
73%

What's inside Superplate

  1. Overview of the refine framework

    refine is a React-based framework designed for the rapid development of web applications, specifically targeting data-intensive projects like admin panels, dashboards, internal tools, and customer-facing storefronts (via SSR support). It automates repetitive CRUD operations and provides standardized solutions for authentication, access control, routing, networking, state management, and i18n.

  2. Use React components in Markdown with MDX

    Superplate supports MDX, allowing you to write JSX and embed React components directly within your Markdown files. This enables a hybrid approach where standard Markdown syntax (like bold and italics) can coexist with interactive React elements.

  3. Define plugin metadata in meta.json

    Provide basic information about the plugin, including its slug, display name, description, and documentation URL in meta.json.
    {
    "slug": "my-plugin",
    "name": "My Plugin",
    "description": "A plugin to do great things.",
    "url": "https://url-to-docs/my-plugin"
}

  4. Core features and backend integrations of refine

    refine provides a robust architecture for web apps with the following key capabilities:

    • Backend Connectivity: Connectors for 15+ services including REST API, GraphQL, NestJs CRUD, Airtable, Strapi (v4 and GraphQL), Supabase, Hasura, Nhost, Appwrite, Firebase, Directus, and Altogic.
    • Framework Support: SSR support via Next.js or Remix.
    • State Management: Integrated with React Query for mutations and state management.
    • Advanced Tooling: Built-in support for real-time applications, audit logs, document versioning, and any i18n framework.
    • Routing & Security: Flexible routing with any router library and dedicated providers for authentication and access control flows.

  5. Implement internationalization with next-translate in Superplate

    Superplate provides an optional i18n plugin using next-translate to manage translations in Next.js. Translations are stored in language-specific folders within the public/locales directory. Each language folder contains JSON files (e.g., common.json, home.json) where translations are defined as key-value pairs.
    locales/
  en/
    common.json
    home.json
  tr/
    common.json
    home.json

  6. Use ESLint for code quality in Superplate React

    Superplate React uses ESLint to identify and report patterns in ECMAScript/JavaScript code to ensure consistency and prevent bugs. Because the project is built on Create React App, ESLint is included by default. For advanced configuration, such as extending or replacing the default ESLint config, refer to the official Create React App documentation.

  7. Understand refine's headless architecture

    refine is 'headless by design,' meaning it provides a collection of helper hooks, components, and providers that are decoupled from the UI and business logic. This allows developers to use any custom design or UI framework. While it is UI-agnostic, it provides ready-made integrations for Ant Design System, Material UI, Mantine, and Chakra UI.

  8. Implement basic styled-components in Next.js

    Use styled-components to create CSS-in-JS styles that separate styling concerns from element architecture. This prevents class name collisions and improves component readability.
    // components/header/styled.ts
import styled from 'styled-components'

const Container = styled.div<{isLarge: boolean}>`  
  padding: 50px;  
  font-size: ${({ isLarge }) => (isLarge ? "36px" : "18px")};
`;

const Title = styled.div`  
  margin-right: 50px;  
  color: ${({ theme }) => theme.colors.cancelRed};
`;

const Subtitle = styled(Title)`  
  margin-right: 30px;
`;
    // components/header/index.tsx
import React from "react";
import { Container, Title, Subtitle } from "./styled";

export const Header: React.FC = () => {
  return (
    <Container isLarge>
      <Title />
      <Subtitle />
    </Container>
  );
};

  11. Set up Storybook in a React project

    Storybook is a tool for UI development that isolates components for faster development. If Storybook was not selected during the Superplate project creation phase, it can be added manually by initializing Storybook and installing the required dependencies.
    # Initialize Storybook
npx sb init

# Install dependencies
npm i -D @storybook/addon-actions @storybook/addon-essentials @storybook/addon-links @storybook/preset-scss @storybook/addon-knobs @storybook/react babel-loader @storybook/preset-create-react-app style-loader css-loader