React Admin Panel Tutorial with Chakra UI and Strapi

This page summarizes the projects mentioned and recommended in the original post on dev.to

CodeRabbit: AI Code Reviews for Developers
Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.
coderabbit.ai
featured
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com
featured
  1. Refine

    A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.

    In building data-intensive applications like React admin dashboards and in-house applications, among others, speed, customizability, and performance are of the essence as these applications are pivotal in the management of most businesses and software. This has led developers to opt for solutions like refine that provide these qualities out of the box. refine is a React-based framework that helps to build data-intensive applications in due time. It does this by providing hooks, providers, and components that provide room for UI customizability, and data management, as well as easy integration with any custom backend APIs and popular backend services like Strapi, Hasura, etc.

  2. CodeRabbit

    CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

    CodeRabbit logo
  3. Strapi

    πŸš€ Strapi is the leading open-source headless CMS. It’s 100% JavaScript/TypeScript, fully customizable, and developer-first.

    In this React admin panel tutorial, we will be creating an admin application with refine that will be built with ChakraUI, an enterprise-level React component library, and Strapi, a popular backend service, as its backend provider.

  4. react-hook-form

    πŸ“‹ React Hooks for form state management and validation (Web + React Native)

    In the code above, we used the useForm() hook to create records. This hook comes from the (@pankod/refine-react-hook-form) which is a refine adapter of the React Hook Form library. This library allows you to use the React Hook Form library with refine. More information about the useForm() hook can be obtained here.

  5. chakra-ui

    Chakra UI is a component system for building products with speed ⚑️

    In this React admin panel tutorial, we will be creating an admin application with refine that will be built with ChakraUI, an enterprise-level React component library, and Strapi, a popular backend service, as its backend provider.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • The Ultimate React Toolkit: Everthing you need πŸ—ΊοΈπŸ“¦πŸš€

    11 projects | dev.to | 9 Dec 2024
  • πŸ’… Creating Polished Content with React Markdown

    3 projects | dev.to | 22 Oct 2023
  • Ultimate Guide & Resources to Enhancing Your ReactJS Skills || 16 GitHub repositories

    16 projects | dev.to | 14 Aug 2023
  • Open source projects

    8 projects | /r/reactjs | 16 May 2023
  • refine vs Blitz.js

    6 projects | dev.to | 16 Mar 2023

Did you know that TypeScript is
the 1st most popular programming language
based on number of references?